Create-react-app: [email protected] 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]
[email protected] /Users/drew/projects/mustang/mustang-web
└─┬ [email protected]
  └── UNMET PEER DEPENDENCY [email protected]

npm ERR! peer dep missing: webpack@2, required by [email protected]
npm ERR! peer dep missing: webpack@^2.2.0, required by [email protected]
npm ERR! peer dep missing: webpack@^2.2.0, required by [email protected]

1. node -v:
   v7.10.0

2. npm -v:
   4.2.0

3. 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: https://github.com/yarnpkg/yarn/issues/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: https://github.com/facebookincubator/create-react-app/issues/2232#issuecomment-302675690

[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 [email protected] requires a peer of webpack@^2.2.0 but none was installed.
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.

[email protected] /Users/joe/Desktop/temp/create-react-app-v1-upgrade
└─┬ @kadira/[email protected]
  └── [email protected] 

Yarn:

[email protected] /Users/joe/Desktop/temp/create-react-app-v1-upgrade
├─┬ @kadira/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]  extraneous
│ └── [email protected] 
└─┬ [email protected]
  └── [email protected] 

[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

> [email protected] 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! [email protected] 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.

[gaearon]

Probably the best thing to do would be to create a very isolated test (e.g. a package listing those two as deps) that reproduces the issue, and then file issues both with npm and Yarn.

[phillipj]

Sounds like a good idea 👍

@hoest thanks, removing storybook from my test project seemed to fix the issue.

[phillipj]

FYI for other storybook users, upgrading to webpack v2 seems to be just around the corner in the upcoming v3 release: https://github.com/storybooks/storybook/pull/1047/files#diff-4ac32a78649ca5bdd8e0ba38b7006a1eR5

[DrewDennison]

I can confirm removing storybook fixed the issue for me. Thanks everyone!

[gaearon]

I have hidden the Storybook integration from the docs for now: https://github.com/facebookincubator/create-react-app/pull/2252.
And have filed an issue against Storybook: https://github.com/storybooks/storybook/issues/1073.

I don't think there's anything actionable for us in this issue, but please file bugs with npm and Yarn if you see them not respecting dependency trees.

[maximeg]

For those encountering this issue, running yarn upgrade after running yarn add --dev --exact [email protected] solved the issue without removing storybook.

[mindjuice]

@maximeg's fix worked for me, but I was already on a version of react-scripts-ts based on [email protected], so I only needed to do yarn upgrade.