React not loading any component

Question

Problem: When running my react application locally with "npm run" I get a white page with no error logs.

Frameworks/programs used

React 15.6.2
NodeJs 8.11.3
webpack 1.15.0
babel 6.26.0
Git 2.18

OS Windows 10

I tried deleting all the node modules and the package-lock.json, I also tried updating the version of webpack as sugested here Whitescreen of death after pulling from git repo (ReactJS, Nginx)

One thing I noticed is that while I don't see any thing been loaded if I change a component I get the message: "The following modules couldn't be hot updated: (full reload needed)"

I tried updating the hot loader but this didn't work either, does anyone have an idea of whats going on?

UPDATE Here is the webpack sever configuration:

const webpack = require('webpack');
const path = require('path');
const webpackAliases = require('./webpackAliases');
const localBasePath = path.resolve(__dirname, '../');
const { localModuleResolve, localRootResolve, resolve } = require('../../common/tools');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const {
  babelLoader,
  jsonLoader,
  urlLoader,
  svgReactLoader,
  extractStylesLoader,
  faviconLoader,
  declarityLoader,
  workerLoader
} = require('./webpackLoaders');

module.exports = (basePath, appEntry, devConfig) => {
  const routesEntry = devConfig.app.routes;
  const historyAlias = {
    'deps-history': typeof devConfig.devServer.history == 'string'
                        ? devConfig.devServer.history
                        : localRootResolve('common/defaultHistory')
  }

  const extraWebpackConfig = devConfig.webpack || {};
  const extraAliases = extraWebpackConfig.aliases || {};

  return {
    entry: [
      'babel-polyfill',
      resolve('react-hot-loader/patch'),
      resolve('webpack-hot-middleware/client'),
      localRootResolve('src/devEntry.js')
    ],
    output : {
      filename: '[name].js',
      path: extraWebpackConfig.destinationPath || path.resolve(basePath, 'lib'),
      publicPath: '/static/'
    },
    devtool: 'cheap-module-source-map',
    module: {
      rules: [
        babelLoader({
          use: {
            options: {
              plugins: require("react-hot-loader/babel")
            }
          },
          include: [
            localRootResolve('src'),
            localRootResolve('lib'),
            path.join(basePath, 'src')
          ],
        }),
        jsonLoader(),
        urlLoader(),
        svgReactLoader(),
        faviconLoader(),
        declarityLoader(),
        workerLoader()
      //  extractStylesLoader()
      ]
    },
    resolve: {
      alias: Object.assign(
        {},
        webpackAliases,
        extraAliases,
        historyAlias,
        routesEntry ? {'deps-routes': path.resolve(basePath, routesEntry)} : {}
      ),
      extensions: [".js", ".jsx", ".json", ".dsx"],
      modules: [path.resolve(basePath, 'node_modules'), path.resolve(__dirname, '../../', 'node_modules')]
    },
    externals: {
      'react/addons': 'react',
      'react/lib/ExecutionEnvironment': 'react',
      'react/lib/ReactContext': 'react',
    },
    plugins: [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new webpack.EnvironmentPlugin(['NODE_ENV', 'WORKING_DIR']),
      //new ExtractTextPlugin({ filename: '[name]-styles.css', allChunks: true }),
      new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: function (module) {
          // this assumes your vendor imports exist in the node_modules directory
          return module.context && module.context.indexOf("node_modules") !== -1;
        }
      }),
    ]
  }
};

show how you are serving your bundles or how you are running webpack dev server, and also your webpack config — PlayMa256
– PlayMa256, Commented Aug 15, 2018 at 1:11
Add following code in your entry.js if (module.hot) { module.hot.accept(); } — Dženis H.
– Dženis H., Commented Aug 15, 2018 at 1:32
I'm already doing entry.js if (module.hot) { module.hot.accept(); } — Goca
– Goca, Commented Aug 15, 2018 at 22:41

Misael Calvillo Mancilla · Accepted Answer · 2018-08-15 01:21:36Z

1

You should try to use create-react-app and mount your components with that setup and see if they work. It's a lot easier and allows you to test your app without too much configuration.

npm install -g create-react-app

after that

create-react-app your-app-name

Then you can test every component without webpack configuration and try to find the bug.

answered Aug 15, 2018 at 1:21

Misael Calvillo Mancilla

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dženis H. · Accepted Answer · 2018-08-15 02:21:45Z

Hot Module Replacement -> It's like LiveReload for every module.

Adding module.hot.accept() means you're telling webpack the module can handle being hot reloading, but not actually doing anything.

Another option would be to include react-hot-loader or babel-plugin-react-transform in your project.

There is an official middleware to help you with this: webpack-hot-middleware

npm install --save-dev webpack-hot-middleware

Next, enable hot reloading in your webpack config:

Add the following plugins to the plugins array:

plugins: [
    // OccurenceOrderPlugin is needed for webpack 1.x only
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    // Use NoErrorsPlugin for webpack 1.x
    new webpack.NoEmitOnErrorsPlugin()
]

Occurrence ensures consistent build hashes, hot module replacement is somewhat self-explanatory, no errors are used to handle errors more cleanly.

Add 'webpack-hot-middleware/client' into the entry array. This connects to the server to receive notifications when the bundle rebuilds and then updates your client bundle accordingly.**

Now add the middleware into your server:

***Add webpack-dev-middleware the usual way:***

var webpack = require('webpack');
var webpackConfig = require('./webpack.config');
var compiler = webpack(webpackConfig);

app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: true, publicPath: webpackConfig.output.publicPath
}));
Add webpack-hot-middleware attached to the same compiler instance

app.use(require("webpack-hot-middleware")(compiler));
And you're all set!

References: Hot Module Replacement

I tried adding the configuration mentioned in the plugins, I was also already using the middleware

Goca · Accepted Answer · 2018-08-20 16:30:11Z

After a lot of testing we were able to fix the problem and it was related to permissions, it was strange that the hod-loader module was not able to update any of the files so we thought it had to be related to file/folder permissions. When I initially cloned the repo I was doing everything with elevated permissions even when running Git Bash, we decided to re-clone the repo in another folder and ran gitbash without elevated permissions, after that everything is working fine. Notice that I tried re-cloning the repo before and it didn't work because I was doing everything with elevated permissions, I don't know why this is the case or if it had to do with the existing IT policies but hope this can help someone else with same problem.

Collectives™ on Stack Overflow

React not loading any component

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related