文章/答案/技术大牛

发布

社区首页 >问答首页 >在react SSR中导入react-toastify的css引发错误

问在react SSR中导入react-toastify的css引发错误
EN

Stack Overflow用户

提问于 2019-11-19 21:45:32

回答 1查看 862关注 0票数 1

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

任何帮助都将不胜感激。

css

reactjs

webpack-4

server-side-rendering

回答 1

Stack Overflow用户

发布于 2020-04-07 21:23:15

我将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>
`);
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58935504

复制

相似问题

问在react SSR中导入react-toastify的css引发错误
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react SSR中导入react-toastify的css引发错误EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react SSR中导入react-toastify的css引发错误
EN