I had the same issue. For some reason, in our other app doing angular update automatically deleted some code in test.ts, namely: const context = require.context(‘./’, true, /\.spec\.ts$/); context.keys().forEach(context); and the declaration of require above that. I did that in my other app manually and so far it works. Maybe someone knows the reason for … Read more
In the module you are developing, add the conflicting packages to peerDependencies (and remove them from dependencies or devDependencies): // package.json “peerDependencies”: { “react”: “16.13.1”, “react-dom”: “16.13.1” }, Execute npm install in your module. Now add react and react-dom to the webpack configuration of your module as externals. These packages shouldnt be included in the … Read more
Node.js version 17 has switched to using OpenSSL 3.0. They advise: While OpenSSL 3.0 APIs should be mostly compatible with those provided by OpenSSL 1.1.1, we do anticipate some ecosystem impact due to tightened restrictions on the allowed algorithms and key sizes. If you hit an ERR_OSSL_EVP_UNSUPPORTED error in your application with Node.js 17, it’s … Read more
The color-adjust shorthand is currently deprecated and it depends on the [email protected] (source). I was able to fix this by reverting the autoprefixer package as well as @Benno to version 10.4.5. Run this: npm install [email protected] –save-exact
The chunk is reachable doesn’t mean the user’s browser can parse it. For example, if the user’s browser is old. But the chunk contains new syntax. Webpack loads the chunk by jsonp. It insert <script> tag into <head>. If the js chunk file is downloaded but cannot parsed. A ChunkLoadError will be throw. You can … Read more
So, what on God’s own green earth is harmony? After ES4 was abandoned, plans were scaled back in a new project which had the code name Harmony. This eventually evolved into ES6. And then what are harmony exports? The exports system that ES6 describes the final (?) version of.
Solution 1 I found another solution, using html-loader with interpolate option. https://github.com/webpack-contrib/html-loader#interpolation { test: /\.(html)$/, include: path.join(__dirname, ‘src/views’), use: { loader: ‘html-loader’, options: { interpolate: true } } } And then in html page you can import partials html and javascript variables. <!– Importing top <head> section –> ${require(‘./partials/top.html’)} <title>Home</title> </head> <body> <!– Importing navbar … Read more
I figured out how to do this in a pretty painless fashion. Things I had wrong: probably hooking in too late? the earliest plugin where you can accomplish this is the compilation’s ‘seal’ plugin. Despite the name, this plugin hook executes as the very first line in the seal function, so no sealing has yet … Read more
There are limitations in the import syntax that make it difficult to do if not impossible without using external libraries. The closest I could get is by using the Dynamic Import syntax. Two examples follow: the first one is the original I wrote while the second one is an edit from a user that wanted … Read more
Basically it boils down to pre-creating all the chunks you will ever need. Then you just need a way to dynamically refer to them. Here’s the solution I based mine on: http://henleyedition.com/implicit-code-splitting-with-react-router-and-webpack and here’s what I do since I don’t use React Router (side note: i dont find it to be a good match for … Read more