Question

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

.Toastify__toast-container { ^
SyntaxError：意外令牌。

在我的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];

任何帮助将不胜感激。

Answer 1

我通过将react-toastify的CSS文件放在我的asset / 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>
`);
});

在React SSR抛出错误中导入react-toastify的CSS

1 个答案: