Как поддержать импорт абсолютного пути в рендеринге на стороне сервера React? - PullRequest
Новая
       148

Как поддержать импорт абсолютного пути в рендеринге на стороне сервера React?

0 голосов
/ 04 ноября 2019

Я пытаюсь реализовать рендеринг на стороне сервера для своего приложения 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 Iв моем корневом каталоге, но теперь при импорте выдается ошибка на сервере.

Существует ли плагин babel или другой способ исправить это?

...