在 React SSR 中导入 react-toastify 的 css 抛出错误答案

【问题标题】：importing css of react-toastify in react SSR throwing error在 React SSR 中导入 react-toastify 的 css 抛出错误
【发布时间】：2020-03-15 01:24:38
【问题描述】：

当我在 React SSR 应用程序的 react.js 组件中导入 react-toastify 的 CSS 文件时，它会在终端中引发以下错误。

.Toastify__toast-container { ^
SyntaxError: Unexpected token .

在我的 App.js 中，我像这样导入它

导入“react-toastify/dist/ReactToastify.css”

我正在分享我的 webpack 配置

var path = require("path");
var webpack = require("webpack");
var nodeExternals = require("webpack-node-externals");

var browserConfig = {
  entry: "./src/browser/index.js",
  mode: "none",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      { test: /\.(js)$/, exclude: /node_modules/, use: ["babel-loader"] },
      {
        test: /\.(s?)css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      __isBrowser__: "true"
    })
  ]
};

var serverConfig = {
  entry: "./src/server/index.js",
  mode: "none",
  target: "node",
  externals: [nodeExternals()],
  output: {
    path: path.resolve(__dirname),
    filename: "server.js",
    publicPath: "/"
  },
  module: {
    rules: [
      { test: /\.(js)$/, exclude: /node_modules/, use: ["babel-loader"] },
      {
        test: /\.(s?)css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      __isBrowser__: "false"
    })
  ]
};

module.exports = [browserConfig, serverConfig];

任何帮助将不胜感激。

【问题讨论】：

标签： css reactjs webpack-4 server-side-rendering

【解决方案1】：

我通过将 react-toastify 的 CSS 文件放在我的 assets/css 目录中并将其包含在服务器的响应中来解决了这个问题。

app.get("*", async (req, res, next) => {
  const markup = renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  res.send(`
  <!DOCTYPE html>
  <html>
    <head>
      <!-- style CSS -->
      <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
      <link rel="stylesheet" href="/assets/css/style.css" />
      <link rel="stylesheet" href="/assets/css/react-toastify.css" />
      <!-- Flaticon -->
      <link rel="stylesheet" href="/assets/css/flaticon.css" />
      <!-- Bootstrap CSS -->
      <link
        rel="stylesheet"
        href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
        crossorigin="anonymous"
      />
      <script src="/bundle.js" defer></script>
      <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/bootstrap.native@2.0.23/dist/bootstrap-native-v4.min.js"
    ></script>
      <title></title>
    </head>

    <body>
      <div id="app">${markup}</div>
    </body>
  </html>
`);
});

【讨论】：

另一种 hack-y 方法是将它们导入到您的条目文件中。使用同构设置，您可能有一个单独的入口点，您可以将它们导入该文件中而不会出现错误。使用真正的代码拆分解决方案，这两种解决方案都会更简洁。