实施服务器端渲染时导入文件在 Node.js 中失败

Question

我正在用打字稿编写的 React 项目实现服务器端渲染。所有组件、容器和其他目录都在 src 目录中。当 React 从 ./src/providers/xxProvider.ts 导入文件时，它可以简单地将其导入为 import * from "providers/xxProvider"。我猜这是 webpack 在捆绑时所做的事情。但是现在当我尝试将 Node.js 用于 ssr 时，node.js 在导入为 import * from "providers/xxProvider" 时找不到 xxProvider 文件，因为它开始在 node_modules.[=15 中查找=]

我该如何解决这个问题？

Answer 1

您的 tsconfig.json 中可能没有正确定义 path mapping。例如试试这个：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "src/*"
      ]
    }
  }
}

Answer 2

我找到了答案。问题来自使用 webpack-node-externals 插件。当我们使用它时，webpack 在打包时会自动忽略 node-modules 文件夹。当我将某些东西导入为 import * from providers/xxProvider 并且同时我在 node_modules 中有一个目录为 providers/xxx 时，webpack 将在捆绑时排除所有名为 providers 的目录。

实施服务器端渲染时导入文件在 Node.js 中失败

Importing file fails in Node.js when implementing server side rendering

node.js

typescript

reactjs

webpack

server-side-rendering