Question

当我在react-toastify npm模块和服务器端渲染中使用Error时，出现错误。 toastify / dist / ReactToastify.css 模块解析失败：意外的令牌（1：0）您可能需要适当的加载程序来处理此文件类型。 |

getWindow().addFlags(WindowManager.LayoutParams.FLAG_SECURE);

Answer 1

在服务器端渲染时，我们应该在服务器端和客户端都配置样式加载器，例如

server-side webpack js Example
webpack.server.config.js or  webpack.prod.config.js
client-side js
webpack.client.config.js or  webpack.client.config.js

或者我们可以创建基本的webpack配置，并且可以在客户端和服务器端进行合并

** OR ****
webpack.base.config.js

我在webpack.server.config.js / webpack.prod.config.js和webpack.client.config.js / webpack.client.config.js中都包含了我的配置

npm install sass-loader style-loader css-loader import-glob-loader

和我的决赛

webpack.base.config.js

module: {
rules: [

  {
    test: /\.s?css$/,
    exclude: [resolvePath('../src/styles')],
    use: [
      {
        loader: 'css-loader',
        options: {
          localsConvention: 'camelCase',
          modules: true
        }
      },
      'sass-loader',
      'import-glob-loader'
    ]
  },
  { 
    test: /\.css$/,
    use: ['style-loader', 'css-loader'] 
  }
]

Answer 2

在导入Toastify CSS之前，将以下内容添加到tsx文件中似乎对我有用。如果发现此操作无效，但到目前为止已编译，我将进行更新。

require.extensions['.scss'] = () => {
  return;
};
require.extensions['.css'] = () => {
  return;
};

我找到了此解决方案here。

react-toastify / dist / ReactToastify.css模块解析错误。Toastify__toast-container {|反应SSR

2 个答案: