Multiple modules with names that only differ in casing in Popper module. #14711

mlyngvo · 2019-03-01T15:45:22Z

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 #14711 (comment)

The text was updated successfully, but these errors were encountered:

oliviertassinari · 2019-03-02T18:29:51Z

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

mlyngvo · 2019-03-05T14:45:19Z

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

hatton · 2019-05-18T16:46:13Z

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 · 2019-05-18T16:50:59Z

@hatton How can we reproduce it?

hatton · 2019-05-18T17:19:08Z

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 · 2019-05-18T18:37:27Z

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

hatton · 2019-05-18T20:02:56Z

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

mayacode · 2019-05-26T06:52:10Z

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.

This should fix this one: mui#14711

mationai · 2019-11-08T21:06:26Z

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 · 2020-01-09T10:56:55Z

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

mlyngvo · 2020-01-09T11:08:30Z

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 · 2020-04-26T17:43:12Z

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 · 2020-04-28T13:43:00Z

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

radoslavkarlik · 2021-03-17T13:13:27Z

The solution provided by @iohl works but you might need to specify a different separator. This worked for me.
test: /node_modules\\@material-ui\\core\\esm\\Popper\\Popper\.js$/
instead of test: /node_modules\/@material-ui\/core\/esm\/Popper\/Popper\.js$/

anudeepb28 · 2021-07-07T14:24:55Z

Still relevant in 2021..
I faced the same issue but in version 4.11.x of @material-ui/core, the import name is PopperJs instead of PopperJS. So following worked for me:

options: {
      search: 'import PopperJs from \'popper.js\';',
      replace: 'import PopperJs from "../../../../popper.js/dist/esm/popper";'
}

poojaSingh18 · 2021-08-19T11:44:18Z

Hello, I am also facing this in 4.12.3. Any idea when permanent fix will be provided ?

oliviertassinari · 2021-08-19T12:59:16Z

@poojaSingh18 It should already be fixed in v5.

oliviertassinari added waiting for user information status: waiting for author Issue with insufficient information labels Mar 2, 2019

oliviertassinari closed this as completed Mar 3, 2019

hally9k added a commit to hally9k/material-ui that referenced this issue Jun 17, 2019

Fix casing error on Popper.js import.

626daca

This should fix this one: mui#14711

hally9k mentioned this issue Jun 17, 2019

[Popper] Fix casing error on Popper.js import. #16269

Closed

oliviertassinari removed the need more information label Jan 4, 2020

oliviertassinari added component: Popper The React component. See <Popup> for the latest version. v4.x labels Aug 19, 2021

mui locked as resolved and limited conversation to collaborators Aug 19, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multiple modules with names that only differ in casing in Popper module. #14711

Multiple modules with names that only differ in casing in Popper module. #14711

mlyngvo commented Mar 1, 2019 •

edited

Loading

oliviertassinari commented Mar 2, 2019 •

edited

Loading

mlyngvo commented Mar 5, 2019 •

edited

Loading

hatton commented May 18, 2019

oliviertassinari commented May 18, 2019

hatton commented May 18, 2019

joshwooding commented May 18, 2019 •

edited

Loading

hatton commented May 18, 2019 •

edited

Loading

mayacode commented May 26, 2019

mationai commented Nov 8, 2019 •

edited

Loading

OssiPesonen commented Jan 9, 2020 •

edited

Loading

mlyngvo commented Jan 9, 2020 •

edited

Loading

inspiraller commented Apr 26, 2020

Narutuffy commented Apr 28, 2020

radoslavkarlik commented Mar 17, 2021

anudeepb28 commented Jul 7, 2021

poojaSingh18 commented Aug 19, 2021

oliviertassinari commented Aug 19, 2021

Multiple modules with names that only differ in casing in Popper module. #14711

Multiple modules with names that only differ in casing in Popper module. #14711

Comments

mlyngvo commented Mar 1, 2019 • edited Loading

Solution

oliviertassinari commented Mar 2, 2019 • edited Loading

mlyngvo commented Mar 5, 2019 • edited Loading

hatton commented May 18, 2019

oliviertassinari commented May 18, 2019

hatton commented May 18, 2019

joshwooding commented May 18, 2019 • edited Loading

hatton commented May 18, 2019 • edited Loading

mayacode commented May 26, 2019

mationai commented Nov 8, 2019 • edited Loading

OssiPesonen commented Jan 9, 2020 • edited Loading

mlyngvo commented Jan 9, 2020 • edited Loading

inspiraller commented Apr 26, 2020

Narutuffy commented Apr 28, 2020

radoslavkarlik commented Mar 17, 2021

anudeepb28 commented Jul 7, 2021

poojaSingh18 commented Aug 19, 2021

oliviertassinari commented Aug 19, 2021

mlyngvo commented Mar 1, 2019 •

edited

Loading

oliviertassinari commented Mar 2, 2019 •

edited

Loading

mlyngvo commented Mar 5, 2019 •

edited

Loading

joshwooding commented May 18, 2019 •

edited

Loading

hatton commented May 18, 2019 •

edited

Loading

mationai commented Nov 8, 2019 •

edited

Loading

OssiPesonen commented Jan 9, 2020 •

edited

Loading

mlyngvo commented Jan 9, 2020 •

edited

Loading