Tooltip fails to work with Material UI / Typescript / Next / Custom Server

[tashburn]

Expected Behavior

Tooltips work.

Current Behavior

When trying to use the Material UI 1.0.0 Tooltip with Next and Typescript, and visit localhost:3000 with a browser, the following error happens in the console:

This dependency was not found:

* popper.js in ./node_modules/react-popper/lib/Popper.js

To install it, you can run: npm install --save popper.js

And the following error happens in the browser:

Error in ./Popper
Module not found: Error: [CaseSensitivePathsPlugin] `/Users/trent/home/projects/Grok/tmp/issue-tooltip/node_modules/react-popper/lib/popper.js` does not match the corresponding path on disk `Popper.js`.
ModuleNotFoundError: Module not found: Error: [CaseSensitivePathsPlugin] `/Users/trent/home/projects/Grok/tmp/issue-tooltip/node_modules/react-popper/lib/popper.js` does not match the corresponding path on disk `Popper.js`.
    at factoryCallback (/Users/trent/home/projects/Grok/tmp/issue-tooltip/node_modules/webpack/lib/Compilation.js:276:40)
    at factory (/Users/trent/home/projects/Grok/tmp/issue-tooltip/node_modules/webpack/lib/NormalModuleFactory.js:235:20)
    at applyPluginsAsyncWaterfall (/Users/trent/home/projects/Grok/tmp/issue-tooltip/node_modules/webpack/lib/NormalModuleFactory.js:70:21)
    at /Users/trent/home/projects/Grok/tmp/issue-tooltip/node_modules/tapable/lib/Tapable.js:265:18
    at that.fileExistsWithCase (/Users/trent/home/projects/Grok/tmp/issue-tooltip/node_modules/case-sensitive-paths-webpack-plugin/index.js:156:15)
    at that.getFilenamesInDir (/Users/trent/home/projects/Grok/tmp/issue-tooltip/node_modules/case-sensitive-paths-webpack-plugin/index.js:97:7)
    at fs.readdir (/Users/trent/home/projects/Grok/tmp/issue-tooltip/node_modules/case-sensitive-paths-webpack-plugin/index.js:63:5)
    at /Users/trent/home/projects/Grok/tmp/issue-tooltip/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
    at process._tickCallback (internal/process/next_tick.js:112:11)

If I try yarn add popper.js, the following warning is produced and the errors above remain --

warning Pattern ["[email protected]"] is trying to unpack in the same destination "/Users/trent/Library/Caches/Yarn/v1/npm-popper.js-1.14.3-1438f98d046acf7b4d78cd502bf418ac64d4f095" as pattern ["popper.js@^1.14.1"]. This could result in non-deterministic behavior, skipping.

Context

This is blocking my project.

Steps To Reproduce

1. git clone [email protected]:tashburn/issue-tooltip.git
2. cd issue-tooltip
3. yarn install
4. yarn dev
5. open localhost:3000 in browser

Environment

macOS (latest)
Chrome (latest)
custom server (express)
[email protected]
[email protected]
@material-ui/[email protected]

[oliviertassinari]

@tashburn I'm in the process of upgrading Material-UI to react-popper@1. Let's see if this fix the problem.

[tashburn]

@oliviertassinari Fabulous. If you let me know when it's out, I'll test it with my sample repo.

[oliviertassinari]

mui/material-ui#11862

[FezVrasta]

@oliviertassinari does this fix the OP problem?

[oliviertassinari]

I don't know.

[tashburn]

@FezVrasta I can check once the new material-ui version is obtainable via yarn.

[FezVrasta]

@tashburn any updates?

[oliviertassinari]

@tashburn I plan on revamping the tooltip implementation this weekend on Material-UI side. It's a mess right now. I will most likely use popper.js directly.

[FezVrasta]

I'd rather get help here to make react-popper work in your case, but it's up to you 😢

[tashburn]

@oliviertassinari Thanks for the update. I just checked to see if the new @material-ui/core version 1.3 fixed this tooltip issue I had with version 1.2 (same issue).

[oliviertassinari]

@FezVrasta Don't worry, the motivation for using popper.js directly is around the problems react popper solves. Digging into the react-popper implementation, I see an opportunity to make the Material-UI tooltip implementation simpler & more lightweight. It might not execute. I will see how that goes.

[FezVrasta]

I'm going to close this for inactivity, I suppose the problem has been fixed already. If not please reply here.