构建服务器端 React 应用程序并在使用 Webpack 时遇到 Style-Loader 问题。
我正在使用版本“^0.23.1”,当运行脚本进行捆绑和构建时,Style-Loader 出现问题。
问题是窗口未定义
webpack:///./node_modules/style-loader/lib/addStyles.js?:23
return window && document && document.all && !window.atob;
有人遇到过这个问题吗?在查看了 Stack 和 Github 的 style-loader 问题后,我没有找到任何解决方案。
这是我的 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
尝试将样式注入(inject)网站的 head
中(window
/document
),在渲染/执行时,它在您的服务器上将不存在。
您需要从服务器配置中删除此加载程序并将其替换为其他内容(例如 ExtractTextPlugin 或 MiniCSSExtractplugin ,具体取决于您的 webpack 版本)
关于reactjs - 在 webpack 中使用 style-loader 时出现“窗口未定义”错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53951861/