Create-react-app: Failed to compile.TypeError: Cannot read property '0' of undefined

Created on 3 May 2017 · 22Comments · Source: facebook/create-react-app

Hi,

Today we forked one of our new projects and we began noticing that our npm start, which runs react-scripts start, started failing with:

Failed to compile.                                                                                                                                                                                        [255/255]

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

  - ExternalModuleFactoryPlugin.js:19 
    [web]/[webpack]/lib/ExternalModuleFactoryPlugin.js:19:40

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

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

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

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

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

  - SingleEntryPlugin.js:24 Compiler.compiler.plugin
    [web]/[webpack]/lib/SingleEntryPlugin.js:24:16

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

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

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

  - compiler.js:70 
    [web]/[html-webpack-plugin]/lib/compiler.js:70:19

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

  - index.js:47 Compiler.<anonymous>
    [web]/[html-webpack-plugin]/index.js:47:40

We started ripping off parts of our project to perhaps spot what could be happening and we ended up with the following folder structure:

public/
  index.html
src/
  index.js
package.json

Where the file contents are:

public/index.html

<!doctype html>
<html lang="en">                                                                                                                                                                                                   
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  document.getElementById('root')
)

package.json

{
  "name": "client",
  "version": "0.1.0",                                                                                    
  "private": true,
  "dependencies": {
    "react": "^15.5.4",                                                                                  
    "react-dom": "^15.5.4"                                                                               
  },                                                                                                     
  "devDependencies": {                                                                                   
    "babel-eslint": "^7.2.3",                                                                            
    "eslint": "^3.19.0",                                                                                 
    "eslint-plugin-import": "^2.2.0",                                                                    
    "eslint-plugin-react": "^6.10.3",
    "react-scripts": "0.9.5",                                                                                                                                                                                      
    "webpack": "^2.4.1"                                                                                  
  },                                                                                                     
  "scripts": {                                                                                           
    "start": "react-scripts start"                                                                       
  }                                                                                                      
}

The same error still happens.
I had to install stuff like webpack and eslint so it could let me run it, or at least try to. Just in case.
Remember that it happens when I try to npm start.

Can you reproduce the problem with latest npm?

Yes. I'm using npm 4.5.0

Environment

Run these commands in the project folder and fill in their results:

npm ls react-scripts (if you haven’t ejected): [email protected]
node -v: v7.7.3
npm -v: 4.5.0

Then, specify:

Operating system:
No LSB modules are available.
Distributor ID: Debian
Description: Debian GNU/Linux 8.7 (jessie)
Release: 8.7
Codename: jessie
Browser and version:
Not reaching the browser at this point.

Source

sadasant

All 22 comments

I just downgraded everything in my package.json by a minor version and I'm still seeing the same error:

{
  "name": "client",
  "version": "0.1.0",                                                                                    
  "private": true,
  "dependencies": {
    "react": "15.5.3",
    "react-dom": "15.5.3"
  },
  "devDependencies": {
    "babel-eslint": "7.2.0",
    "eslint": "3.18.0",
    "eslint-plugin-import": "2.1.0",
    "eslint-plugin-react": "6.10.2",                                                                                                                                                                               
    "react-scripts": "0.9.4",
    "webpack": "2.4.0"
  },
  "scripts": {
    "start": "react-scripts start"
  }                                                                                                      
}

Help 😢

sadasant on 3 May 2017

It is not supported to install Webpack manually on top of a CRA project. Please either eject (if you want to configure Webpack), or remove Webpack from your package.json and run npm install.

gaearon on 3 May 2017

I'm curious: do you remember why you did this? Did anything in the User Guide (or some article on the web) give the impression that installing Webpack manually would work? What were you trying to achieve?

gaearon on 3 May 2017

@gearon Hi! So, we don't want to configure webpack, I just had to install it, otherwise it wouldn't run. That's what I meant with:

I had to install stuff like webpack and eslint so it could let me run it, or at least try to.

sadasant on 3 May 2017

I just had to install it, otherwise it wouldn't run.

That sounds like the root of the problem. (Installing webpack was a wrong solution to it.)

Can you please create a new project and provide me the error message that you thought means Webpack needs to be installed?

gaearon on 3 May 2017

👍1

I'm removing webpack, removing node_modules and re-building. I'll give an update in just a moment :v:

sadasant on 3 May 2017

👍1

@gaearon you were right! Removing webpack fixed the build for the stripped down version of the project. Now, I'm trying to use that to figure out how our real project is broken. We don't have webpack in our real project. Do you mind helping me reason what's wrong over there?

sadasant on 3 May 2017

@gaearon Turns out that one of our local npm repos, which is built with webpack, is causing some corruption of another of the dependencies in the main repo. I can fix it for now in our main repo just by not using the syntax "localDependency": "file:../localDependency",, and rather importing from the real path directly (as in, import localDependency from '../../../localDependency'). We'll be separating those local repos to individual repositories sooner rather than later anyway ^_^

Your suggestion helped me understand the problem! Thank you very much \o/

sadasant on 3 May 2017

It seems to me that our local dependency was somehow taking precedence on which webpack version to install, or something else that I don't currently understand.

sadasant on 3 May 2017

Thanks for sharing, this is helpful!

gaearon on 3 May 2017

I won't be investing more time in this, but there's another clue. In case this happens to someone else: We have one published opensource repo that is built with webpack also as a dependency, and that one works perfectly, so the problem seems to be tied to local dependencies built with webpack. NPM must be building them differently.

That's my current guess 😂 but I can help if this happens to somebody else - or to us in the future.

sadasant on 3 May 2017

This happened to me using "react-scripts": "^0.9.5". These two alternatives worked for me:

I had yarn with version 0.24.5 and this same error happened. I downgraded it to version 0.21.3 and started working, though it doesn't make sense for me 😕
The other alternative that worked for me was downgrading from "react-scripts": "^0.9.5" to "react-scripts": "^0.7.0".

leopiney on 17 May 2017

@leopiney Please delete node_modules and yarn.lock, then run yarn again. Maybe you have something weird there. If it doesn’t help please provide your package.json.

gaearon on 17 May 2017

Hi @gaearon

I tried that several times, but the error happened anyway. Plus, I have a couple of teammates with version 0.21.3 of yarn and the error didn't happen until they updated yarn to 0.24.5.
We're using MacOS Sierra 10.12.2 and up.

Here's the package.json:

{
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jss": "^6.2.0",
    "lodash": "^4.17.4",
    "material-ui": "^1.0.0-alpha.14",
    "next": "^2.3.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-jss": "^6.1.1",
    "react-redux": "^5.0.4",
    "redux": "^3.6.0",
    "redux-saga": "^0.15.3"
  },
  "devDependencies": {
    "react-scripts": "^0.9.5",
    "redux-devtools": "^3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "flow": "flow"
  }
}

leopiney on 17 May 2017

I have a feeling that next is causing the problem with a conflicting webpack version.
Can you please try the new canary version of react-scripts to see if this is resolved?

Simply replace "react-scripts": "^0.9.5", with "react-scripts": "canary", and delete node_modules/, then reinstall.

Timer on 17 May 2017

Hi @Timer , @gaearon

Switching to canary did the trick! Thanks!

To summarize:

| yarn version | react-scripts version | compile result |
| ------------- |:-------------:| -----:|
| 0.21.3 | 0.7.0 | OK |
| 0.21.3 | 0.9.5 | OK |
| 0.21.3 | canary | OK |
| 0.24.5 | 0.7.0 | OK / WARNINGS |
| 0.24.5 | 0.9.5 | FAIL |
| 0.24.5 | canary | OK |

Note: I always removed node_modules and yarn.lock before running yarn and yarn start

leopiney on 18 May 2017

Neat! I believe it was fixed in d6dbfc0353f5595b9bfd389a7694214744e1711a and 50aaae6c1c01ec078c2ef5205652c69a4d46aeb5. Yarn recently changed it's package hoisting / etc so it probably caused this.

Timer on 18 May 2017

👍1

I experienced the same problem, with pretty much exactly the same table as mentioned by @leopiney .

Upgraded yarn to 0.24.5 and react-scripts to canary. Fixed.

milesrichardson on 26 May 2017

Please don't use canary! It's just an unstable (and partly broken) version of what was later released as 1.0.x.

gaearon on 26 May 2017

I also just had this error and in the end the only way around I found was fresh install of create-react-app and other dependencies and as I do need to use webpack in my project in other places than just the main js bundle, I ejected. CRA seems to break on updates and without in my experience, so I don't think I'm going to regret ejecting, if I'll want to update later, I'll just make a clean install again.

ibmua on 24 Jul 2017

@ibmua unfortunately this is a bug of package managers, not Create React App. The proper solution here is to separate your CRA scaffolded application into a separate folder (see monorepo) until package managers can resolve their bugs.

If you are installing webpack alongside of react-scripts, it is completely expected to not work as of now.

Timer on 24 Jul 2017

👍1

i tried to downgrade my yarn version and clear my yarn cache