Razzle: 在某些情况下，无法在服务器上将node_modules中的css加载

您是否设法找到一个解决方案@ ravikp7 ？

@Ekman不，已经一段时间没有抬头了

我仍在设法弄清楚这一点。

我们已经从CRA迁移到Razzle，分两个步骤：

1. 可以按原样迁移我们的CRA应用程序，无需SSR，也无需额外的绒毛。 使单元测试和e2e测试变为绿色。
2. 启用S​​SR-这是我们目前正在采取的步骤

我从外部库加载CSS文件时遇到问题，而外部库又从外部库引用了CSS文件：

• 主项目包括库X中的组件x.js
• 组件x.js需要库Y中的y.css 。 库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.

我们尝试注释掉库X中的y.css并将文件直接包含在主项目中，它可以工作。 我只是不知道问题出在哪里。

有同样的错误。 有人找到解决办法了吗？

如果这仍然是一个问题，有人可以举一个简单的例子吗？

有人找到解决方案了吗？

我们无法重现此问题。 您能否举一个简单的例子或向我们展示您的确切过程和配置。 如果对很多人来说这是一个问题，我们非常想修复它。

我将尝试创建一个存储库并在此处发布。 我当时正在迁移（私有）CRA应用程序，但后来遇到了这个问题。 尝试编译名为modali的程序包时失败，可能是因为该程序包在内部导入了一个css文件。 我根据其中一个问题的建议，通过删除razzle.config.js中的config.externals解决了该问题。

@fivethreeo嘿，我创建了一个复制该错误的小项目。 在这里看看： https :

重现步骤：

• 克隆仓库并安装依赖项
• 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 :

节点v12.18.3
炫目3.1.6

这是破坏服务器编译的更改（客户端似乎编译良好） https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

我已经阅读了所有在这里发现的与此相关的问题，如果说实话，我不是100％肯定我是否缺少有关SSR Webpack / React应用程序的信息-也许这实际上不应该工作吗？

当我在自定义razzle.config.js文件中console.log webpack配置时，我可以看到web和node的css-loaders不同，尽管我我真的不确定为什么会这样。 我无法弄清楚导入本地css文件与从node_modules导入一个本地css文件之间的区别是什么...

对此问题的明确答案将不胜感激😕

尝试reset-css / reset.css

感谢您的快速回复。 是的，在那里有点灯泡的时刻，谢谢你。

我认为这还是不理想，这是错误的吗？ 许多软件包在自述文件中并未公开此类信息，因此，我非常希望我的示例存储库能够正常工作。 否则，我必须深入研究每个软件包的源代码，并找出它们存放我所需的各种CSS文件的位置。

IE，

• node_modules/reset-css/rest.css
• node_modules/typeface-amiri/index.css
• 等等

有问题的软件包都在package.json.main条目中定义了它们各自的css文件，所以我想我希望这些导入（不直接指向css文件的路径）能够正常工作。

我认为main应该是cjs模块的路径。 风格我不确定。 所以他们的index.js应该有一个reset.css要求

是的，那是有道理的。 但说实话，我还是很困惑。 我给出的示例是_hardly_唯一以这种方式工作的程序包； 这种东西到处都是野外发现的，并且默认情况下在所有其他系统（next.js，create-react-app，react-static）中都可以使用。

我认为此问题的核心无法通过变通办法或要求第三方软件包进行更改来解决。 仍然存在一个基本问题。

1. 为什么这在客户端而不在服务器上有效？

如果您认为这是变革的候选者，那么我会很乐意为此工作。

如果您能找到解决方案，我将全力以赴:)

嗯不错。 由于您似乎暗示这确实是不受欢迎的行为，您是否会考虑重新打开此问题，以便对其进行更好地跟踪（并帮助其他来这里的人了解这确实是一个问题）？

问题在于主要领域都有约定，但并非总是在野外遵循。

看一下我认为的nodeexternals :)

不错，是的，在我简要介绍一下webpack配置时，似乎缺少了这一点。 我会尽快玩一下

我认为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

固定在开发中

仍然出现错误，我正在使用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)

发生这种情况的原因是程序包在服务器端被exteralized。 我将进行文档更新以显示如何解决此问题。

在Razzle 3.4.2和docs中修复

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

@fivethreeo非常感谢您的快速响应和解决方案，您节省了一天！！！ 效果很好！