storybook bundling error

[HosseinAlipour]

Describe the bug
After upgrading material-ui "4.7.1" a few days ago, I can't run storybook anymore.
this is the error given when bundling:

ERROR in ./node_modules/@material-ui/core/esm/Popper/Popper.js
Module not found: Error: Cannot find file: 'popper.js' does not match the corresponding name on disk: './node_modules/@material-ui/core/esm/Popper/Popper.js'.

in the file ./node_modules/@material-ui/core/esm/Popper/Popper.js it's importing like this:
import PopperJS from 'popper.js';
I think storybook thinks it's a file whereas popper.js is a dependency package for material-ui

[vk2r]

Same here !

[vasilii-kovalev]

The same issue for Reactstrap.
@storybook/react version: 5.2.6
reactstrap version: 8.2.0

[shilman]

Any Webpack gurus know what's going on here? @ndelangen @mrmckeb @Hypnosphi

[Hypnosphi]

Can you please create a GitHub repo with minimal reproduction of your issue?

[vasilii-kovalev]

@Hypnosphi, @shilman, hi! I had time to create a repository to reproduce my issue.
You can find it here.

I tried to install all necessary dependencies and reproduce the issue - everything works perfect. Then I added jsconfig.json to support absolute paths imports - it broke the Storybook build. But at the same time in development runtime the code works fine (if you'll run npm start).

[Tucker-Eric]

I was running into the same issue and I was able to fix this locally with adding the following to .storybook/webpack.config.js

module.exports = ({ config }) => {
  config.resolve.alias = {
    'popper.js$': 'popper.js/dist/esm/popper.js',
    ...config.resolve.alias
  };
  return config;
};

I think this may just be a windows issue due to case insensitivity where it's thinking poppper.js should resolve to Popper.js and the names don't match. I was receiving the error on windows but not on CentOS.

I hope this helps!

[mrmckeb]

@Tucker-Eric can you please raise that issue with Popper? That sounds like an issue that needs to be solved... others will definitely hit this one.

[Tucker-Eric]

Looking into this a little more, this actually looks like a storybook webpack config issue. I was able to get it working with:

module.exports = ({ config }) => {
  config.resolve.modules =  ['node_modules'];
  return config;
};

config.resolve.modules previously contained ['node_modules', './'] so when Popper.js was importing popper.js webpack was initially trying to resolve it in its current directory which was triggering CaseSensitivePaths Plugin error message and not falling back to node_modules which is where popper.js should be resolved from.

[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!

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.3 containing PR #9324 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.10 containing PR #9324 that references this issue. Upgrade today to try it out!

[barakplasma]

thanks @Tucker-Eric for https://github.com/storybookjs/storybook/issues/9077#issuecomment-570402934 , it was the only way for me to fix our Next.js 9.1.1 SSR builds after upgrading to Storybook 6.0.26