Storybook: CLI: Cannot find core-js when run with npx

[bodograumann]

Describe the bug
I am trying to change my stories from the storiesof-format to the new CSF. Unfortunately the migrator fails when importing a polyfill.

To Reproduce
Steps to reproduce the behavior:

1. Run npx -p @storybook/cli sb migrate storiesof-to-csf --glob "**/*.stories.js"
2. See error:

=> Applying storiesof-to-csf: 5 files    
Processing 5 files...                                                                                                                                                                        
Spawning 3 workers...                           
Sending 2 files to free worker...                                                                                                                                                            
Sending 2 files to free worker...    
Sending 1 files to free worker...
module.js:550
    throw err;
    ^       

Error: Cannot find module 'core-js/modules/web.dom.iterable'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)                                                                                                                                               
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/bodo/.npm/_npx/8647/lib64/node_modules/@storybook/cli/node_modules/@storybook/codemod/dist/transforms/storiesof-to-csf.js:3:1)                              
    at Module._compile (module.js:653:30)
    at Module._compile (/home/bodo/.local/lib64/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)                                                                             
    at Module._extensions..js (module.js:664:10)
    at Object.newLoader [as .js] (/home/bodo/.local/lib64/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)                                                                  
    at Module.load (module.js:566:32)

and 2 more of those errors.

Expected behavior
The stories should be transformed into CSF.

System:

$ npx -p @storybook/cli@next sb info
Environment Info:

  System:
    OS: Linux 4.19 Gentoo/Linux undefined
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 8.12.0 - /usr/bin/node
    Yarn: 1.17.3 - ~/.local/bin/yarn
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Firefox: 60.7.2
  npmPackages:
    @storybook/addon-actions: ^5.2.1 => 5.2.1 
    @storybook/addon-knobs: ^5.2.1 => 5.2.1 
    @storybook/addon-links: ^5.2.1 => 5.2.1 
    @storybook/addon-notes: ^5.2.1 => 5.2.1 
  npmGlobalPackages:
    @storybook/cli: 5.2.1

Additional context
This is a vue-cli@^3 project with vue-cli-plugin-storybook.

When using the global @storybook/cli instead of npx the result is the same error. When installing it locally, there are a lot more errors, probably because the project itself uses core-js@^2 still.

[shilman]

@ndelangen any core-js wisdom you can add here?

[w3nda]

For me this happens Cannot find module 'react', is there any progress on fixing this issue?

update
I tried running the codemod manually as described here https://github.com/storybookjs/storybook/tree/master/a/codemod#csf-to-mdx

Works like charm :)

./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/csf-to-mdxt.js **/*.story.js --ignore-pattern "node_modules|dist"

[chasemccoy]

Running the codemod with version 5.2.0 of the Storybook CLI solved this issue for me:

npx -p @storybook/[email protected] sb migrate storiesof-to-csf --glob "src/**/*.stories.js"

[leomelzer]

I can confirm this works with 5.2.0 but not 5.2.1 upwards (?).

I get the same error like mentioned in the issue but with react:

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'react'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.require (/Users/leomelzer/.npm/_npx/93514/lib/node_modules/@storybook/cli/node_modules/@storybook/router/dist/router.js:36:37)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Module._compile (/Users/leomelzer/.npm/_npx/93533/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Object.newLoader [as .js] (/Users/leomelzer/.npm/_npx/93533/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:653:32)

[renestalder]

Can confirm, I have the same issue as @leomelzer.

[stale[bot]]

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!

[GreenGremlin]

I'm getting this with @storybook/[email protected]

Error: Cannot find module 'core-js/modules/es6.string.starts-with'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/jonathanfelchlin/.asdf/installs/nodejs/10.15.3/.npm/lib/node_modules/@storybook/cli/node_modules/@storybook/codemod/dist/transforms/storiesof-to-csf.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Module._compile (/Users/jonathanfelchlin/.npm/_npx/31263/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Object.newLoader [as .js] (/Users/jonathanfelchlin/.npm/_npx/31263/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:600:32)

[GreenGremlin]

FYI, this happens for me wether I run cli from npx or install it globally.

[GreenGremlin]

Also, I wasn't able to get it to work either by calling jscodeshift directly or by downgrading @storybook/cli to v5.2.0.

This is the error I got when running jscodeshift directly:

Error: Cannot find module 'core-js/modules/es6.string.starts-with'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/jonathan/.npm/_npx/52384/lib/node_modules/@storybook/cli/node_modules/@storybook/codemod/dist/transforms/storiesof-to-csf.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Module._compile (/Users/jonathan/.npm/_npx/52541/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Object.newLoader [as .js] (/Users/jonathan/.npm/_npx/52541/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:600:32)
internal/modules/cjs/loader.js:584
    throw err;

[ndelangen]

This is so weird, the cli package depends on core-js itself.. why wouldn't it be available?
https://github.com/storybookjs/storybook/blob/next/lib/cli/package.json#L44

Might there be some deeper down dependency that has core-js v2 as a peerDependency or something?

[ndelangen]

So https://github.com/ariporad/pirates uses babel preset env for node 6, but doesn't which injects core-js dependencies into their dist, but they dont directly depend on core-js..

I'm not sure how to fix this on our end.

We use core-js v3. They seem to implicitly depend on core-js v2, which causes the error

[ndelangen]

I see 3 potential solutions:

1: They add core-js v2 as a dependency (seems most logical to me)
2: They add upgrade to core-js v3 (it would work but really they should depend on it, if they use it in their dist) PLUS, an upgrade would mean less packages to install for end -users.
3: We do some weird shenanigans to deal with the missing core-js v2 dependencies.

Regarding option 3: I've already made a webpack plugin that does this to the best of it's abilities, but it's a temp hot-fix, not meant to be kept around forever.

[ndelangen]

More investigating..

After an upgrade of many dependencies, I'm able to find just 1 reference to /core-js/modules/es6./ in the entire repo including node_modules:
node_modules/wait-on/lib/wait-on.js

But like a good citizen wait-on DOES depend on core-js.

I suspect this issue might be resolved in the latest version.

I just tried running:

npx -p @storybook/cli sb migrate storiesof-to-csf --glob "**/*.stories.js"

and it worked for me 🎉

I don't know what i can do to further resolve this.

If anyone experiences this problem with the latest version of the CLI, please re=open.

[bodograumann]

Yes, I just tried it again and it works fine.
Thanks for all the amazing work you are doing! :heart: