Create-react-app: Support for Webpack 2

[alleroux]

I created a new app today and wanted to add support for bootstrap4. I npm installed the latest sass-loader which requires webpack 2 so I upgraded to webpack 2. It seems there are some breaking changes with the module loader in Webpack 2 when migrating. When I npm run start the app I'm now getting these errors:

Failed to compile.

Error in TypeError: Cannot read property '0' of undefined

• ExternalModuleFactoryPlugin.js:18 ExternalModuleFactoryPlugin.
  [react-apps]/[webpack]/lib/ExternalModuleFactoryPlugin.js:18:38

• NormalModuleFactory.js:159
  [react-apps]/[react-scripts]/[webpack]/lib/NormalModuleFactory.js:159:3

• Tapable.js:75 NormalModuleFactory.applyPluginsAsyncWaterfall
  [react-apps]/[react-scripts]/[tapable]/lib/Tapable.js:75:69

• NormalModuleFactory.js:144 NormalModuleFactory.create
  [react-apps]/[react-scripts]/[webpack]/lib/NormalModuleFactory.js:144:8

• Compilation.js:356 Compilation.process [as _addModuleChain]
  [react-apps]/[react-scripts]/[webpack]/lib/Compilation.js:356:16

• Compilation.js:424 Compilation.process [as addEntry]
  [react-apps]/[react-scripts]/[webpack]/lib/Compilation.js:424:7

• SingleEntryPlugin.js:24 Compiler.compiler.plugin
  [react-apps]/[webpack]/lib/SingleEntryPlugin.js:24:16

• Tapable.js:107 Compiler.applyPluginsParallel
  [react-apps]/[react-scripts]/[tapable]/lib/Tapable.js:107:14

• Compiler.js:394 Compiler.compile
  [react-apps]/[react-scripts]/[webpack]/lib/Compiler.js:394:7

• Compiler.js:203 Compiler.runAsChild
  [react-apps]/[react-scripts]/[webpack]/lib/Compiler.js:203:7

• compiler.js:70
  [react-apps]/[html-webpack-plugin]/lib/compiler.js:70:19

• compiler.js:69 Object.compileTemplate
  [react-apps]/[html-webpack-plugin]/lib/compiler.js:69:10

• index.js:47 Compiler.
  [react-apps]/[html-webpack-plugin]/index.js:47:40

  Is there a plan to upgrade to Webpack 2?

[gaearon]

I'm not sure what you mean by “upgraded to webpack 2”. Installing webpack directly in your project is not (and has never been) supported. You won’t find this suggested anywhere in the User Guide which documents how to use Create React App.

Could you let me know how you arrived at the conclusion that this is something that could work? I’m curious if we need to update the User Guide anywhere to clarify it wouldn’t work.

Currently, react-scripts (which is the development dependency Create React App provides) works on top of Webpack 1.x. We have merged support for Webpack 2 into master, but it’ll take a while to release while we’re still working out all the issues with it (and its plugins). In fact that’s the value proposition of Create React App: instead of going through the plain of migrating to Webpack 2 yourself (and bumping into bugs and incompatibilities), you just wait until we do all the work for you, and provide you with a simple migration in a new version of react-scripts. Currently, Webpack 2 support is scheduled for [email protected].

If you want to configure Webpack manually yourself, you can run npm run eject and then do anything you’d like (for example, bump its version). However, as described in the User Guide, it means you’ll have to maintain the build configuration yourself, and we won’t be able to help you with updating or changing anything. You will need to reach out to Webpack community for help, as we only provide support for the subset of Webpack features we are enabling through react-scripts with no configuration.

Even if you eject, I wouldn’t recommend updating to Webpack 2 right away. If you just want to add sass-loader, install the version that’s compatible with Webpack 1. It’s quite a bit of work to migrate to Webpack 2, and I would only recommend doing it if that’s specifically what you want to do.

Finally, you should be able to use Sass without ejecting just fine, as well as customize Bootstrap themes by separating a package. So maybe using sass-loader for this is just an unnecessary complication.

Hope it helps!

[alleroux]

It seems I should not have used sass-loader. https://reactstrap.github.io/ Seems like the right way to go. I want to be able to add my own mixins. Thanks for your help!

[gaearon]

No worries! Let me know if there’s anything we could help you with.