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

Created by: sadasant

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.