Material-ui: Cannot find module "react-popper" on alternate compilations during watch mode when using typescript and node 10

[insidewhy]

Similar to this bug: https://github.com/mui-org/material-ui/issues/11197

Only the issue happens with react-popper 0.10.4, and material-ui versions beta-41 through the latest (beta-45).

When I'm using react-scripts start via yarn start the error in the title shows up on every other recompilation. I change a file, I get the error. I change another file, I don't get the error. I change a file, I get the error. Forever.

The problem manifests when using node 10 but not node 9. I tried yarn 2.5 and yarn 2.6 but the problem is the same. Not sure about npm.

| Tech | Version |
|--------------|---------|
| Material-UI | beta-41 through beta-45 |
| React | 16.3.2 |
| yarn | 1.6 |
| react-popper | 0.10.4 |
| node | 10.0.0 |

[oliviertassinari]

Do you have a reproduction example?

[insidewhy]

create-react-app --scripts-version=react-scripts-ts dummy
cd dummy
yarn install material-ui@next
vim src/App.tsx
# add material-ui import to App.tsx
# see error message
# make another change to App.tsx
# everything works fine
# make another change to App.tsx
# see error message
# make another change to App.tsx
# everything works fine
# make another change to App.tsx
# see error message
# etc. forever

[insidewhy]

I found the issue, react-popper should be a peer dependency of material-ui since Tooltip.d.ts imports and exposes the interface of react-popper.

[insidewhy]

I updated the description and the reproduction for typescript as this only seems to affect typescript projects.

[oliviertassinari]

I have tried our TypeScript example with node v10.0.0. I have no issue. Can you try that out? https://github.com/mui-org/material-ui/tree/v1-beta/examples/create-react-app-with-typescript

[arjanfrans]

I am using react-scripts-ts and have the same problem. It is not always react-popper, sometimes it can not find indefinite-observable.

[oliviertassinari]

@arjanfrans Thanks for the feedback :)

[arjanfrans]

@oliviertassinari No problem. Why did you close the issue?

[oliviertassinari]

@arjanfrans It confirms that that issue isn't coming from Material-UI, indefinite-observable isn't a dependency of the project.

[liangchunn]

I have this issue as well with react-scripts-ts. Same behavior with material-ui b44 :/

[congqiao]

I have the same issue with Material-UI 1.0.0 and react-scripts-ts. Unfortunately https://github.com/mui-org/material-ui/tree/v1.0.0/examples/create-react-app-with-typescript is broken by itself so I can't try it.

[tashburn]

If it helps to debug this issue, I created a sample repo with the problem in this issue.

If not material-ui, who (or what project) should be pinged to address this issue?

[mbrookes]

None, unless you have a paid support contract! 😆 (But the beauty of open source is you get to find and fix bugs, which in turn helps others.)

[congqiao]

@go2ready 's workaround of removing import * as React from 'react'; doesn't work for me. However this only occurs at odd numbers, which means if you immediately save again it will work. You may have to force your editor to write to disk if you don't make any change.

[insidewhy]

You have to remove everything that depends on typings (even unused symbol detection) from your tslint and it should go away.

[tashburn]

@ohjames Thanks for the idea, but I don't use tslint and I still have a similar problem.

[antikh]

Seems not material-ui problem, but popper itself. Has the same behaviour when using only popper package and CRA with custom tslint rules. Removing "no-unused-variable": [true, "react"], rule from tslint .json solves the problem.

[nonameolsson]

I encountered the same issue :S Strange.. I haven't been able to solve it using @go2ready's solution.

[wfortin]

Getting the same error on a fresh project using CRA Typescript https://github.com/wmonk/create-react-app-typescript, happens when the compiler watch recompiles.

[tashburn]

I believe I had the same error. I was using absolute import paths and had NODE_PATH=. in front my package scripts. Changing to NODE_PATH=$(pwd) fixed it for me. This is just a workaround, though, not a long term substitute for fixing this issue.

[jmarceli]

I can confirm that removing "no-unused-variable": true from tslint.json is working as a workaround and adding this rule back causes this issue. Still, it would be nice to have this issue fixed properly.

[JonasGrunau]

Same issue :/ @jmarceli's workaround worked though.

[insidewhy]

It's a bit of a shame as we used to have lint rules in our project that automatically removed all unused imports, but they rely on the option you have to remove to get this to work. Does anyone have any idea where the blame is here? i.e. does react-popper work outside of this project?

[liangchunn]

@ohjames
As an alternative to no-unused-variable in tslint.json, you could use "noUnusedLocals": true in tsconfig.json.

The only difference now is that unused variables and imports will now fail the build rather than warn as a linting issue.

[insidewhy]

@liangchunn I know but that won't let me --fix the unused imports automatically.

[liangchunn]

@ohjames In that case, you might want to use a pre-commit hook that lints your project with an extended version of tslint.json like this:

{
    "extends": "./tslint.json",
    "rules": {
        "no-unused-variables": true
    }
}

This would still fail the build during compile time, but at least unused imports that hasn't gone though the build will be automatically fixed before being pushed upstream.

[andrew-c-tran]

ok, so on a new CRA project this has been biting me in the ass as well. it's constantly "indefinite-observable".

@oliviertassinari stated that indefinite-observable isn't a MUI dependency which is correct, and thus the issue is not related, but i've traced it back to being a dependency of JSS, which is a direct dependency of MUI.

So, long story short, a direct dependency of MUI has a dependency on indefinite-observable, so ergo importing material-ui into a create-react-app-typescript project causes this failure.

I'm off to try and see what the hell is going on and bring the issue up in the JSS issue tracker.

EDIT: removed incorrect info; version numbers were different.

EDIT2: chased this further to a TSLint bug. will proceed to investigate and discuss there. suggest leaving this comment here as a breadcrumb as this is the page that shows up when googling the problem.

EDIT2: super, super edit. the root cause of this issue stems from use of the rule no-unused-variable in your ruleset in an application running TSLint 2.9 or newer. Either remove this rule from your tslint rules (including air-bnb ruleset) or downgrade to an older TSLint. sorry for spamming up this issue with something that's not technically MUI @oliviertassinari , but again I think it'd be helpful to leave this here for visibility as MUI may be the route people find this bug.