Failed to compile.TypeError: Cannot read property '0' of undefined

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): react-scripts@0.9.5
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.

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 😢

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.

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?

@Gearon

@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.

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?

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

@gaearon

@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?

@gaearon

@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/

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.

Thanks for sharing, this is helpful!

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.

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

@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

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"
  }
}

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

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

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

@leopiney

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.

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

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

@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.

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

npm install --global yarn@0.21.3
yarn cache clean

and it works for me, hope it will help.

Navigation Menu

Repository navigation

Failed to compile.TypeError: Cannot read property '0' of undefined #2069

Can you reproduce the problem with latest npm?

Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Failed to compile.TypeError: Cannot read property '0' of undefined #2069

Description

Can you reproduce the problem with latest npm?

Environment

Activity

sadasant commented on May 3, 2017

gaearon commented on May 3, 2017

gaearon commented on May 3, 2017

sadasant commented on May 3, 2017

gaearon commented on May 3, 2017

sadasant commented on May 3, 2017

sadasant commented on May 3, 2017

sadasant commented on May 3, 2017

sadasant commented on May 3, 2017

gaearon commented on May 3, 2017

sadasant commented on May 3, 2017

leopiney commented on May 17, 2017

gaearon commented on May 17, 2017

leopiney commented on May 17, 2017

Timer commented on May 17, 2017

leopiney commented on May 17, 2017

Timer commented on May 17, 2017

milesrichardson commented on May 26, 2017

gaearon commented on May 26, 2017

ibmua commented on Jul 24, 2017

Timer commented on Jul 24, 2017

XanderDwyl commented on Apr 25, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions