尝试导入 ReactToastify 时如何修复"TypeError: rule.assign is not a function".css

Question

我可以毫无问题地import { ToastContainer } from 'react-toastify，但当我尝试import 'react-toastify/dist/ReactToastify.css';，我得到一个错误：

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/react-toastify/dist/ReactToastify.css

类型错误：rule.assign不是函数

我使用的是启用了"jit"模式的next.js和顺风css。

_app.js:

import 'tailwindcss/tailwind.css';
import '../public/css/syles.css';
import NavBar from '../components/NavBar';
// dynamic(
//   () =>
//     import('!style-loader!css-loader!react-toastify/dist/ReactToastify.css'),
//   { ssr: false }             <== tried this as a potential fix, but didn't work.
// );
// import dynamic from 'next/dynamic';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function MyApp({ Component, pageProps }) {
return (
<>
<ToastContainer position='top-center' />
<NavBar />
<Component {...pageProps} />;
</>
);
}
export default MyApp;

package.json:

{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@headlessui/react": "^1.4.2",
"@heroicons/react": "^1.0.5",
"@tailwindcss/line-clamp": "^0.2.2",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"express": "^4.17.1",
"heroicons": "^1.0.5",
"http-proxy-middleware": "^2.0.1",
"next": "^12.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-toastify": "^8.1.0"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.4.3",
"postcss-preset-env": "^7.0.1",
"tailwindcss": "^2.2.19"
}
}

如有任何建议，我们将不胜感激。谢谢

Answer 1

好的，所以我通过{injectStyle}并在useEffect((中执行来解决它。

我参考了这一页：https://fkhadra.github.io/react-toastify/how-to-style/#inject-风格随需应变

_app.js:

import 'tailwindcss/tailwind.css';
import '../public/css/syles.css';
import NavBar from '../components/NavBar';
import { useEffect } from 'react';
import { ToastContainer } from 'react-toastify';
import { injectStyle } from 'react-toastify/dist/inject-style';
function MyApp({ Component, pageProps }) {
useEffect(() => {
injectStyle();
}, []);
return (
<>
<ToastContainer position='top-center' />
<NavBar />
<Component {...pageProps} />;
</>
);
}
export default MyApp;