Razzle: загрузка css в node_modules сбой на сервере в некоторых случаях

Удалось найти решение

@Ekman Нет, давно не смотрел

Я все еще пытаюсь понять это.

Мы перешли с CRA на Razzle в два этапа:

1. Перенесите наше приложение CRA как есть, без SSR и без лишнего шума. Сделайте юнит-тесты и тест e2e зеленым.
2. Включить SSR - это шаг, на котором мы сейчас находимся

У меня проблемы с загрузкой файла CSS из внешней библиотеки, на которую, в свою очередь, есть ссылка из внешней библиотеки:

• В основной проект входит компонент x.js из библиотеки X
• Компоненту x.js требуется y.css из библиотеки Y. Библиотека X не связывает y.css , она просто ссылается на него.

Основной проект компилируется нормально после шага 1. Но когда мы пытаемся включить SSR, он взрывается с этой ошибкой:

> razzle start

 WAIT  Compiling...

Using .babelrc defined in your app root
Using .babelrc defined in your app root

√ Client
  Compiled successfully in 7.13s

√ Server
  Compiled successfully in 1.95s

(node:15016) UnhandledPromiseRejectionWarning: C:\main-project\node_modules\react-dates\lib\css\_datepicker.css:1
.PresetDateRangePicker_panel {
^

SyntaxError: Unexpected token '.'
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\main-project\node_modules\@company\libraryY\dist\cjs\index.js:29:1)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
(node:15016) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:15016) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Мы пробовали закомментировать y.css в библиотеке X и включили файл непосредственно в основной проект, он работает. Я просто не могу понять, в чем проблема.

такая же ошибка. кто-нибудь нашел решение?

Если это все еще проблема, может ли кто-нибудь привести простой пример?

Кто-нибудь нашел решение?

Мы не можем воспроизвести эту проблему. Можете ли вы сделать простой пример или показать нам свою точную процедуру и конфигурацию. Если это проблема для многих, мы очень хотим ее исправить 😃

Попробую создать репо и выложить сюда. Я переносил (частное) приложение CRA, но затем столкнулся с этой проблемой. Не удалось скомпилировать пакет с именем modali, вероятно, потому, что этот пакет внутренне импортирует файл css. Я решил * это, удалив config.externals в razzle.config.js, следуя предложению одной из проблем.

@fivethreeo Привет, я создал небольшой проект, в котором воспроизводится ошибка. Взгляните здесь: https://github.com/fa7ad/razzle-bug-test.

Действия по воспроизведению:

• Клонировать репо и установить зависимости
• yarn start
• перейдите по адресу http: // localhost : 3000

В примере используется razzle 3.1.0, теперь есть версия 3.1.2, которая может решить эту проблему.

Обновлен razzle до 3.1.3 , проблема по-прежнему та же 😞

PS. Я также обновляю репо, проверьте еще раз

@ fa7ad Узнал почему :) https://github.com/upmostly/modali/issues/34

@ ravikp7 Я думаю, что ваша проблема могла быть чем-то, что мы исправили недавно.

У меня тоже возникла эта проблема. Я сделал репозиторий с голыми костями, который иллюстрирует эту проблему: https://github.com/christiannaths/razzle-css-example

узел v12.18.3
радл 3.1.6

Это изменение, которое нарушает компиляцию сервера (кажется, что клиент компилируется нормально) https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

Я прочитал все проблемы, которые мог найти здесь, которые казались связанными с этим, и, если честно, я не уверен на 100%, что, возможно, мне что-то не хватает в отношении приложений SSR webpack / response - возможно, на самом деле не должно работать ??

Когда я console.log конфиг веб-пакета в пользовательском файле razzle.config.js , я вижу, что css-загрузчики для web и node разные, хотя я ' м действительно не уверен, почему они будут. Я не могу понять, в чем разница между импортом локального файла css и импортом из node_modules ...

Мы будем очень благодарны за ясный ответ на этот вопрос 😕

Попробуйте reset-css / reset.css

Спасибо за быстрый ответ. Да, немного лампочки, спасибо за это.

Я ошибаюсь, думая, что это все еще не идеально? Многие пакеты не раскрывают этот тип информации в своих файлах readme, поэтому я очень ожидаю, что мой пример репозитория сработает. В противном случае мне придется погрузиться в исходный код каждого пакета и выяснить, где они хранят различные файлы CSS, которые мне нужны.

т.е.

• node_modules/reset-css/rest.css
• node_modules/typeface-amiri/index.css
• так далее

Оба рассматриваемых пакета определяют свои соответствующие файлы css в своей записи package.json.main , поэтому я предполагаю, что этот импорт (без прямого перехода к файлам css) будет работать.

Я думаю, что main должен быть путем к модулю cjs. Стиль, в котором я не уверен. Таким образом, их index.js должен иметь reset.css, требующий

Да, в этом есть смысл. Но, честно говоря, я все еще в замешательстве. Приведенные мной примеры _ вряд ли_ единственные пакеты, которые работают таким образом; такого рода вещи встречаются повсюду, и все это работает по умолчанию во многих других системах (next.js, create-react-app, react-static).

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

1. Почему это работает на клиенте, а не на сервере?

Если вы считаете, что это кандидат на изменения, я буду более чем счастлив поработать над ним.

Если вы можете найти решение, я полностью за него :)

Ладно, круто. Поскольку вы, кажется, намекаете, что это действительно нежелательное поведение, рассмотрите ли вы возможность повторно открыть эту проблему, чтобы ее можно было лучше отслеживать (и помочь другим людям, приходящим сюда, понять, что это действительно проблема)?

Проблема в том, что для основных полей существуют соглашения, но они не всегда соблюдаются на практике.

Посмотрите на nodeexternals, думаю :)

Круто, да, при моем беглом взгляде на конфигурацию веб-пакета мне показалось, что этого не хватает. Я немного поиграю с этим, как только смогу

Я думаю, что причиной этого является node-externals, поскольку он разрешает только .css напрямую.

https://github.com/jaredpalmer/razzle/pull/1370

https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L512

исправлено в dev

все еще получаю ошибку, я использую razzle v3.3.13. какие изменения требуются в файле razzle.config.js?

√ Client
  Compiled successfully in 46.33s

√ Server
  Compiled successfully in 46.04s

G:\razzle-webapp\node_modules\react-images-upload\index.css:1
.fileUploader {
^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (G:\Webelight\adamsea-web-Fix-mansi-mar-10-add-razzle\node_modules\react-images-upload\compiled.js:17:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)

Это происходит потому, что пакет является экстерализованной серверной частью. Я сделаю обновление документа, чтобы показать, как это исправить.

Исправлено в razzle 3.4.2 и документах

https://razzlejs.org/getting-started#common -issues
https://razzle-git-canary-jared.vercel.app/getting-started#common -issues

@fivethreeo Большое спасибо за быстрый ответ и решение, которое вы спасли !!! работает очень хорошо !!