search

preactjs / preact-cli

😺 Your next Preact PWA starts in 30 seconds.
MIT License
4.68k stars 376 forks source link

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

Open UbiquitousBear opened 4 years ago

UbiquitousBear commented 4 years ago

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

Reproduction

npm ls --depth 0 | grep preact ├── jest-preset-preact@1.0.0 ├── preact@10.3.4 ├── preact-cli@3.0.0-rc.10 ├── preact-render-to-string@5.1.4 ├── preact-router@3.2.1

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 commented 4 years ago

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

UbiquitousBear commented 4 years ago

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

JoviDeCroock commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

reznord commented 4 years ago

great, I will look into it. :)

UbiquitousBear commented 4 years ago

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 commented 4 years ago

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

developit commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 3 years ago

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

developit commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

So how do we fix it?

luhis commented 3 years ago

@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