React-popper: requiring popper.js throws CaseSensitivePathsPlugin

[websitesca]

I don't think this is a bug, but I wanted to post here because it might help someone. I was trying to use reactstrap, but I also had my env var NODE_PATH=.

This caused a weird problem with react-popper where an exception CaseSensitivePathsPlugin would be thrown because popper.js appears on the filepath in node_modules as an actual file and ALSO as the actual node_modules dependency.

I removed NODE_PATH=. from my environment (which I guess is a bad idea, but I've been using that for a while just to have nicer include paths) and the problem went away.

[supergibbs]

Is this on Windows? Might be related to #95

[giladgray]

something weird is going on in the published lib/ directory. i see the following files:

$ ls node_modules/react-popper/lib
Arrow.js          [Popper.js]        [PopperComponent.js] Target.js
Manager.js         PopperArrow.js     PopperManager.js    react-popper.js

(brackets added for emphasis.) There's a file called Popper.js that _I think_ is the root cause of this issue. but there's also this PopperComponent.js file. I can't figure out why there seem to be two files for the <Popper> component.

perhaps removing Popper.js will resolve this issue?

[FezVrasta]

May you let me know if you get the same problem with react-popper@next please?

[nkohari]

This does seem to still be happening on react-popper@next. I am using the following versions:

$ yarn list --pattern popper
yarn list v1.5.1
├─ [email protected]
└─ [email protected]

(Please see https://github.com/palantir/blueprint/issues/2299 for more info on my particular use case and error.)

[nkohari]

Commenting here in case anyone runs into this problem and wants a workaround! The trouble seems to be caused by a collision between the library named popper.js and the file named Popper.js in react-popper. The only reason this was an issue is because my Webpack config included . in modules, like:

resolve: {
  alias: {
    react: path.resolve(__dirname, '../node_modules/react')
  },
  extensions: ['.js', '.jsx', '.ts', '.tsx']
  modules: [
    'node_modules',
    '.'
  ]
}

Using alias instead with an absolute path works fine, and is also probably more correct than the other solution. 😄

resolve: {
  alias: {
    react: path.resolve(__dirname, '../node_modules/react'),
    src: path.resolve(__dirname, '../src')
  },
  extensions: ['.js', '.jsx', '.ts', '.tsx']
}