Question

我正在尝试为我的React应用程序实现服务器端渲染，而我偶然发现了与组件绝对路径导入有关的问题。当我尝试运行服务器时，出现错误：

Error: Cannot find module 'components/Header/Header.js'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/crs/Desktop/app/src/App.js:4:1)
    at Module._compile (module.js:652:30)
    at Module._compile (/Users/crs/Desktop/app/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (module.js:663:10)
    at Object.newLoader [as .js] (/Users/crs/Desktop/app/node_modules/pirates/lib/index.js:104:7)
    at Module.load (module.js:565:32)

在服务器中，我使用renderToString组件上的ReactDOM库中的<App />函数。

....
return res.send(
      data.replace(
        '<div id="root"></div>',
        `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
      )
    );
....

另一方面，<App />组件只有一个页眉和一个页脚组件。

import React from "react";
import Header from "components/Header/Header.js";
import Footer from "components/Footer/Footer";

const App = () => {
  return (
    <div>
      <Header/>
      <Footer />
    </div>
  );
};

export default App;

由于react-sripts-start在我的根目录中，因此我使用jsconfig.json运行代码时，导入语句可以工作，但是现在导入在服务器上给出了错误。

是否有babel插件或其他方法来解决此问题？

如何在React Server Side Rendering中支持绝对路径导入？

0 个答案: