- 完整错误：**
在浏览器控制台的客户端看到这个错误，尝试从我的服务器的node_modules文件夹导入react模块。
Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".编辑：我在浏览器控制台的client/中看到这个错误，试图从服务器上的node_modules文件夹导入一个模块，使用一个非相对路径。我见过的大多数React示例代码都使用这个非相对引用，所以我不明白为什么它对我不起作用，因为我认为React是为了在客户机上运行客户端渲染，所以我假设这是一个常见的用例。
我正在制作我的第一个网站来学习各种网络技术，现在我正在学习React。我想通过制作一些组件在我的页面中使用来将React添加到我现有的项目中。这就是为什么我没有使用"创建React应用程序"，因为我想将其添加到我现有的设置中。
我有：
- 用JavaScript/NodeJS编写的Express服务器
- 客户端代码采用TypeScript编写
- 我使用Pug在服务器上生成HTML，但这可能无关紧要。
- 我正在使用npm来管理react、express等包
- 我没有使用任何东西进行捆绑
我见过很多类似的问题，但找不到解决方案，帮助我。人们似乎正在使用webpack或谈论捆绑，这是我忽略了，因为我还没有需要它。
我在我的项目中做了一个简单的页面来模仿我的设置以简化调查-一个静态HTML文件，它包括一个. ts文件作为模块，它导入一个. tsx文件。我仍然在这里得到错误。
- 文件夹结构：**
BudgetV1
|- node_modules
| |- @types
| | |- react
| | |- react-dom
| |- react
| |- react-dom
|
|- public
| |- reactPractice.html
|
|- scripts
| |- practicingReact.ts
| |- helpInsertReact.tsx
|
|- app.js
|- package.json
|- tsconfig.json- 包. 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"
}
}- 系统配置json**
{
"compilerOptions": {
"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/*"]
}- 应用程序. 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;- React实践. 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>- 练习Reactts**
import insertReact from "./reactComponents/helpInsertReact.js";
window.addEventListener("DOMContentLoaded", function (e) {
console.log("DOMContentLoaded");
insertReact();
});- 帮助插入React. 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);
}最后在浏览器开发工具控制台中，页面加载错误：
Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".在线留言：1
注意，如果我在helpInsertReact.tsx中添加一行使用"react"中的内容，我会得到一个类似的错误"module specifier" react "。
我可以看到helpInsertReact.js的GET请求进入我的服务器，但是在浏览器开发工具的Sources选项卡中看不到该文件。我猜它甚至没有开始运行，因为出现了"failed to resolve ..."错误
1条答案
按热度按时间3pvhb19x1#
错误消息"未捕获的TypeError：无法解析模块说明符"react-dom/client"。相对引用必须以"/"、./"或../"开头。通常在JavaScript应用程序中导入模块时出现问题。
此错误消息明确表示无法解析模块说明符"react-dom/client"，因为它不是以"/"、"./"或"../"开头。
若要修复此错误，应更新模块说明符，使其以这些字符之一开头。例如，如果尝试导入名为"client"的模块，而该模块与当前文件位于同一目录中，则应使用. "/client "作为模块说明符。如果" client "位于父目录中，则应使用.. "/client"。
如果在更新模块说明符后仍然有问题，您可能需要检查您尝试导入的模块是否已实际安装，并且在项目依赖项中可用。您可以通过检查package.json文件或在项目目录中运行命令"npm ls"来完成此操作。