This error comes when in webpack target = node
but i have done target=web
(default)
also i am not loading reactjs externally
this error comes on loading app in browser
what i am doing wrong?
In Console
File
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const config = {
target: 'web',
externals: [nodeExternals()],
entry: './src/index.js',
output: {
filename: '[name].bundle.js',
path: __dirname + '/build'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|svg|jpe?g|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
},
devtool: 'inline-source-map',
plugins: [
new HtmlWebpackPlugin({
title: 'Instarem.com'
})
]
};
module.exports = config;
.babelrc using
babel-preset-env
{
"presets": [
"react",
[
"env",
{
"targets": {
"browsers": ["last 2 versions"]
},
"debug": true,
"modules": "commonjs"
}
]
],
"plugins": [
"transform-object-rest-spread",
"transform-class-properties"
]
}
thanks:)
I found Clue
In facebook's create react app generator bundle it shows
module.exports = __webpack_require__(/*! ./lib/React */ "./node_modules/react/lib/React.js");
but in my case it shows only
module.exports = require("react");
You should not use
externals: [nodeExternals()],
in web app. According to https://github.com/liady/webpack-node-externals it is only for backend. Since you use nodeExternals
in web app you get CommonJS modules, that expects built in node require
function. So just remove it to fix error.
I encountered this problem a few minutes ago. This usually happens when you mix up the target
property for the bundle in webpack.config file. Eg if you are creating a bundle for React the target should be target: 'web'
and should not include anything relating to node like 'async-node'
or 'node'
.
const reactConfig = {
name: 'React Bundle',
target: 'web',
...
}
Maybe it will be helpful for someone. Add into call nodeExternals option importType with value 'umd'.
nodeExternals({
importType: 'umd'
})
I set this config up (minus the extraneous things that seem to be specific to your env) locally and it worked.
package.json
{
"name": "test-webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"webpack": "^3.5.5"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
.babelrc
{
"presets": [
"react",
[
"env",
{
"targets": {
"browsers": ["last 2 versions"]
},
"debug": true,
"modules": "commonjs"
}
]
]
}
webpack.config.js
const config = {
target: 'web',
entry: './index.js',
output: {
filename: '[name].bundle.js',
path: __dirname + '/build',
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
],
},
};
module.exports = config;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Hello</div>, document.getElementById('root'));
index.html
<body>
<div id="root" />
<script src=" ./build/main.bundle.js "></script>
</body>
Running npm start built the bundle and running index.html ran the react app.
My issue was in my package.json, I had to remove
"type":"module"
It was trying to load the file as an es6 module
如果您正在使用webpack
和HtmlWebpackPlugin
,请尝试从index.html
删除<script src="./src/app.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.