Cannot read property 'call' of undefined Webpack Bootstrap React

Question

I'm having an issue that I have found others too have had. The only problem I am running into is that all solutions I have found do not seem to work for me. When I build my project everything succeeds without error. I then start webpack-dev-server on my built project within my dist folder. When I open the browser I receive the following error:

Now this does not occur when I am running webpack-dev-server in development mode. The simple explanation is because I am not performing any code splitting in my webpack.config.dev.js file. So I know the problem is occurring with my CommonsChunkPlugin. I just cannot nail down exactly why. Here is the link to the repo that I am working on: Nappstir/react-landing-page. There is nothing complex about this project. I am simply trying to build a template for basic landing pages that will be built in React, thus no Redux is wired. Any ideas on what could be causing this error?

You can clone this project and simply run npm install and npm run build to build the project. Then just visit 'http://localhost:3000/`

Answer 1

I actually found the reasoning as to why this error was occurring. It appears the issue had to do with the file order that my html-webpack-plugin was injecting the files. What was done to resolve this was use the chunks & chunksSortMode properties provided by html-webpack-plugin. The code would look something like this:

chunks: ['manifest', 'vendor', 'main'],
chunksSortMode: function (a, b) {
  let orders = ['manifest', 'vendor', 'main'];
  if (orders.indexOf(a.names[0]) > orders.indexOf(b.names[0])) {
    return 1;
  } else if (orders.indexOf(a.names[0]) < orders.indexOf(b.names[0])) {
    return -1;
  } else {
    return 0;
  }
},

This then returns each chunk in specified order of your chunks array.