react-scripts@1.0.0 can’t `npm start` if dependencies include Storybook

[DrewDennison]

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes with latest yarn

Many errors, especially related to "missing modules", are due to npm bugs.

If you're using Windows, follow these instructions to update npm.

If you're using OS X or Linux, run this to update npm:

npm install -g npm@latest

cd your_project_directory
rm -rf node_modules
npm install

I did npm upgrade -g yarn (yarn --version gives 0.24.4)
I did rm -rf node_modules
yarn install

Then try to reproduce the issue again.

Can you still reproduce it?
Yes

Description

What are you reporting?
Unable to run yarn start

Expected behavior

App loads on development server

Tell us what you think should happen.

Project was building before upgrading to react-scripts 1.0.0 I was on 0.9.5 before.

Actual behavior

Tell us what actually happens.
Getting this stacktrace

TypeError: Cannot read property 'request' of undefined
  
  - ExternalModuleFactoryPlugin.js:37 handleExternals
    [mustang-web]/[webpack]/lib/ExternalModuleFactoryPlugin.js:37:33
  
  - ExternalModuleFactoryPlugin.js:46 next
    [mustang-web]/[webpack]/lib/ExternalModuleFactoryPlugin.js:46:8
  
  - ExternalModuleFactoryPlugin.js:59 handleExternals
    [mustang-web]/[webpack]/lib/ExternalModuleFactoryPlugin.js:59:7
  
  - ExternalModuleFactoryPlugin.js:79 ExternalModuleFactoryPlugin.<anonymous>
    [mustang-web]/[webpack]/lib/ExternalModuleFactoryPlugin.js:79:5
  
  - NormalModuleFactory.js:246 applyPluginsAsyncWaterfall
    [mustang-web]/[react-scripts]/[webpack]/lib/NormalModuleFactory.js:246:4
  
  - Tapable.js:204 
    [mustang-web]/[react-scripts]/[tapable]/lib/Tapable.js:204:11
  
  - IgnorePlugin.js:56 IgnorePlugin.checkIgnore
    [mustang-web]/[react-scripts]/[webpack]/lib/IgnorePlugin.js:56:10
  
  - Tapable.js:208 NormalModuleFactory.applyPluginsAsyncWaterfall
    [mustang-web]/[react-scripts]/[tapable]/lib/Tapable.js:208:13
  
  - NormalModuleFactory.js:230 NormalModuleFactory.create
    [mustang-web]/[react-scripts]/[webpack]/lib/NormalModuleFactory.js:230:8
  
  - Compilation.js:382 Compilation._addModuleChain
    [mustang-web]/[react-scripts]/[webpack]/lib/Compilation.js:382:17
  
  - Compilation.js:464 Compilation.addEntry
    [mustang-web]/[react-scripts]/[webpack]/lib/Compilation.js:464:8
  
  - SingleEntryPlugin.js:22 SingleEntryPlugin.<anonymous>
    [mustang-web]/[webpack]/lib/SingleEntryPlugin.js:22:15
  
  - Tapable.js:229 Compiler.applyPluginsParallel
    [mustang-web]/[react-scripts]/[tapable]/lib/Tapable.js:229:14
  
  - Compiler.js:488 
    [mustang-web]/[react-scripts]/[webpack]/lib/Compiler.js:488:8
  
  - Tapable.js:131 Compiler.applyPluginsAsyncSeries
    [mustang-web]/[react-scripts]/[tapable]/lib/Tapable.js:131:46
  
  - Compiler.js:481 Compiler.compile
    [mustang-web]/[react-scripts]/[webpack]/lib/Compiler.js:481:7

Environment

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

1. npm ls react-scripts (if you haven’t ejected):

npm ls react-scripts                                                                                                                                           [10:58:24 PM]
mustang-web@0.1.0 /Users/drew/projects/mustang/mustang-web
└─┬ react-scripts@1.0.0
  └── UNMET PEER DEPENDENCY webpack@2.5.1

npm ERR! peer dep missing: webpack@2, required by babel-loader@7.0.0
npm ERR! peer dep missing: webpack@^2.2.0, required by extract-text-webpack-plugin@2.1.0
npm ERR! peer dep missing: webpack@^2.2.0, required by webpack-dev-server@2.4.5

2. node -v:
   v7.10.0

3. npm -v:
   4.2.0

4. yarn -v:
   v0.24.4

Then, specify:

1. Operating system: OSX
2. Browser and version: Chrome

Reproducible Demo

This is probably something really obvious. Let me know if you would like me to make a public repo. Sorry my code is in a private repo.

Please take the time to create a new app that reproduces the issue.

Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo.

(Accidentally, you might get to the root of your problem during that process.)

Push to GitHub and paste the link here.

By doing this, you're helping the Create React App contributors a big time!
Demonstrable issues gets fixed faster.

[wirmar]

This might be related to the following yarn issue: yarnpkg/yarn#3315.
I was running into the same issue before downgrading to an older yarn version.

[gaearon]

Can you please check if this reproduces if you run npm install rather than Yarn?

[phillipj]

I also got invalid webpack version in a repro project just created: #2232 (comment)

[Timer]

This is a bug in NPM who is failing to install webpack.
You can switch to yarn or remove other dependencies depending on webpack 1.x.

NPM:

npm WARN extract-text-webpack-plugin@2.1.0 requires a peer of webpack@^2.2.0 but none was installed.
npm WARN webpack-dev-server@2.4.5 requires a peer of webpack@^2.2.0 but none was installed.

create-react-app-v1-upgrade@0.1.0 /Users/joe/Desktop/temp/create-react-app-v1-upgrade
└─┬ @kadira/storybook@2.35.3
  └── webpack@1.15.0 

Yarn:

create-react-app-v1-upgrade@0.1.0 /Users/joe/Desktop/temp/create-react-app-v1-upgrade
├─┬ @kadira/storybook@2.35.3
│ ├─┬ babel-loader@6.4.1
│ │ └── webpack@2.5.1  extraneous
│ └── webpack@1.15.0 
└─┬ react-scripts@1.0.0
  └── webpack@2.5.1 

[gaearon]

So is it npm or Yarn bug?
Shall we close?

[phillipj]

Agree with @Timer. Can confirm the dependency graph looks as expected when using yarn, most probably an npm issue since the webpack dependency in CRAs package.json looks good IMO.

Nonetheless something I assume will hit many devs as npm v3 is included in Node.js LTS.

Also verified this is an issue with Node.js v7.10.0 (stable) / npm v4.2.0.

[gaearon]

I’m confused that original poster used Yarn. So this is an issue for both?

[hoest]

I had the same issue with yarn and npm. When I removed @kadira/storybook everything worked fine. So I think you'll need to wait until @kadira/storybook supports Webpack 2.

[gaearon]

It is super weird if npm and Yarn have the same bug. It's kinda hard to believe.

[hoest]

When using npm the error was different, but it had the same cause @kadira/storybook.

[gaearon]

It might mean that there's a mistake somewhere in dependency tree of some package which is surfacing different messages. I wonder where it is.

[hoest]

What can I do to help out? What info do you need?

[phillipj]

Yeah, I got so hung up in the dependency graph, I didn't even try to start the server. This is what I observe in my repro project:

yarn

1. Installation looks to be fine
2. $ yarn start ends in the output shown by the original poster

npm

1. Installation warns about missing webpack v2 peer requirement
2. $ npm start halts a lot quicker:

$ npm start

> create-react-app-v1-upgrade@0.1.0 start /create-react-app-v1-upgrade
> react-scripts start

webpack.validateSchema is not a function

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.10.3
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! create-react-app-v1-upgrade@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1

Difference seems to be that yarn at least gets webpack v2 installed, but there's still some issues with the dependencies installed.