时间戳

首页 > 解决方案 > 样式加载器在 React SSR 中失败

javascript - 样式加载器在 React SSR 中失败

问题描述

创建了可重用的反应库，目前它只在客户端工作。如果我尝试在服务器端运行，它会因为style-loader. 基本上我想将 css 和 js 捆绑到单个文件（UMD）中。这样消费者就方便了。那可能吗？我考虑了 styled-component 和情感 js，但不确定它是否会在主应用程序中创建任何其他依赖项。寻找更好的选择来捆绑它。

ReferenceError: window is not defined
at t (/Users/srisukum/Documents/dev/react-library/react-reusable-lib/build/index.js:1:1925)
at B (/Users/srisukum/Documents/dev/react-library/react-reusable-lib/build/index.js:1:2013)
at A.exports (/Users/srisukum/Documents/dev/react-library/react-reusable-lib/build/index.js:1:5558)
at Object.<anonymous> (/Users/srisukum/Documents/dev/react-library/react-reusable-lib/build/index.js:1:990)
at s (/Users/srisukum/Documents/dev/react-library/react-reusable-lib/build/index.js:1:62)
at Module.<anonymous> (/Users/srisukum/Documents/dev/react-library/react-reusable-lib/build/index.js:1:14364)
at s (/Users/srisukum/Documents/dev/react-library/react-reusable-lib/build/index.js:1:62)
at /Users/srisukum/Documents/dev/react-library/react-reusable-lib/build/index.js:1:861
at Object.<anonymous> (/Users/srisukum/Documents/dev/react-library/react-reusable-lib/build/index.js:1:870)
at Module._compile (internal/modules/cjs/loader.js:776:30)

Webpack.config.js

output: {
path: path.resolve(__dirname, 'build'),
filename: "index.js",
libraryTarget: 'commonjs2'
},
module: {
 rules: [
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components|build|dist)/,
    use: {
      loader: "babel-loader"
    }
  },
  {
    test: /\.css$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          modules: true
        }
      }
    ]
  },
  { 
    test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
    loader: 'url-loader?limit=100000' 
  }
]
},
optimization: {
 minimizer: [
  new UglifyJsPlugin({
    cache: false,
    parallel: true,
    uglifyOptions: {
      compress: true,
      ecma: 6,
      mangle: true
    }
  })
 ]
},
externals: {
  'react': 'commonjs react'
}

标签： javascriptreactjswebpackserver-side-renderingwebpack-style-loader

解决方案

您应该在 SSR 中使用isomorphic-style-loader 。

推荐阅读