Ошибки при импорте папки assets со статическим url в проект React parcel

Я пытаюсь сделать серверный рендеринг react-страницы с помощью Django. Серверный рендеринг работает нормально для обычных компонентов react. Проект использует parcel для автоматической сборки javaScript-файлов, чтобы Django мог их рендерить. Вот команда, которую я использую для компиляции react в Js. "scripts": { "watch": "parcel watch src/index.tsx --public-url /assets/" }

Я новичок в посылке, поэтому прошу прощения за плохое изложение проблемы и/или неправильную терминологию.

Проблема возникает всякий раз, когда я пытаюсь импортировать компонент assets из папки assets в мои компоненты react. Оператор импорта в моем коде react работает нормально, но я получаю ошибку в операторе импорта из папки assets, говорящую о том, что путь к файлу для импорта неверен. Ниже приведен скриншот проблемы.

введите описание изображения здесь

@parcel/core: Failed to resolve 'assets/theme/base/typography' from './src/assets/theme/index.js'

  C:\profitional\BRAVO\Server\assets\src\assets\theme\index.js:23:24
    22 | import breakpoints from "assets/theme/base/breakpoints";
  > 23 | import typography from "assets/theme/base/typography";
  >    |                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    24 | import boxShadows from "assets/theme/base/boxShadows";
    25 | import borders from "assets/theme/base/borders";

Done in 689.72s.

C:\profitional\BRAVO\Server\assets>yarn parcel watch src/index.tsx
yarn run v1.22.19
$ C:\profitional\BRAVO\Server\assets\node_modules\.bin\parcel watch src/index.tsx
× Build failed.

@parcel/core: Failed to resolve 'assets/theme/base/breakpoints' from './src/assets/theme/index.js'

  C:\profitional\BRAVO\Server\assets\src\assets\theme\index.js:22:25
    21 | import colors from "assets/theme/base/colors";
  > 22 | import breakpoints from "assets/theme/base/breakpoints";
  >    |                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    23 | import typography from "assets/theme/base/typography";
    24 | import boxShadows from "assets/theme/base/boxShadows";

Проблема в том, что я не могу понять, как правильно настроить файлы активов в конфигурации проекта react parcel, чтобы мне не нужно было менять пути к активам.

Вот мои пути к файлам в проекте, где:

Сервер - это корневая папка проекта Django

• активы (Имеет весь реактивный код для SSR)
  • src
    • assets (папка, которую я пытаюсь импортировать)
      • theme -index(файл, вызывающий ошибку)

введите описание изображения здесь введите описание изображения здесь

Ошибка вызвана не одним импортом активов, а всеми операторами импорта в папке src/assets. Я уже пытался изменить все пути к файлам в папке assets, которые вызывают проблему, но это слишком громоздко. Что я могу сделать, чтобы решить эту проблему в проекте React parcel?

, файл parcelrc

{
  "extends": ["@parcel/config-default"],
  "resolvers": ["@parcel/resolver-glob", "..."]
}

файл jsconfig.json

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

Спасибо, что нашли время помочь мне с этой проблемой. Если вам нужна дополнительная информация, пожалуйста, спрашивайте в разделе комментариев.

Я рассчитываю решить эту проблему со статусом импорта, изменив путь к папке assets в файлах конфигурации, чтобы мне не пришлось менять все пути к статусу импорта в папке src/assets.

Вернуться на верх