Module not found: Error: Can't resolve 'react-dom'

[UbiquitousBear]

I'm trying to use react plugins with preact, which should use preact/compat from core.

Reproduction

npm ls --depth 0 | grep preact ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected]

Steps to reproduce

"devDependencies": {
        "@types/dompurify": "0.0.33",
        "@types/jest": "^23.3.10",
        "@types/prismjs": "^1.16.0",
        "@types/webpack-env": "^1.13.9",
        "css-loader": "^1.0.1",
        "husky": "^1.2.0",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^23.6.0",
        "jest-preset-preact": "^1.0.0",
        "lint-staged": "^8.1.0",
        "per-env": "^1.0.2",
        "preact-cli": "^3.0.0-next.19",
        "prettier": "^1.15.3",
        "ts-jest": "^23.10.5",
        "ts-loader": "^3.5.0",
        "tslint": "^5.11.0",
        "tslint-config-prettier": "^1.17.0",
        "tslint-consistent-codestyle": "^1.14.1",
        "tslint-eslint-rules": "^5.4.0",
        "tslint-react": "^3.6.0",
        "typescript": "^3.2.1",
        "typings-for-css-modules-loader": "^1.7.0",
        "webpack": "^4.28.4"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.22",
        "@fortawesome/free-regular-svg-icons": "^5.10.2",
        "@fortawesome/free-solid-svg-icons": "^5.10.2",
        "@fortawesome/react-fontawesome": "^0.1.4",
        "@types/react": "^16.9.17",
        "bootstrap": "^4.3.1",
        "dompurify": "^1.0.11",
        "marked": "^0.7.0",
        "preact": "^10.2.1",
        "preact-render-to-string": "^5.0.6",
        "preact-router": "^3.0.1",
        "prismjs": "^1.17.1",
        "reactstrap": "^8.0.1"
    },
    "peerDependencies": {
        "prettier": ">1.0.0",
        "tslint": ">5.0.0"
    },

Run

npm run dev

Expected Behavior

No error when running

Actual Behavior

Build output throws loads of errors:

✖ ERROR ../node_modules/reactstrap/es/PopperContent.js
Module not found: Error: Can't resolve 'react-dom' in './node_modules/reactstrap/es'
 @ ../node_modules/reactstrap/es/PopperContent.js 8:0-33 182:73-81
 @ ../node_modules/reactstrap/es/index.js
 @ ./components/header/index.tsx
 @ ./components/app.tsx
 @ ./index.js
 @ ../node_modules/preact-cli/lib/lib/entry.js
 @ multi ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server

[JoviDeCroock]

I'm going to transfer this issue to preact-cli

[UbiquitousBear]

@JoviDeCroock any ideas or who I can prod for help?

[JoviDeCroock]

This issue will get picked up, didn't really find any time yet to look at it. Are you doing anything special in your project as in extending the config, .... Is this a fresh project? Details like those could help a lot since we're now going off of dependencies rather than how it's used.

Easy to reproduce issue are much quicker to solve.

[UbiquitousBear]

@JoviDeCroock would it help if I published the source code on GitHub for someone to peruse through?

I haven't extended the config, and the project isn't that new.

Apologies for the prod, I should have added that I'm looking to add information to help

[reznord]

@UbiquitousBear is it possible for you to give a github link for the repo? So, we can run it locally and see what the issue is?

[UbiquitousBear]

@reznord https://github.com/UbiquitousBear/personal-website here we go, master branch should be fine to run

[reznord]

great, I will look into it. :)

[UbiquitousBear]

I've resolved this in the mean time by adding these to my preact.config.js file:

 config.resolve.alias["react"] = "preact/compat";
 config.resolve.alias["react-dom"] = "preact/compat";
 config.resolve.alias["react-dom/test-utils"] = "preact/test-utils";

Would be great if I didn't have to do this though

[UbiquitousBear]

Actually, I've just broken half of the app... though it still builds fine...

[developit]

@UbiquitousBear did you try without the custom aliases? There are four in your configuration right now, all of which are already included in preact-cli by default.

[UbiquitousBear]

@UbiquitousBear did you try without the custom aliases? There are four in your configuration right now, all of which are already included in preact-cli by default.

Removing those aliases means it doesn't work?

[UbiquitousBear]

Output as requested:

website git:(master) ./node_modules/.bin/preact info

Environment Info:
  System:
    OS: macOS 10.15.4
    CPU: (24) x64 Intel(R) Xeon(R) W-3235 CPU @ 3.30GHz
  Binaries:
    Node: 13.2.0 - /usr/local/bin/node
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 72.0.2
    Safari: 13.1
  npmPackages:
    preact: ^10.3.4 => 10.3.4
    preact-cli: ^3.0.0-rc.10 => 3.0.0-rc.10
    preact-render-to-string: ^5.0.6 => 5.1.4
    preact-router: ^3.0.1 => 3.2.1
  npmGlobalPackages:
    preact-cli: 3.0.0-rc.10

[developit]

@UbiquitousBear Preact CLI includes aliases for preact/compat by default, and they are based on the version of preact your project has installed. You should never need to define them manually.

The test-utils alias is fine, I don't believe that one is something CLI ships by default.

[luhis]

i am having a very similar issue. as soon as I consume a third party react component, in my case rbx, i get module react cannot be found errors.

I can recreate this issue in the stock preact typescript template, by installing rbx and adding a Button component to a component.

Edit: I have tested rbx against the default (non typescript) template and it works fine.

[rahuljain840]

I am facing the same issue with react-slick. Here is the js fiddle i found https://jsfiddle.net/developit/mLodgqqL/

[developit]

We are rewriting the typescript template to make it more like the default one. For now, it's likely good to use the default template and then change file extensions to .ts. Preact-cli supports TS by default anyway.

[rahuljain840]

@developit Found the issue, its not with react-slick. We are using webpack-node-externals to exclude node_modules in server side bundling. Because of that react-dom alias are not working for node_modules.

[developit]

In general that's not something I'd recommend doing since it will break module resolution and interop in other ways.

If you just want a fix though, you can use module-alias (npm.im/module-alias) to install aliases for Node that would apply to those externalized files from node_modules.

[robertleeplummerjr]

So how do we fix it?

[luhis]

@robertleeplummerjr this might be the wrong way, but the way i fixed it in the end was overriding @types/react with a fake package, getting rid of the conflict. example in here: https://github.com/luhis/AutoTest/blob/master/AutoTest.Web/ClientApp/package.json