[Bug]: macos - Error: Cannot find module '.../node_modules/config/webpack.config'

unional commented 2 years ago

Describe the bug

Unable to start storybook in MacOS when using with rush and pnpm

Steps to reproduce the behavior

Repro:

https://github.com/cyberuni/storybook-preset-mac-os/tree/cmd

You need to install rush for the repro (npm i -g @microsoft/rush and corepack enable)

rush install
cd just-func/just-react
rushx storybook

Expected behavior

storybook starts

Screenshots and/or logs

info => Loading Webpack configuration from `node_modules`
info => Removing existing JavaScript and TypeScript rules.
ERR! Error: Cannot find module '.../node_modules/config/webpack.config'

Environment

OS: MacOS 11.6.5
Node.js version: 16.14.2

Additional context

The problem is caused by this code:

https://github.com/storybookjs/presets/blob/master/packages/preset-create-react-app/src/helpers/getReactScriptsPath.ts#L37-L39

      const resolvedBinPath = realpathSync(scriptsBinPath);
      const scriptsPath = join(resolvedBinPath, '..', '..');
      return scriptsPath;

scriptsBinPath is something like .../node_modules/.bin/react-scripts so going up two levels becomes .../node_modules

Changing it to join(resolvedBinPath, '..', '..', 'react-scripts') or removing that code will fix the issue.

The next block gets the correct path:

    const scriptsPath = dirname(require.resolve('react-scripts/package.json'));
    return scriptsPath;

What's the use case for that code? Can it be adjusted or removed?

unional commented 2 years ago

I can repro it with just pnpm

unional commented 2 years ago

carbon-intelligence commented 2 years ago

This works fine for me on WIndows but see the error above in a Linux VM and Bitbucket pipeline using Docker. The source of the issue is definitely that getReactScriptsPath utility file.

Asuka109 commented 2 years ago

I tried to modify the .storybook/main.js from:

module.exports = {
  addons: [
    '@storybook/preset-create-react-app'
  ]
};

to:

module.exports = {
  addons: [
    {
      name: '@storybook/preset-create-react-app'
      options: {
        scriptsPackageName: 'react-scripts'
      }
    }
  ]
};

And it is works for me.

ollwenjones commented 1 year ago

similar deal for me, where it works fine on windows, but not on mac. We have our own fork of react-scripts, but not storybook. ~~About to try @Asuka109 's fix~~. seems to have worked.

storybookjs / presets