导入React组件时的NodeJS MODULE_NOT_FOUND

Question

我正在学习关于如何设置服务器端呈现的React的教程(这是不可公开的)。本教程使用的是React，Babel和Webpack。我想和它一起使用类型记录，所以我根据官方文档安装了所需的依赖项。

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

在我尝试将组件导入到index.js文件(github处于OK状态)之前，一切都很好。将组件导入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

> server-side-rendering@1.0.0 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

> server-side-rendering@1.0.0 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';