I'm getting this result on my npm start
log:
Can't resolve 'react-dom/server' in 'C:\Users\Alvaro\git\Fancy\lab\src\components\data-visualization\chart'
If you're trying to use a package make sure that 'react-dom/server' is installed. If you're trying to use a local file make sure that the path is correct.
failed Re-building development bundle - 0.607s
my project is a library, separated in lib/lab with directory like
where lib is already deployed components, lab is the ones I'm working on right now
I'm trying to do just
import * as ReactDOMServer from "react-dom/server";
in a component inside lab , but getting the error above
react-dom is installed on all package.json files:
./package.json
"devDependencies": {
...
"@types/react": "16.14.8",
"@types/react-dom": "^16.9.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
...
},
"peerDependencies": {
"react": ">=16",
"react-dom": ">=16"
},
lab/package.json and lib/package.json
"devDependencies": {
...
"@types/react": "16.14.8",
"@types/react-dom": "^18.0.6",
"react": "17.0.2",
"react-dom": "^17.0.2"
},
"peerDependencies": {
"react": ">=16",
"react-dom": ">=16"
},
So... it looks like react-dom is installed, therefore I should be able to use react-dom/server as an import.. but can't.. any ideas?
Solved, problem was actually with gatsby-node
On the configurations, added the alias (in this order, if reverse it doesn't work)
/** @type {import('gatsby').GatsbyNode} */
module.exports = {
onCreateWebpackConfig: ({ actions }) => {
actions.setWebpackConfig({
resolve: {
alias: {
//These aliases are needed so we always end up with the same instance of react
// otherwise we get a version from the root, and one from lib/lab, which crashes at runtime when hooks are used.
react: require.resolve("react"),
"react-dom/server": require.resolve("react-dom/server"),
"react-dom": require.resolve("react-dom"),
},
},