preact-cli
preact-cli copied to clipboard
preactjs
Module not found: Error: Can't resolve 'react-dom'
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
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.
@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
@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?
@reznord https://github.com/UbiquitousBear/personal-website here we go, master branch should be fine to run
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
Actually, I've just broken half of the app... though it still builds fine...
@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 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?
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
@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.
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.
I am facing the same issue with react-slick. Here is the js fiddle i found https://jsfiddle.net/developit/mLodgqqL/
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.
@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.
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 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