Full Error:
Seeing this error client-side, in the browser console, trying to import the react modules from my server's node_modules folder.
Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".
Edit: I am seeing this error in the client/ in the browser console, trying to import a module from my node_modules folder on the server, using a non-relative path. Most React example code I've seen uses this non-relative reference, so I don't understand why it doesn't work for me since I thought React is intended to run on the client for client-side rendering, so I assume this is a mon use case.
I'm making my first website to learn various web technologies and now I'm learning React. I want to add React to my existing project by making a few ponents to use in my pages. That's why I haven't used "Create React App" as I want to add it in to my existing setup.
I have:
- An Express server written in JavaScript/ NodeJS
- Client side code is written in TypeScript
- I'm using Pug to generate HTML on the server, but that is probably not relevant.
- I'm using npm for managing react, express, etc packages
- I am not using anything for bundling
I've seen a lot of similar questions but can't find solutions that help me. People seem to be using webpack or talk about bundling which is something I've ignored so far as I haven't needed it so far.
I have made a simple page in my project mimicking my setup to simplify investigating - a static HTML file, which includes a .ts file as a module, which imports a .tsx file. I still get the error here.
Folder structure:
BudgetV1
|- node_modules
| |- @types
| | |- react
| | |- react-dom
| |- react
| |- react-dom
|
|- public
| |- reactPractice.html
|
|- scripts
| |- practicingReact.ts
| |- helpInsertReact.tsx
|
|- app.js
|- package.json
|- tsconfig.json
package.json
{
"name": "budgetv1pug",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"devstart": "nodemon ./bin/www",
"serverstart": "SET DEBUG=budgetv1pug:* & npm run devstart"
},
"dependencies": {
"async": "^3.2.4",
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"express": "~4.16.1",
"express-validator": "^6.14.2",
"http-errors": "~1.6.3",
"mongoose": "^6.6.2",
"morgan": "~1.9.1",
"pug": "2.0.0-beta11",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"nodemon": "^2.0.20"
}
}
tsconfig.json
{
"pilerOptions": {
"target": "ES2015",
"allowJs": true,
"sourceMap": true,
"outDir": "./public/out",
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"watch": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"noEmitOnError": true,
"allowSyntheticDefaultImports": true,
},
"include": ["./scripts/*"]
}
app.js
const express = require('express');
const path = require('path');
const app = express();
// Set up mongoose connection
.....
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'node_modules'))); // Tried adding this but didn't help.
app.use('/', catalogRouter)
// ...
// More unrelated app.use() setup calls
// ...
module.exports = app;
reactPractice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
</head>
<body>
<h1>Hi</h1>
<script src="./out/practicingReact.js" type="module"></script>
<div id="root"></div>
</body>
</html>
practicingReact.ts
import insertReact from "./reactComponents/helpInsertReact.js";
window.addEventListener("DOMContentLoaded", function (e) {
console.log("DOMContentLoaded");
insertReact();
});
helpInsertReact.tsx
import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client"; // Problem line
export default function insertReact() {
console.log("insertReact");
let rootDiv: HTMLElement = document.getElementById("root")!;
const root = createRoot(rootDiv);
}
And finally in the browser dev tools Console, the error on page load:
Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".
in reactPractice.html:1
Note that if I add a line in helpInsertReact.tsx that uses something from "react" I get a similar error for 'module specifier "react"'.
I can see the GET request for helpInsertReact.js e into my server, but I can't see the file in the Sources tab of browser dev tools. I'm guessing it doesn't even begin running because of the 'failed to resolve...' error
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745207257a4616651.html
评论列表（0条）