S
S
Stanislav_Bykov2019-02-01 17:14:48
React
Stanislav_Bykov, 2019-02-01 17:14:48

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'
}

package.json code:
{
  "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 question

Ask a Question

731 491 924 answers to any question