导入 React 组件时 NodeJS MODULE_NOT_FOUND

Question

我正在关注有关如何设置服务器端渲染的 React 应用程序的教程（未公开）。本教程使用 React、Babel 和 Webpack。我想使用打字稿，所以我根据官方文档安装了所需的依赖项。

我的目标是使用 renderToString 函数渲染 index.js 文件中导入的组件。为了方便起见，我将相关文件放在这里，但我将链接 我的 github 存储库，以便您可以自己更好地了解结构和依赖关系。

在我尝试将组件导入 index.js 文件之前，一切都正常（github 处于此正常状态）。将组件导入 index.js 会产生错误（见下文）。

我尝试将 index.js 文件更改为 index.tsx 或 index.jsx，删除并重新安装 node_modules，但没有任何帮助，我不确定我应该在哪里寻找可能的解决方案。我当前的项目结构如下所示：

编辑：我已经能够找到问题的根源 - nodejs 抛出错误。我仍然不确定如何解决这个问题。

client.tsx:

import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(
  <App />,                                
  document.querySelector("#container")  
);

App.tsx:

// this function component worked fine inside of the client.tsx
export function App() {
  return (
    <div>
      <h1>Cats are love !</h1>
    </div>
  );
}

错误来自 index.tsx:

import express from 'express'
import { readFileSync } from 'fs';
import { renderToString } from 'react-dom/server';

import { App } from '../src/App';

const app = express();

app.use(express.static("dist"));

app.get("/", async (_request, response) => {
  
  const index = readFileSync(`public/index.html`, `utf8`);
  const rendered = renderToString(<App />);

  response.send(index.replace("{{rendered}}", rendered));

});

const port = 3000;
app.listen(port);

console.log(`Server listening on port ${port}`);

错误输出如下：

catlord@Cat-Heaven:~/react-workspace/server-side-rendering$ npm run build

> [email protected] build
> webpack

asset bundle.js 1.03 MiB [emitted] [big] (name: client)
runtime modules 670 bytes 3 modules
modules by path ./node_modules/ 1010 KiB
  modules by path ./node_modules/react/ 108 KiB
    modules by path ./node_modules/react/*.js 404 bytes 2 modules
    modules by path ./node_modules/react/cjs/*.js 108 KiB 2 modules
  modules by path ./node_modules/scheduler/ 26.3 KiB
    modules by path ./node_modules/scheduler/*.js 412 bytes 2 modules
    modules by path ./node_modules/scheduler/cjs/*.js 25.9 KiB 2 modules
  modules by path ./node_modules/react-dom/ 875 KiB
    ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.development.js 874 KiB [built] [code generated]
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/*.tsx 495 bytes
  ./src/client.tsx 298 bytes [built] [code generated]
  ./src/App.tsx 197 bytes [built] [code generated]
webpack 5.69.1 compiled successfully in 919 ms

catlord@Cat-Heaven:~/react-workspace/server-side-rendering$ npm start

> [email protected] start
> babel-node server/index.js

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '../src/App'
Require stack:
- /home/catlord/react-workspace/server-side-rendering/server/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/catlord/react-workspace/server-side-rendering/server/index.js:8:1)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Module._compile (/home/catlord/react-workspace/server-side-rendering/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.newLoader [as .js] (/home/catlord/react-workspace/server-side-rendering/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/catlord/react-workspace/server-side-rendering/server/index.js'
  ]
}

Answer 1

您可以使用@创建相对于项目根目录的路径

import { App } from '@/src/App';