CODEWITHSUNDEEP
reactjswebpackbabeljs
otajor
otajor

Reputation: 953

Webpack 2 migration breaks ES6 module imports

So I've recently upgraded to webpack 2 on a React app. It worked straight out of the box without me changing anything but the version number! Great.

However, now I'm trying to get it to bundle my ES6 modules for me (import, export etc.), and babel and webpack do not seem to be playing well together.

The only change I've made to try to accomplish this is to change my .babelrc from this: 

{
  "presets": ["es2015", "stage-1", "react"],
  "plugins": ["transform-object-rest-spread"],
}

to this:

{
  "presets": [["es2015", {"modules": false}], "stage-1", "react"],
  "plugins": ["transform-object-rest-spread"],
}

Webpack still bundles this up without throwing an error, but when I open the app I get the dreaded "Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)."

Image of error Image of second error

The stack trace takes me back to the first line of my app (ReactDOM.render(...)

From what I can see this error usually arises when you try to import the default export of another component with import { Component } from './component.js' rather than import Component from './component.js'. I can't see why that would be the case here though, since I know my code works with babel transpiling it.

Any tips?

Upvotes: 2

Views: 318

Answers (1)

otajor
otajor

Reputation: 953

Seems like ["es2015", {"modules": false}] was not necessary and was causing the error.

Managed to get the desired behaviour by just leaving my babelrc as it was, and adding the following plugins to my webpack config: new webpack.optimize.CommonsChunkPlugin({...}) and new HtmlWebpackPlugin({...}).

Also made some other configuration changes according to this great tutorial, which also helps you bundle up your vendor modules separately and shows you how to split your code into chunks based on your react-router routes.

Upvotes: 1

Related Questions