Material-ui: Multiple modules with names that only differ in casing in Popper module.

[IoHL]

In material-ui/Popper.js, maybe considering using a different approach on importing the popper.js to Popper component. My webpack compiler reports it as follow:

WARNING in ./node_modules/@material-ui/core/Popper/Popper.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/iohl/Documents/Workspace/Public/VARIOLOGIC/sysops_pool/node_modules/@material-ui/core/Popper/Popper.js
    Used by 1 module(s), i. e.
    /Users/iohl/Documents/Workspace/Public/VARIOLOGIC/sysops_pool/node_modules/@material-ui/core/Popper/index.js
* /Users/iohl/Documents/Workspace/Public/VARIOLOGIC/sysops_pool/node_modules/@material-ui/core/Popper/popper.js
    Used by 2 module(s), i. e.
    /Users/iohl/Documents/Workspace/Public/VARIOLOGIC/sysops_pool/node_modules/@material-ui/core/Popper/Popper.js
...

Solution

A temporally fix for this issue is to use either an absolute or relative path that point directly to popper.js file when require the library.

See https://github.com/mui-org/material-ui/issues/14711#issuecomment-572513060

[oliviertassinari]

@IoHL What version of Material-UI are you using? The unpkg archive looks clean: https://unpkg.com/@material-ui/core@3.9.2/Popper/. Any idea how we can reproduce the problem?

[IoHL]

I think it's a duplicate of #11281. So we can close this issue.

[hatton]

I am having this problem with@material-ui/core": "^4.0.0-beta.2" and webpack 4.31.0.

WARNING in ./node_modules/@material-ui/core/esm/Popper/Popper.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\dev\b46\src\BloomBrowserUI\node_modules\@material-ui\core\esm\Popper\Popper.js
    Used by 2 module(s), i. e.
    C:\dev\b46\src\BloomBrowserUI\node_modules\@material-ui\core\esm\Popper\index.js
* C:\dev\b46\src\BloomBrowserUI\node_modules\@material-ui\core\esm\Popper\popper.js
    Used by 4 module(s), i. e.
    C:\dev\b46\src\BloomBrowserUI\node_modules\@material-ui\core\esm\Popper\Popper.js

[oliviertassinari]

@hatton How can we reproduce it?

[hatton]

Olivier thanks for looking into this.

How can we reproduce it?

Well, if it is somehow related to having a large-ish bundle sizes as IoHL seemed to imply, you could build the project I'm working on. I have tested this only on windows, but with both Cmd and Bash shells.

git clone -b newPublishScreens https://github.com/hatton/BloomDesktop.git cd BloomDesktop/src/BloomBrowserUI
(requires node 10.15.3)
yarn yarn webpack

[joshwooding]

I can't reproduce it on PowerShell or GitBash. (Windows 10)

[hatton]

Edit: Sorry, getting sloppy... I need to come back to this next week.

[mayacode]

I have exactly the same.

WARNING in ./node_modules/@material-ui/core/Popper/Popper.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* node_modules/@material-ui/core/Popper/Popper.js
    Used by 1 module(s), i. e.
    node_modules/@material-ui/core/Popper/index.js
* node_modules/@material-ui/core/Popper/popper.js
    Used by 2 module(s), i. e.
    node_modules/@material-ui/core/Popper/Popper.js

The problem exists on OSes for which file names are case insensitive like macos.

[fuzzthink]

Still seeing the issue after rm -rf node_modules/@material-ui/core and npm i @material-ui/[email protected] :

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /path/node_modules/@material-ui/core/esm/Popper/Popper.js
    Used by 2 module(s), i. e.
    /path/node_modules/@material-ui/core/esm/Popper/index.js
* /path/node_modules/@material-ui/core/esm/Popper/popper.js
    Used by 4 module(s), i. e.
    /path/node_modules/@material-ui/core/esm/Popper/Popper.js

OS: mac

[OssiPesonen]

What I basically did wa,s we have create-react-app where we've exported the configuration.

I installed:

• Storybook
• Material UI
• Styled components

I attempted to get Material UI working on Storybook with multiple themes, and a theme provider with a dynamic switcher, according to this article: https://medium.com/encode/setting-up-storybook-with-material-ui-and-styled-components-5bdacb6db866

I cannot get the storybook stories to print. It's a separate issues. But if I install react-scripts(which we don't have in our project) I suddenly get this error and it prevents me from building the code.

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'.
 @ ./node_modules/@material-ui/core/esm/Popper/Popper.js 5:0-33 128:21-29
 @ ./node_modules/@material-ui/core/esm/Popper/index.js
 @ ./node_modules/@material-ui/core/esm/Tooltip/Tooltip.js
 @ ./node_modules/@material-ui/core/esm/Tooltip/index.js
 @ ./node_modules/@material-ui/core/esm/index.js
 @ ./src/stories/Welcome.stories.js
 @ ./src/stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

[IoHL]

For those who still has this issue, what i did back then as a work around and still work until now in my project was simply replace the source code import line of popper.js with absolute path to the library file.

I use webpack and here's the config:

return {
   ...,
   module: {
        rules: [
            {
                test: /node_modules\/@material-ui\/core\/esm\/Popper\/Popper\.js$/,
                use: {
                    loader: 'string-replace-loader',
                    options: {
                        search: 'import PopperJS from \'popper.js\';',
                        replace: 'import PopperJS from "../../../../popper.js/dist/esm/popper";'
                    }
                }
            }
        ]
    },
    ...
}

I believe this is, as @mayacode mentioned, an OSes problem so do what you must to get material-ui library on your machine to find and load correctly this popper.js library in order for your code to be built successfully.

[inspiraller]

hi
I've tried your solution above by implementing this on the storybook.main.js to override webpack as below

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
  webpackFinal: async (config, {configType}) => {
    config.module.rules.push({
       test: /node_modules\/@material-ui\/core\/esm\/Popper\/Popper\.js$/,
       use: {
           loader: 'string-replace-loader',
           options: {
               search: 'import PopperJS from \'popper.js\';',
               replace: 'import PopperJS from "../../../../popper.js/dist/esm/popper";'
           }
       }
    });
    return config;
  }
};

Unfortunately this does nothing and I still get the same error using Material-Table

[Narutuffy]

Hey guys just commenting to let you know that, I'm still facing this issue