Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot start when installed using yarn pnp, improvement to webpack config needed #6905

Closed
crubier opened this issue May 29, 2019 · 11 comments
Closed

Comments

@crubier
Copy link
Contributor

crubier commented May 29, 2019

Describe the bug

When running storybook in a package installed using yarn pnp, storybook does not start.

This is caused by the webpack config not using https://github.com/arcanis/pnp-webpack-plugin

To Reproduce
Steps to reproduce the behavior:

  1. Take a valid storybook project
  2. Enable yarn pnp on the project by adding this to package.json:
"installConfig": {
    "pnp": true
  }, 
  1. Run yarn add @storybook/channels @emotion/core @emotion/styled emotion-theming to kind of fix this first bug Trying to require the package "@emotion/core" without it being listed in its dependencies #6899
  2. storybook start

Expected behavior

Storybook works, loading modules using pnp-webpack-plugin

Screenshots

$ start-storybook -p 6006
info @storybook/react v5.0.11
info 
info => Loading presets
info => Loading presets
info => Loading custom webpack config (full-control mode).
info => Using base config because react-scripts is not installed.
 55% building 378/380 modules 2 active .../scheduler/cjs/scheduler.development.js 

WARN force closed preview build


WARN FATAL broken build!, will close the process,
WARN Fix the error below and restart storybook.

ModuleNotFoundError: Module not found: Error: Can't resolve '@emotion/cache' in '/Users/vincent/Library/Caches/Yarn/v4/npm-@emotion-core-10.0.10-8d3114e5a2f8b178a7067c603a2937516f180b08/node_modules/@emotion/core/dist'
    at factory.create (/Users/vincent/Library/Caches/Yarn/v4/npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8/node_modules/webpack/lib/Compilation.js:823:10)
    at factory (/Users/vincent/Library/Caches/Yarn/v4/npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/vincent/Library/Caches/Yarn/v4/npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/vincent/Library/Caches/Yarn/v4/npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/vincent/Library/Caches/Yarn/v4/npm-neo-async-2.6.0-b9d15e4d71c6762908654b5183ed38b753340835/node_modules/neo-async/async.js:2825:7
    at /Users/vincent/Library/Caches/Yarn/v4/npm-neo-async-2.6.0-b9d15e4d71c6762908654b5183ed38b753340835/node_modules/neo-async/async.js:6886:13

...


...

Literally 10 000 lines of similar errors
...


...

ModuleNotFoundError: Module not found: Error: Can't resolve 'util-deprecate' in '/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/dist/core'
    at factory.create (/Users/vincent/Library/Caches/Yarn/v4/npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8/node_modules/webpack/lib/Compilation.js:823:10)
    at factory (/Users/vincent/Library/Caches/Yarn/v4/npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/vincent/Library/Caches/Yarn/v4/npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/vincent/Library/Caches/Yarn/v4/npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/vincent/Library/Caches/Yarn/v4/npm-neo-async-2.6.0-b9d15e4d71c6762908654b5183ed38b753340835/node_modules/neo-async/async.js:2825:7
    at /Users/vincent/Library/Caches/Yarn/v4/npm-neo-async-2.6.0-b9d15e4d71c6762908654b5183ed38b753340835/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/Users/vincent/Library/Caches/Yarn/v4/npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/vincent/Library/Caches/Yarn/v4/npm-enhanced-resolve-4.1.0-41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/Users/vincent/Library/Caches/Yarn/v4/npm-enhanced-resolve-4.1.0-41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/vincent/Library/Caches/Yarn/v4/npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (/Users/vincent/Library/Caches/Yarn/v4/npm-enhanced-resolve-4.1.0-41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/Users/vincent/Library/Caches/Yarn/v4/npm-enhanced-resolve-4.1.0-41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/vincent/Library/Caches/Yarn/v4/npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/Users/vincent/Library/Caches/Yarn/v4/npm-enhanced-resolve-4.1.0-41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/vincent/Library/Caches/Yarn/v4/npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/Users/vincent/Library/Caches/Yarn/v4/npm-enhanced-resolve-4.1.0-41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
    at hook.callAsync (/Users/vincent/Library/Caches/Yarn/v4/npm-enhanced-resolve-4.1.0-41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn42 (eval at create (/Users/vincent/Library/Caches/Yarn/v4/npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:28:1)
    at resolver.doResolve (/Users/vincent/Library/Caches/Yarn/v4/npm-enhanced-resolve-4.1.0-41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:23:37)
    at hook.callAsync (/Users/vincent/Library/Caches/Yarn/v4/npm-enhanced-resolve-4.1.0-41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/vincent/Library/Caches/Yarn/v4/npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/Users/vincent/Library/Caches/Yarn/v4/npm-enhanced-resolve-4.1.0-41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
resolve 'util-deprecate' in '/Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/dist/core'
  Parsed request is a module
  using description file: /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/package.json (relative path: ./dist/core)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/dist/core/node_modules doesn't exist or is not a directory
      /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/dist/node_modules doesn't exist or is not a directory
      /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/ui/node_modules doesn't exist or is not a directory
      /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/@storybook/node_modules doesn't exist or is not a directory
      /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/node_modules doesn't exist or is not a directory
      /Users/vincent/Library/Caches/Yarn/v4/node_modules doesn't exist or is not a directory
      /Users/vincent/Library/Caches/Yarn/node_modules doesn't exist or is not a directory
      /Users/vincent/Library/Caches/node_modules doesn't exist or is not a directory
      /Users/vincent/Library/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/vincent/node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
      looking for modules in /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /Users/vincent/node_modules/util-deprecate doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          /Users/vincent/node_modules/util-deprecate.mjs doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /Users/vincent/node_modules/util-deprecate.js doesn't exist
        .jsx
          Field 'browser' doesn't contain a valid alias configuration
          /Users/vincent/node_modules/util-deprecate.jsx doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /Users/vincent/node_modules/util-deprecate.json doesn't exist
        as directory
          /Users/vincent/node_modules/util-deprecate doesn't exist
          /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/util-deprecate doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/util-deprecate.mjs doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/util-deprecate.js doesn't exist
        .jsx
          Field 'browser' doesn't contain a valid alias configuration
          /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/util-deprecate.jsx doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
          /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/util-deprecate.json doesn't exist
        as directory
          /Users/vincent/Library/Caches/Yarn/v4/npm-@storybook-ui-5.0.11-207f767d96e40513bb3887b428a4d9a81d027051/node_modules/util-deprecate doesn't exist
  Error: Child compilation failed:
  Module build failed (from /Users/vincent/Library/Caches/Yarn/v4/npm-html-webpack-plugin-4.0.0-beta.5-2c53083c1151bfec20479b1f8aaf0039e77b5513/node_modules/html-webpack-plugin/lib/loader.js):
  Error: Cannot find module 'lodash'
  
  - loader.js:582 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:582:15
  
  - .pnp.js:23000 Function.Module._resolveFilename
    /Users/vincent/Code/cloud/.pnp.js:23000:44
  
  - .pnp.js:22605 callNativeResolution
    /Users/vincent/Code/cloud/.pnp.js:22605:19
  
  - .pnp.js:22722 Object.resolveToUnqualified
    /Users/vincent/Code/cloud/.pnp.js:22722:22
  
  - .pnp.js:22852 Object.resolveRequest
    /Users/vincent/Code/cloud/.pnp.js:22852:31
  
  - .pnp.js:23034 Function.Module._resolveFilename
    /Users/vincent/Code/cloud/.pnp.js:23034:30
  
  - .pnp.js:22950 Function.Module._load
    /Users/vincent/Code/cloud/.pnp.js:22950:31
  
  - loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17
  
  - helpers.js:22 require
    internal/modules/cjs/helpers.js:22:18
  
  - loader.js:4 Object.<anonymous>
    [npm-html-webpack-plugin-4.0.0-beta.5-2c53083c1151bfec20479b1f8aaf0039e77b5513]/[html-webpack-plugin]/lib/loader.js:4:11
  
  - loader.js:701 Module._compile
    internal/modules/cjs/loader.js:701:30
  
  - loader.js:712 Object.Module._extensions..js
    internal/modules/cjs/loader.js:712:10
  
  - loader.js:600 Module.load
    internal/modules/cjs/loader.js:600:32
  
  - .pnp.js:22977 Function.Module._load
    /Users/vincent/Code/cloud/.pnp.js:22977:14
  
  - loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17
  
  - helpers.js:22 require
    internal/modules/cjs/helpers.js:22:18
  
  - loadLoader.js:18 loadLoader
    [npm-loader-runner-2.4.0-ed47066bfe534d7e84c4c7b9998c2a75607d9357]/[loader-runner]/lib/loadLoader.js:18:17
  
  - LoaderRunner.js:169 iteratePitchingLoaders
    [npm-loader-runner-2.4.0-ed47066bfe534d7e84c4c7b9998c2a75607d9357]/[loader-runner]/lib/LoaderRunner.js:169:2
  
  - LoaderRunner.js:365 runLoaders
    [npm-loader-runner-2.4.0-ed47066bfe534d7e84c4c7b9998c2a75607d9357]/[loader-runner]/lib/LoaderRunner.js:365:2
  
  - NormalModule.js:281 NormalModule.doBuild
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/NormalModule.js:281:3
  
  - NormalModule.js:428 NormalModule.build
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/NormalModule.js:428:15
  
  
  - Error: Cannot find module 'lodash'
  
  - compiler.js:141 childCompiler.runAsChild
    [pnp-f847ef5cf0db997ef85bf1aa67f6baa042d67156]/[html-webpack-plugin]/lib/compiler.js:141:18
  
  - Compiler.js:306 compile
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/Compiler.js:306:11
  
  - Compiler.js:631 hooks.afterCompile.callAsync.err
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/Compiler.js:631:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:628 compilation.seal.err
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/Compiler.js:628:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1329 hooks.optimizeAssets.callAsync.err
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/Compilation.js:1329:35
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1320 hooks.optimizeChunkAssets.callAsync.err
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/Compilation.js:1320:32
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1315 hooks.additionalAssets.callAsync.err
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/Compilation.js:1315:36
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1311 hooks.optimizeTree.callAsync.err
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/Compilation.js:1311:32
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [npm-tapable-1.1.3-a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1248 Compilation.seal
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/Compilation.js:1248:27
  
  - Compiler.js:625 compilation.finish.err
    [npm-webpack-4.32.2-3639375364a617e84b914ddb2c770aed511e5bc8]/[webpack]/lib/Compiler.js:625:18
  

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Code snippets
If applicable, add code samples to help explain your problem.

System:

  • OS: MacOS
  • Device: Macbook Pro 2018
  • Framework: react
  • Version: 5.0.11

Additional context

Running with yarn pnp

See also this issue #6899

@crubier
Copy link
Contributor Author

crubier commented May 29, 2019

I have been trying to fix the Webpack config manually for 24 hours now, without success

@crubier
Copy link
Contributor Author

crubier commented May 29, 2019

Some pointers on the related issue here #6899 (comment)

@crubier
Copy link
Contributor Author

crubier commented May 29, 2019

@stale
Copy link

stale bot commented Jun 19, 2019

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale stale bot added the inactive label Jun 19, 2019
@shilman shilman removed the inactive label Jun 19, 2019
@TroySchmidt
Copy link

TroySchmidt commented Jun 20, 2019

Module not found: Error: Can't resolve '@storybook/addon-knobs/register' in C:\Source\project\.storybook. When it tries to resolve, it goes back up the folder tree looking for node_modules but that folder is sitting right beside the .storybook folder. I have a project I created in CRA and then ejected. .storybook, node_modules, and src folder with the code are all at the same level in the project folder.

@ndelangen
Copy link
Member

@TroySchmidt got a project you could share?

AFAIK the node resolve algorithm should be able to find @storybook/addon-knobs in the case you describe given it's actually installed.

from node perspective there's no difference between src and .storybook. Node will (recursively) look up, and for sibling folders called node_modules, and try to resolve from there.

Are you sure you installed the module?

@TroySchmidt
Copy link

I resolved this by blowing away node_modules and going back to 5.1.8. 5.1.9 and the alphas don't work.

@TroySchmidt
Copy link

Now I do have a custom baseUrl set in tsconfig.json. Without having the .env file having the NODE_PATH set how do you configure that in storybook?

@shilman
Copy link
Member

shilman commented Jun 20, 2019

@TroySchmidt what do you mean "don't work"?

@stale
Copy link

stale bot commented Jul 11, 2019

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale stale bot added the inactive label Jul 11, 2019
@stale
Copy link

stale bot commented Aug 10, 2019

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants