reactjs - 将样式加载器与 webpack 一起使用时出现“未定义窗口”错误
问题描述
构建服务器端反应应用程序并在使用 Webpack 时遇到 Style-Loader 问题。
我正在使用版本“^0.23.1”,并且在运行脚本以捆绑和构建时,Style-Loader 出现问题。
问题是window is not defined
webpack:///./node_modules/style-loader/lib/addStyles.js?:23
return window && document && document.all && !window.atob;
有没有人遇到过这个问题?在查看了样式加载器的 Stack 和 Github 问题后,我没有找到任何解决方案。
这是我的 webpack 文件:
const path = require('path');
const webpack = require('webpack');
module.exports = {
// webpack to use node
target: 'node',
entry: './src/index.js',
output: {
filename: 'client-build.js',
path: path.resolve(__dirname, 'build/public'),
publicPath: '/build/public'
},
module: {
rules: [
{
test: /\.js$|\.jsx$/,
loader: 'babel-loader',
exclude: '/node_modules/',
options: {
presets: [
'@babel/preset-react'
]
}
},
{
test: /\.(s*)css$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.jpeg$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$|\.jpg$|\.pdf$/,
loader: 'file-loader',
query: {
name: 'assets/img/[name].[ext]'
},
},
]
},
plugins: [
new webpack.ProvidePlugin({
"React": "react",
}),
],
}
如果还有什么需要看的,我可以发。
解决方案
style-loader
尝试将样式注入head
网站 ( window
/ document
) 中,这在渲染/执行时将不存在于您的服务器上。
你需要从你的服务器配置中删除这个加载器并用其他东西替换它(例如ExtractTextPlugin或MiniCSSExtractplugin,取决于你的 webpack 版本)
推荐阅读
- python - 基于现有数值列在数据框中创建新列,字符串列表作为列名,元组列表作为值
- c# - 如何在 JSON 文件中添加、删除、更新、只读一个条目?
- asp.net - 如何将工作簿(.aspx 文件)从 html 链接复制到当前工作簿
- c# - 外键属性设置不正确
- url - 如何通过“curl -O”引用同一url中的变量
- neo4j - 如何汇总分数
- azure-batch - “ResourceContainerAccessDenied”作为 CloudTask.ExecutionInformation.FailureInformation.Code 的值返回,但不在 TaskFailureInformationCodes 中
- visual-studio-code - VS Code 无法识别 Expo 项目中的模块别名
- json - 角 CLI。如何为缓存创建 tmp 文件
- python - Pyglet 没有调用 on_draw