Answer the question
In order to leave comments, you need to log in
Why doesn't the React application run with the bundle.js file?
I am studying React, I made an assembly in webpack. When I start devserver everything works fine, but when I generate the bundle.js file and run it on a third-party server, the bundle.js file does not start. Rather, it is loaded (if you write console.log in it, then the inscription gives out in the console), but the application is not mounted to the mount-point.
webpack.config.js code:
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
module.exports = {
entry: "./src/main.js",
output: {
path: __dirname + '/public/build/',
publicPath: "build/",
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015', 'stage-0', 'react']
}
}],
exclude: [/node_modules/, /public/],
},
{
test: /\.jsx$/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015', 'stage-0', 'react']
}
}],
exclude: [/node_modules/, /public/]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers:['ie >= 8', 'last 4 version']
})
],
sourceMap: true
}
}
],
exclude: [/node_modules/, /public/]
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers:['ie >= 8', 'last 4 version']
})
],
sourceMap: true
}
},
{
loader: 'sass-loader'
}
],
exclude: [/node_modules/, /public/]
},
{
test: /\.gif$/,
loader: "url-loader?limit=10000&mimetype=image/gif"
},
{
test: /\.jpg$/,
loader: "url-loader?limit=10000&mimetype=image/jpg"
},
{
test: /\.png$/,
loader: "url-loader?limit=10000&mimetype=image/png"
},
{
test: /\.svg$/,
loader: "url-loader?limit=10000&mimetype=image/svg"
}
]
},
mode: 'none'
}
{
"name": "ReactJS",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"devserver": "webpack-dev-server --debug --hot --devtool eval-source-map --output-pathinfo --watch --colors --inline --content-base public --port 8090 --host localhost",
"build": "webpack -p"
},
"author": "Stanislav Bykov",
"license": "ISC",
"dependencies": {
"@material-ui/core": "^3.4.0",
"@material-ui/icons": "^3.0.1",
"classnames": "^2.2.6",
"events": "^3.0.0",
"flux": "^3.1.3",
"jquery": "^3.3.1",
"keymirror": "^0.1.1",
"moment": "^2.23.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"autoprefixer": "^9.1.5",
"babel-core": "^6.26.3",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"json-loader": "^0.5.7",
"node-sass": "^4.9.3",
"postcss-loader": "^3.0.0",
"prop-types": "^15.6.2",
"react-hot-loader": "^4.3.8",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"url-loader": "^1.1.1",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question