Questions tagged [webpack-4]
Use this tag for questions specific to features in Webpack 4. When using this tag, also include the more generic [webpack] tag where possible.
webpack-4
1,410
questions
123
votes
6
answers
86k
views
Webpack 4 - How to configure minimize?
Webpack 4 comes with the following statement:
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
Fair enough, but I cannot find any information ...
- 9,226
91
votes
8
answers
136k
views
Webpack 4 - create vendor chunk
In a webpack 3 configuration I would use the code below to create separate vendor.js chunk:
entry: {
client: ['./client.js'],
vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
},
...
- 35.8k
87
votes
14
answers
159k
views
Can't import SVG into Next.js
When I try to import SVG Image then the following error shows. Which loader I have to use for importing SVG images?
./static/Rolling-1s-200px.svg 1:0
Module parse failed: Unexpected token (1:0)
You ...
- 1,679
74
votes
16
answers
141k
views
Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'
I was trying to run webpack-4 first time
webpack ./src/js/app.js ./dist/app.bundle.js
it shows warning / error :
WARNING in configuration
The 'mode' option has not been set, webpack will fallback ...
- 2,892
57
votes
4
answers
34k
views
Get current `--mode` in webpack.config.js
How can I get the current --mode specified in package.json inside webpack.config.js? (For instance, for pushing some plugins.)
package.json
"scripts": {
"dev": "webpack --...
- 3,538
56
votes
4
answers
55k
views
Webpack 4 migration CommonsChunkPlugin
I need help migrating the following code from webpack 3 to 4.
new webpack.optimize.CommonsChunkPlugin({
minChunks: module => module.context && module.context.indexOf("node_modules") !==...
- 775
55
votes
2
answers
39k
views
Getting Error from webpack-cli: "TypeError: merge is not a function" in webpack config
I'm using webpack-merge to combine two webpack.config files together but I keep getting the error
"TypeError: merge is not a function when I run the command "webpack --config ./config/...
45
votes
4
answers
37k
views
Webpack 4. Compile scss to separate css file
Im trying to compile scss into a separate css file with no luck. As it is now the css gets into the bundle.js together with all js code.
How can i separate my css into its own file?
This is how my ...
- 453
44
votes
2
answers
66k
views
How to generate dynamic import chunk name in Webpack
I am dynamically calling an import statement in my TypeScript code, based on that Webpack will create chunks like below:
You can see Webpack is automatically generating the file name as 1, 2, 3 ...
- 7,821
40
votes
7
answers
41k
views
Webpack: After installing webpack and webpack-cli still getting error when running webpack
I have the latest versions of webpack installed:
"webpack": "^4.0.0",
"webpack-cli": "^2.0.9"
Yet when I run webpack in the terminal I get the following:
The CLI moved into a separate package: ...
- 5,857
37
votes
2
answers
41k
views
Do I ever need explicit allowSyntheticDefaultImports if esModuleInterop is true configuring TypeScript transpilation?
I need confirmation on the following theory. According to TS docs, there are two options that can be set in tsconfig.json.
--allowSyntheticDefaultImports: Allow default imports from modules with no ...
- 37.9k
36
votes
9
answers
80k
views
How to dynamically import SVG and render it inline
I have a function that takes some arguments and renders an SVG. I want to dynamically import that svg based on the name passed to the function. It looks like this:
import React from 'react';
export ...
- 1,043
34
votes
2
answers
20k
views
Cannot re-export a type when using the --isolatedModules with TS 3.2.2
I probably need to rethink the way we structure our React components. We are using the latest react-scripts that allow Typescript to be used and by default, the isolatedModules is being enabled which ...
- 7,467
32
votes
6
answers
33k
views
Issues with getting started with webpack 4
I am following the tutorial exactly as given here . But I am amazed that the docs seems outdated. e.g
npx webpack src/index.js dist/bundle.js fails with:
The CLI moved into a separate package: ...
- 14.4k
32
votes
1
answer
49k
views
Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks
I've the follow example configuration to use mini-css-extract-plugin with Webpack 4:
entry: {
a: ['./js/a.js', './scss/a.scss'],
b: ['./js/b.js', './scss/b.scss']
},
module: {
rules: [
...
- 515
31
votes
3
answers
13k
views
Webpack: What is the difference between "all" and "initial" options in optimization.splitChunks.chunks
I'm looking for a clear explanation of the difference between these two options in webpack. I've read the description here but the difference is not clear. Quoting the description:
Setting the ...
- 1,434
30
votes
8
answers
105k
views
Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled
Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled
I am trying to setup react routing which works when I click on something ...
- 84.9k
30
votes
2
answers
34k
views
How to set mode to development or production in the config file?
We are migrating to webpack 4. We do have dev / prod config files already. We started getting this warning message:
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to '...
- 891
30
votes
2
answers
8k
views
How to use Webpack 4 SplitChunksPlugin with HtmlWebpackPlugin for Multiple Page Application?
I'm trying to utilize the SplitChunksPlugin to produce separate bundles per each page/template in a MPA. When I use the HtmlWebpackPlugin, I get an html file for each page with a script tag pointing ...
- 645
30
votes
3
answers
13k
views
How to configure webpack 4 to prevent chunks from list of entry points appearing in any other bundle?
I am working on a large project and trying to land webpack 3 -> 4 update. This app has somewhere around 1,000 entry points, and about 10 of those are considered "global" or "core" and guaranteed to be ...
- 10.4k
29
votes
2
answers
36k
views
Webpack 4 universal library target
According to the Webpack 4 documentation, if I specify libraryTarget: 'umd' it should result in the following output:
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports ==...
- 11.9k
29
votes
4
answers
12k
views
Can webpack 4 modules be configured as to allow Jasmine to spy on their members?
I've been unable to get my test jasmine test suite running with webpack 4. After upgrading webpack, I get the following error for almost every test:
Error: <spyOn> : getField is not declared ...
- 609
27
votes
2
answers
18k
views
How to specify output directory with "mini-css-extract-plugin"?
I am using the mini-css-extract-plugin to extract the CSS from a bundle to a file. I need to drop that file in a different place in the filesystem.
How do I configure the mini-css-extract-plugin to ...
- 2,225
27
votes
6
answers
31k
views
How to get a list of all files (or modules) included per chunk in Webpack
Can't seem to find any debug option or plugin in webpack to show what exactly went into a chunk.
Why do I need this? I've noticed cases where code splitting literally makes everything much larger ...
- 11.1k
27
votes
5
answers
22k
views
How to preload a CSS @font-face font that is bundled by webpack4+babel?
I have a webpack4+babel bundler setup for a react web app. In a LESS file, I reference a local font. This font gets copied over to the dist folder on build and its filename is hashed. I want to be ...
- 451
25
votes
3
answers
48k
views
How to upgrade to Babel 7
I tried to upgrade Webpack and Babel to 4, 7 respectively but couldn’t make it work. Also the official doc isn’t helping much with the upgrade.
I am getting following issue
compiler error: ERROR in ...
- 33.7k
25
votes
6
answers
25k
views
How can I replace files at compile time using webpack?
I have a project with miltiple configuration. The first config is config.dev.js file that contains some development configiration. I using it in development mode. The second config is config.js file. ...
- 251
24
votes
1
answer
11k
views
TypeError: Cannot read property 'javascript' of undefined + terser webpack plugin + react js
I recently added terser-webpack-plugin to minify my create react app code. But while build the project I got an error like TypeError: Cannot read property 'javascript' of undefined. Below are some ...
- 1,340
24
votes
2
answers
32k
views
UglifyJS and webpack v5
We've been using UglifyJS and webpack v4 for our react code, but then just updated to webpack v5. It appears that UglifyJS does not work with webpack v5. Is there an alternative? We need something ...
- 11.5k
24
votes
4
answers
36k
views
How to use multiple configuration files in webpack?
I'm building a webpack automated workflow. I completed the development server. All of my development configurations are in webpack.config.js file.
Then, I add it into package.json script via 'dev':'...
- 1,035
22
votes
3
answers
17k
views
How to load libraries which export Typescript in next.js
When trying to import a component from a private library which exports Typescript, we get the following error message:
Module parse failed: Unexpected token (82:7)
You may need an appropriate loader ...
- 8,694
22
votes
5
answers
33k
views
Can't resolve 'core-js/modules/es.array.concat'
I upgraded babel 6.x → 7.x but having issues running Webpack.
It is complaining about missing core-js/modules/*.
My babel.config.js is in the root directory. I converted the previously existing ....
- 1,292
21
votes
4
answers
29k
views
Uncaught TypeError: __webpack_require__(…).context is not a function
When I am trying to import dynamically vue components using this code:
const components = require.context('./', true, '/^index\.js$/');
I am getting this error:
app.js:9 Uncaught TypeError: ...
- 2,449
21
votes
3
answers
12k
views
How to print effective webpack build config to the console?
I have a complex webpack config setup (merge of dynamic settings over multiple config files) and I would like to see what is the final config that webpack uses, i.e. the result of the merge of all of ...
- 40.3k
20
votes
2
answers
17k
views
webpack 4 disable uglifyjs-webpack-plugin
I have had this problem for the last 2 days. So I decided to completely disable uglifyjs-webpack-plugin from webpack build process. I was not able to find anything on webpack 4.
- 4,062
20
votes
2
answers
40k
views
TypeError: compiler.plugin is not a function at ReactLoadablePlugin.apply
I want to implement SSR in ReactJs using React Loadable by Webpack. Below are a few lines from the package.json file:
const { ReactLoadablePlugin } = require('react-loadable/webpack');
plugins:[
...
- 201
20
votes
2
answers
22k
views
Webpack 4 - Sourcemaps
This article webpack 4: mode and optimization seems to suggest that when mode is set to development the devtool is set to eval.
I was expecting this to trigger sourcemap generation but running the ...
- 16.7k
20
votes
2
answers
16k
views
Can I use NODE_ENV="staging" with mode="production" in webpack 4?
My app use NODE_ENV for deciding which api server should request to.
NODE_ENV="production" => https://api.***/
NODE_ENV="staging" => https://api.staging-***/
NODE_ENV="development" => http://...
- 493
20
votes
4
answers
3k
views
Webpack 4 and react loadable does not seems to create correct chunk for server side rendering
I am trying to create an ssr react app with lazy loading import.
Everything works fine except it does not fetch all the required chunks.
I am also wondering if this is related to a dynamic component, ...
- 1,282
20
votes
1
answer
8k
views
How to remove unused CSS using webpack 4?
I am having problem removing unused CSS in webpack 4. It seems that most of the CSS purification plugins are dependent on extract text plugin which is not updated for version 4.
Here's my commands:
...
- 1,371
19
votes
3
answers
18k
views
Unknown "encore_entry_link_tags" function when using Webpack Encore ^0.21.0
I would like to use the new version of Webpack encore to have access to all the new features it offers. however after following the steps in the official guide I can't make it to work and I get ...
- 3,424
19
votes
5
answers
16k
views
Exclude certain module from a chunk webpack 4
How can I specify that I don't want a module in a chunk with webpack 4, let's suppose I don't want lodash in the vendor file (No matter the consequences), what can I do?
This is the actual ...
- 1,626
19
votes
4
answers
50k
views
The 'mode' option has not been set, webpack will fallback to 'production' for this value.Field 'browser' doesn't contain a valid alias configuration
Project directory structure.
Below are the webpack configuration files.
webpack.config.client.js
const path = require('path');
const webpack = require('webpack');
const CURRENT_WORKING_DIR = ...
19
votes
1
answer
14k
views
Using different versions of a dependency in different packages of a Yarn Workspace
I'm relatively new to using Yarn Workspaces and having a Monorepo set up, so forgive me if this has been answered. I don't believe I've found a clear answer on whether or not this is possible for a ...
- 998
17
votes
1
answer
18k
views
MiniCssExtractPlugin public path not working
I am using MiniCssExtractPlugin to lazyload CSS files in my React application.
I have given publicPath option for MiniCssExtractPlugin but it is not taking this option value, it is taking output....
- 387
17
votes
3
answers
26k
views
How to fix Uncaught DOMException: Failed to execute 'pushState' on 'History'
I have this little app that works fine in development mode with webpack-dev-server, but when I use the bundled files from the dist folder generated by the production mode, all I get in the browser is ...
- 1,061
17
votes
8
answers
50k
views
How can I resolve background image URL inside sass file using webpack-4?
this is my first time writing here so please bear that in mind. I'm first time using webpack in a project and I have a problem where I'm trying to set a background image using background url() ...
- 171
17
votes
4
answers
28k
views
Error: <spyOnProperty> : function is not declared configurable
I had working jasmine tests with webpack 3. Now I try to use it with webpack 4 but have some problem with it.
Firstly I had problem with spyOn function.
Error: : myFunction is not declared ...
- 215
17
votes
2
answers
2k
views
Configuring Cypress, cypress-react-unit-test, and React
I want to test our React components independently using the package cypress-react-unit-test. After several days, I have been unable to get it to work with the existing React Webpack configuration.
I ...
- 358
16
votes
1
answer
16k
views
Difference between publicPath and contentBase in webpack
I started using webpack and now confused between the publicPath and contentBase. The documentation isn't clear on the use case.
- 775