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

当我在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",target: "node",externals: [nodeExternals()],output: {
    path: path.resolve(__dirname),filename: "server.js",plugins: [
    new webpack.DefinePlugin({
      __isBrowser__: "false"
    })
  ]
};

module.exports = [browserConfig,serverConfig];

任何帮助将不胜感激。

liufei2233 回答:在React SSR抛出错误中导入react-toastify的CSS

我通过将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>
`);
});
本文链接:https://www.f2er.com/3073057.html

大家都在问