importing css of react-toastify in react SSR throwing error

Question

When I am importing CSS file of react-toastify in my react.js component of React SSR Application it's throwing the following error in terminal.

.Toastify__toast-container { ^
SyntaxError: Unexpected token .

In my App.js I am importing it like this

import "react-toastify/dist/ReactToastify.css"

I am sharing my webpack configuration

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];

Any help will be appreciated.

Asif Iqbal · Accepted Answer · 2020-04-07 13:23:14Z

1

I resolved this issue by putting the CSS file of the react-toastify in my assets/css directory and including it in the response of the server.

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/[email protected]/dist/bootstrap-native-v4.min.js"
    ></script>
      <title></title>
    </head>

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

answered Apr 7, 2020 at 13:23

Asif Iqbal

5409 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ambe5960 Over a year ago

Another hack-y way is to just import them in your entry file. With your isomorphic setup, you likely have a separate entry point, and you can import them in that file with no errors. Both solutions would be cleaner with a true code-splitting solution.

Collectives™ on Stack Overflow

importing css of react-toastify in react SSR throwing error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related