I am using vue-cli and workbox-webpack-plugin injectMode
new InjectManifest({
swSrc: './src/sw.ts',
swDest: 'sw.js',
}),
in sw.ts, I try to import other file
import { precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
import { WorkboxPlugin, setCacheNameDetails, RouteHandler } from 'workbox-core'
import { CacheableResponsePlugin } from 'workbox-cacheable-response'
import { ExpirationPlugin } from 'workbox-expiration'
import Strategies, { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies'
// import other file
import { CustomMessage, MessageType, MESSAGE_META, SWRouting } from './utils/registerSW'
but when building APP, it will fail,
error: js/chunk-2d213953.a6b52dae.js from Terser
Unexpected token: punc (:) [js/chunk-2d213953.a6b52dae.js:3,12]
when I remove this import statment, building works well.
So, Could I import other files ? How ?
Generally speaking, what you're trying to do should work. The InjectManifest plugin will kick off a webpack child compilation for the your swSrc file, and will inherit whatever plugins and config you have set up for your main, parent compilation. It should be able to bundle ES modules into a final service worker.
It sounds like there's something specific in one of those ./utils/registerSW imports that is causing Terser to be unable to parse the bundled code, though. I would recommend starting by just importing a very small, no-op function from ./utils/registerSW, and confirm that that works. Then try importing each of those functions from ./utils/registerSW one at a time until you find the one that's causing issues, and check the original source code to see what might be triggering it.
It's possible that the child compilation kicked off by InjectManifest is misconfigured, and perhaps that's due to a bug that needs to be fixed, but I would start with those debugging steps first.
Related
I was checking the node official docs and I found that the import url of the node native modules in the examples of es modules starts with node:.
I did not use node very much, maybe there were some huge changes happened. So:
Can someone share some links that I can get some context about this change?
What if we don't add the node: before the import url? I tested a bit and it seems everythings works fine.
Thanks a lot.
import { open } from 'node:fs/promises';
let filehandle;
try {
filehandle = await open('thefile.txt', 'r');
} finally {
await filehandle?.close();
}
I wrote some node packages and use "type": "module" in pacakge.json and not use node: when I import native modules, I did not see any errors.
From the docs:
Core modules can be identified using the node: prefix, in which case it bypasses the require cache. For instance, require('node:http') will always return the built in HTTP module, even if there is require.cache entry by that name.
I know little about bundler and I'm using vite to build project, I got a error when import some package to configure dev server :
SyntaxError: Cannot use import statement outside a module
So here is the thing:
import pinyin from 'pinyin/esm/pinyin-web.js'
export const somePlugin = {
name: 'someplugin',
configureServer(server) {
server.middlewares.use('/somepath', (req, res, next) => {
const foo = pinyin('foo')
next()
})
},
}
I don't use the normal way(import pinyin from 'pinyin') , because that need a package nodejieba which need to install unnecessary node-gyp, so I choose the web version that don't need nodejieba.
I've searched the error, some says add "type": "module" to package.json file. but it already exist in my package.json.
however, I make the change:
// import pinyin from 'pinyin/esm/pinyin-web.js'
import pinyin from 'pinyin/lib/pinyin-web.js'
and problem get solved,I was confused because I thought vite prefer ES module.
So,
1> what cause the problem above?
2> why should I import file with extensions ? eg: import pinyin from 'pinyin/lib/pinyin-web.js'
I have to add extensions .js or it will cause error. while in vite.config.ts I needn't add extensions.
3> I tried to add field optimizeDeps in vite.config.ts like this
export default defineConfig({
plugins: [vue(), somePlugin],
optimizeDeps: {
include: ['pinyin'],
},
})
but it seems to be useless, the offical doc says:
"During development, Vite's dev serves all code as native ESM. Therefore, Vite must convert dependencies that are shipped as CommonJS or UMD into ESM first."
did that work for the frontend part and package "pinyin" is for the dev server so whether add the
field optimizeDeps there is no difference.
codesandbox
I'm developing an application using dependency injection with tsyringe. That's the example of a service that receives the repository as a dependency:
import { injectable, inject } from 'tsyringe'
import IAuthorsRepository from '#domains/authors/interfaces/IAuthorsRepository'
#injectable()
export default class ListAuthorsService {
constructor (
#inject('AuthorsRepository')
private authorsRepository: IAuthorsRepository
) {}
And the dependencies container:
import { container } from 'tsyringe'
import IAuthorsRepository from '#domains/authors/interfaces/IAuthorsRepository'
import AuthorsRepository from '#domains/authors/infra/typeorm/repositories/AuthorsRepository'
container.registerSingleton<IAuthorsRepository>(
'AuthorsRepository',
AuthorsRepository
)
export default container
In the tests, I don't want to use the dependencies registered on the container, but instead, to pass a mock instance via parameter.
let authorsRepository: AuthorsRepositoryMock
let listAuthorsService: ListAuthorsService
describe('List Authors', () => {
beforeEach(() => {
authorsRepository = new AuthorsRepositoryMock()
listAuthorsService = new ListAuthorsService(authorsRepository)
})
But I'm receiving the following error:
tsyringe requires a reflect polyfill. Please add 'import
"reflect-metadata"' to the top of your entry point.
What I thought was - "I may need to import the reflect-metadata package before executing the tests". So I created a jest.setup.ts which imports the reflect-metadata package. But another error occurs:
The instance of the repository is somehow undefined.
I would like to run my tests in peace.
First create in root of your project an jest.setup.ts.
In your jest.config.js, search for this line:
// A list of paths to modules that run some code to configure or set up the testing framework before each test
// setupFilesAfterEnv: [],
uncomment, and add your jest.setup.ts file path.
// A list of paths to modules that run some code to configure or set up the testing framework before each test
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
Now import the reflect-metadata in jest.setup.ts:
import 'reflect-metadata';
And run tests again.
I went through the same problem here and refactoring the test find out that it has to import the dependencies first and then the class of service that will be tested
Is it possible to import from something other that what "main" points to?
In my library that is installed into node_modules, I have the main set to
lib/index.js
so (using es2015 imports - source was ts compiled js), I can do
import { FunctionA, FunctionB } from 'MyTestLibrary';
This works because these functions are exported inside of index.js under libs.
I also have an index inside a directory which exports functionC and functionD, the structure is here
/lib/otherdir/index.js
so if I do an import like so
import { FunctionC, FunctionD } from 'MyTestLibrary/otherdir';
my IDE does not complain but running the application I get a
Cannot find module MyTestLibrary/otherdir
Everything is exported as it should be.
You can access the directory directly like this:
import { FunctionC, FunctionD } from 'MyTestLibrary/lib/otherdir'
I'm new to both React and Babelify.
I'm using Node to compile a web app. Right now I'm doing this:
browserify({debug: true})
.transform(
babelify.configure({
comments : false,
presets : [
"react",
"babili",
],
})
)
.require('./app.js', {entry: true})
.plugin(collapse)
.bundle()
.on("error", function (err) {
console.log("Error:", err.message);
})
.pipe(fs.createWriteStream(destination));
My app is a VERY trivial "Hello, World!" proof-of-concept at the moment that's about this complex:
class Renderer {
render () {
ReactDOM.render(
<div>Hello, World!</div>
document.querySelector("#react-app")
);
}
}
module.exports = Renderer;
I'm getting this warning:
Warning: Accessing PropTypes via the main React package is deprecated, and
will be removed in React v16.0. Use the latest available v15.* prop-types
package from npm instead. For info on usage, compatibility, migration and more,
see https:/gfb.me/prop-types-docs
Warning: Accessing createClass via the main React package is deprecated,
and will be removed in React v16.0. Use a plain JavaScript class instead. If
you're not yet ready to migrate, create-react-class v15.* is available on npm
as a temporary, drop-in replacement. For more info see
https:/gfb.me/react-create-class
Error: [BABEL] /home/gweb/code/app.js: Unknown option:
/home/gweb/code/node_modules/react/react.js.Children. Check out
http:/gbabeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options
object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
For more detailed information on preset configuration, please see
http:/gbabeljs.io/docs/plugins/#pluginpresets-options. (While processing
preset: "/home/gweb/code/node_modules/react/react.js") while parsing file:
/home/gweb/code/app.js
I read the recommended stuff, but I'm new enough to both that I can't quite get a handle on it. I also read a bunch of other articles and SO posts, but none of them (that I could find) had this set (browserify, babelify, react).
My goal at the moment is just to get it transpiling with support for the React syntax (which is JSX, from what I understand?), so I can start playing with it and learning both libraries. What's the fastest way to get this implemented (I don't necessarily need most efficient or best; I'd rather have the easiest-to-understand incantation at this stage, so I can have things transparent while I learn).
It is not your setup issue but problem is with your import statements, i'm assuming you are importing react and PropTypes from react
import React, { PropTypes } from 'react';
So, using PropTypes from react library has been deprecated as mentioned in warning and you need to install PropTypes as a standalone library from npm and use that instead.
npm install prop-types --save and then do,
import PropTypes from 'prop-types', for more info https://www.npmjs.com/package/prop-types
this will resolve your first warning, also for second warning you need to install and use https://www.npmjs.com/package/create-react-class.
for the babel error please check if you have both required libraries installed.
https://www.npmjs.com/package/babel-preset-react,
https://www.npmjs.com/package/babel-preset-babili
Do you have an import of the form import * as React from 'react'?
If so, try replacing it with import React from 'react'.
The * imports everything from react, including the deprecated exports, and that's what triggers the warnings.