Do you want to request a feature or report a bug?
BUG
What is the current behavior?
Using Next.js, whenever I try to run yarn dev it fails to compile the page and gives the following error below.
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[11].use[2]!./node_modules/react-toastify/dist/ReactToastify.css
TypeError: Cannot read properties of undefined (reading 'parsers')
Import trace for requested module:
./node_modules/react-toastify/dist/ReactToastify.css
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:
The error seems to be coming from the .css file.
Proprietary code, but here's my _app.tsx file. I'm using the pages and not the app folder structure.
import type { AppProps } from 'next/app';
import 'styles/globals.css';
import 'react-toastify/dist/ReactToastify.css';
import { useEffect } from 'react';
import { Layout } from 'src/context/Layout';
import { WalletInitialization } from 'src/context/WalletInitialization';
import { MsalProvider } from '@azure/msal-react';
import { msalInstance } from 'config';
import { MsalAuthentication } from 'src/context/MsalAuthentication';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ToastContainer } from 'react-toastify';
const queryClient = new QueryClient();
function MyApp({ Component, pageProps }: AppProps) {
useEffect(() => {
document.body.classList.add('dark');
}, []);
return (
<MsalProvider instance={msalInstance}>
<QueryClientProvider client={queryClient}>
<MsalAuthentication>
<WalletInitialization>
<Layout>
<ToastContainer />
<Component {...pageProps} />
<ReactQueryDevtools initialIsOpen={false} />
</Layout>
</WalletInitialization>
</MsalAuthentication>
</QueryClientProvider>
</MsalProvider>
);
}
export default MyApp;
What is the expected behavior?
It should work & compile.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Do you want to request a feature or report a bug? BUG
What is the current behavior? Using Next.js, whenever I try to run
yarn dev
it fails to compile the page and gives the following error below.If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below: The error seems to be coming from the
.css
file.Proprietary code, but here's my
_app.tsx
file. I'm using thepages
and not theapp
folder structure.What is the expected behavior? It should work & compile.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?