Develop Reference

Webpack creating separate JS files for few imports

I am trying to build a custom webpack configuration for a complex project. While building I have observed that webpack is generating separate JS file when I import babel-runtime/core-js/json/stringify. Can someone help me understand what's happening here and why webpack is generating a separate JS file.
package.json
{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "A boilerplate for large scale react apps",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "sh -ac 'webpack --mode production ${DEPLOY_TARGET:+--env.target $DEPLOY_TARGET}'",
"build:production": "DEPLOY_TARGET='production' yarn build",
"build:staging": "DEPLOY_TARGET='staging' yarn build"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"#typescript-eslint/eslint-plugin": "2.x",
"#typescript-eslint/parser": "2.x",
"babel-eslint": "10.x",
"babel-loader": "^8.0.6",
"babel-preset-react-app": "^9.0.2",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"dotenv": "^8.2.0",
"eslint": "6.x",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "^3.0.2",
"eslint-plugin-flowtype": "3.x",
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-react": "7.x",
"eslint-plugin-react-hooks": "1.x",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"react-hot-loader": "^4.12.15",
"stylelint": "^11.1.1",
"stylelint-config-standard": "^19.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-custom-processor-loader": "^0.6.0",
"stylelint-processor-styled-components": "^1.8.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2",
"webpack-merge": "^4.2.2",
"workbox-webpack-plugin": "^4.3.1"
},
"dependencies": {
"lodash": "^4.17.15",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-router-dom": "^5.1.2",
},
"peerDependencies": {
"stylelint": "^11.1.1"
}
}
webpack.config.js
const { DefinePlugin } = require('webpack');
const path = require('path');
// Webpack plugins
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWepackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { rootDir } = require('./utils');
const {
entryPath,
getEnvJson,
htmlTemplatePath,
outputDir,
publicDir,
sourceDir,
} = require('./utils');
module.exports = env => ({
// Configure's our app entry points
entry: {
main: entryPath,
},
// Configure's loaders to let webpact know how different extension should be
// loaded when bundling
module: {
rules: [
// Configure's babel loader for transpiling javascript, eslint loader
// for linting javascript, stylelint loader for css linting
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader',
{
loader: 'stylelint-custom-processor-loader',
options: {
configPath: path.resolve(rootDir, '.stylelintrc.js'),
},
},
'eslint-loader',
]
},
// Configure's loaders for images
{
test: /.(png|jpg|jpeg|svg|gif)/,
use: 'file-loader'
},
]
},
// Configure's destination for the bundled code
output: {
path: outputDir,
},
// Configure's additions plugins to be used by webpack
// Order of plugins is important
plugins: [
// Removes all the contents of output folder(but not the folder itself)
// before every webpack build
new CleanWebpackPlugin(),
// Copies all contents of public folder as it is excluding index.html file
new CopyWepackPlugin([
{
from: publicDir,
to: outputDir,
ignore: ['index.html']
}
]),
// Injects target specific enviroment variables
new DefinePlugin({
'process.env': getEnvJson(env.target)
}),
// Uses `public/index.html` and creates a `index.html` file for the app
// by injecting the generated bundles javascript files
new HtmlWebpackPlugin({
template: htmlTemplatePath
}),
],
// Configure's custom behavior for how modules are resolved by webpack
resolve: {
modules: [sourceDir, 'node_modules']
}
});
.babelrc
{
"presets": ["react-app"]
}

That is because of your entryPath.
module.exports = {
entry: {
bundle1: '.src/fileForBundle1.js',
bundle2: '.src/fileForBundle2.js'
},
This would generate two bundles.
Make sure entryPath is not an object of multiple values.

Issue was with the file-loader regex which was incorrectly configured and which resulted in matching babel-runtime/core-js/json/stringify. So file-loader was being used to load it.

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react'

I'm stuck with the following error when trying to build a react app with Webpack4 and Babel7.
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react' from '/Users/me/Desktop/reflask'
- If you want to resolve "react", use "module:react"
- Did you mean "#babel/react"?
at Function.module.exports [as sync] (/Users/me/Desktop/reflask/node_modules/resolve/lib/sync.js:43:15)
at resolveStandardizedName (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at items.map (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
at passPerPreset (/Users/me/Desktop/reflask/node_modules/#babel/core/lib/config/config-descriptors.js:58:96)
# multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]
I've tried removing the node_modules folder and reinstalling dependencies with the following.
Terminal
rm -rf node_modules/
npm install
Configuration
package.json
{
"name": "reflask",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"prop-types": "^15.6.2",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"bootstrap": "^4.1.3",
"react": "^16.5.2",
"react-bootstrap": "^0.32.4",
"react-dom": "^16.5.2",
"react-router-dom": "^4.3.1"
}
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['react']
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './js/components/App.jsx';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}

in your webpack config did you already try #babel/preset-react instead of just react?
Btw. you test for /\.js$/
Better test for /\.jsx?$/ (x? means x is optional), because you import a .jsx file in your index.js
Not
options: {
presets: ['react']
}
but
options: {
presets: ['#babel/preset-react']
}

place .babelrc file at root dir with this inside
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
and remove preset from babel-loader webpack cfg
options: {
presets: ['react']
}

I did it at the end with this settings, (becouse es2015 has been changed https://www.npmjs.com/package/babel-preset-es2015)
now!
And presets in package.json or .babelrc or babel.config ::
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/react', '#babel/preset-env'],
plugins: ['#babel/plugin-proposal-class-properties']
}
}
and..
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-transform-react-constant-elements": "^7.0.0",
"#babel/plugin-transform-react-inline-elements": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"#babel/runtime": "^7.1.5",
"babel-eslint": "^8.2.6",
"babel-loader": "^8.0.4",
"babel-node": "^6.5.3",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.20",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.26.1"
}
and the code that you call to preset example:
"theme:build": "babel theme/src -d theme/dist --presets #babel/react --plugins transform-class-properties --quiet && npm run webpack:store",
presets #babel/react
in github very much forum about the subject!

I had the same error before, I just run the app on another port.
To do so run this command in ur terminal
npm start
Then it'll ask if u want to run the app on another port write
y

It worked for me, I had to change ['react'] to ['#babel/preset-react'] in .bablerc
If your are upgrading babel from 6.x to 7.x

If your are upgrading babel from 6.x to 7.x, It worked for me, I had to change in .bablerc :
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}

`document` is null after webpack vue.js

I try to build a project with vuejs and webpack.
this is my index.js
import Vue from 'vue'
import App from './app.vue'
console.log(document.body)
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h) => h(App)
}).$mount(root)
after webpack it to bundles.js, and run it on a browser, it rises:
as you can see,document beacames null.
why document does not works? this bug is my problems or from vue.js?
this is my webpack.config.js:
const path = require("path")
module.exports = {
entry:path.join(__dirname,"./src/index.js"),
output: {
path: path.join(__dirname,"dist"),
filename: "bundle.js"
},
module:{
rules:[
{
test: /\.vue$/,
loader:"vue-loader"
},
{
test:/\.css$/,
use:[
'style-loader',
"css-loader"
]
},
{
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
loader: "url-loader",
options: {
"limit":1024,
name:"[name]-aaa.[ext]"
}
}
]
}
]
}
}
this is package.json
{
"description": "todolist",
"license": "MIT",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"dependencies": {
"vue": "2.5.16"
},
"devDependencies": {
"webpack-cli": "^3.0.3",
"webpack": "^4.11.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"vue-loader": "^14.2.2",/*15. 版本不行*/
"vue-template-compiler": "^2.5.16"
}
}

I assume your index.js is placed in the head of your HTML and because the JavaScript resource is blocking, your body has not even been defined yet.
You need to either put the JavaScript after your elements that you are targeting, or you need to use the onload event.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Can't resolve "app.js" - Webpack

Problem
So, i'm working a web app using Webpack and ES6. When I try to run Webpack, it tells me that it can't resolve "app.js". I've looked all across the internet for a solution, but I just couldn't find one, can someone help me?
The Full error is:
ERROR in ./assets/js/main.js
Module not found: Error: Can't resolve 'app.js' in 'C:\Users\sidna\Dropbox\Dev Stuff\Web Apps\Mondrian Generator\assets\js'
# ./assets/js/main.js 4:0-17
webpack.config.js
module.exports = {
entry: './assets/js/main.js',
output: {
filename: 'assets/js/build.js',
},
watch: true,
module: {
loaders: [
{
test: /\.scss$/, loader: "style-loader!css-loader!sass-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
],
}
};
app.js (Empty)
main.js
// SCRIPTS
require("app.js");
// STYLES
require("../css/large.scss");
package.json
{
"name": "mondrian-generator",
"version": "1.0.0",
"description": "Create your own Mondrian",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"dependencies": {
"css-loader": "^0.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.4.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"script-loader": "^0.7.0",
"webpack": "^2.4.1"
}
}

When the import is neither an absolute path (starting with /) nor explicitly a relative path (starting with ./ or ../), it is resolved as a module, which means it's Loading from node_modules Folders.
Your app.js is not in node_modules, so you need to change it to a relative path (assuming it's in the same directory as main.js):
require("./app.js");
Webpack follows the import behaviour of Node.js, but it also allows you to change it with the resolve.modules option.

Webpack, React-router and React from CDN

I use Webpack for bundling my React application and react-router for routing. ReactJs is loaded from CDN as external library. I get this error message from react-router and I am not sure if it possible to use React loaded from CDN with other react libraries.
PropTypes.js:8
Uncaught TypeError: Cannot read property 'PropTypes' of undefined(…)
(anonymous function) # PropTypes.js:8
__webpack_require__ # bootstrap 2b8bebf…:19
(anonymous function) # index.js:15
__webpack_require__ # bootstrap 2b8bebf…:19
(anonymous function) # index.jsx:3
__webpack_require__ # bootstrap 2b8bebf…:19
(anonymous function) # bootstrap 2b8bebf…:39
(anonymous function) # bootstrap 2b8bebf…:39
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Experiment</title>
</head>
<body>
<div id="content">
<!-- this is where the root react component will get rendered -->
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
<!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
<script src="http://localhost:8090/webpack-dev-server.js"></script>
<!-- include the bundle that contains all our scripts, produced by webpack -->
<!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
<script type="text/javascript" src="http://localhost:8090/assets/main.js"></script>
</body>
</html>
index.jsx
import {Router, Route, useRouterHistory, browserHistory} from 'react-router';
ReactDOM.render(
<h1>hello</h1>, document.getElementById('content')
);
webpack.config.js
var webpack = require('webpack');
var merge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var NpmInstallPlugin = require('npm-install-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;
console.log("target event is " + TARGET);
var common = {
cache: true,
debug: true,
entry: './src/script/index.jsx',
resolve: {
extensions: ['', '.js', '.jsx']
},
externals: {
// Adapt React to different environments.
'react': {
commonjs: 'react',
commonjs2: 'react',
amd: 'React',
root: 'React'
}
},
output: {
filename: '[name].js',
sourceMapFilename: '[file].map'
},
module: {
loaders: [{
test: /\.js[x]?$/,
loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
exclude: /(node_modules)/
}, {
test: /\.css$/,
loaders: ['style', 'css']
}, {
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}, {
test: /\.less$/,
loaders: ['style', 'css', 'less']
}, {
test: /\.woff$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
}, {
test: /\.woff2$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"
}, {
test: /\.(eot|ttf|svg|gif|png)$/,
loader: "file-loader"
}]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
if(TARGET === 'dev' || !TARGET) {
module.exports = merge(common,{
devtool: 'eval-source-map',
devServer: {
historyApiFallback: false
},
entry: './src/script/index.jsx',
output: {
filename: '[name].js',
publicPath: 'http://localhost:8090/assets'
},
plugins: [
new NpmInstallPlugin({
save: true // --save
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('dev')
})
]
});
}
if (TARGET === 'build') {
module.exports = merge(common, {
devtool: 'source-map',
output: {
path: './dist'
}
});
}
package.json
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.18.0",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"bootstrap": "^3.3.7",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"history": "^2.0.1",
"html-webpack-plugin": "^2.24.1",
"http-server": "^0.9.0",
"jquery": "^3.1.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"node-sass": "^3.10.1",
"npm-install-webpack-plugin": "^4.0.4",
"react": "^15.3.2",
"react-datagrid": "^2.1.1",
"react-dom": "^15.3.2",
"react-router": "^3.0.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2",
"webpack-merge": "^0.15.0"
}

Can you actually specify the environment like that in externals? The docs seem pretty straightforward on how to use it. This is what my externals looks like, and I use React/ReactDOM from CDN and with other libraries no problem:
externals: {
react: 'React',
'react-dom': 'ReactDOM'
}
It seems to set the environment you need to use the output.library and output.libraryTarget options, specifically the libraryTarget option as shown in the doc examples.