i am getting error when i use Error in react-toastify npm module and server side rendering. toastify/dist/ReactToastify.css Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. |
Error:
.Toastify__toast-container { | z-index: 9999; | position: fixed;
ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .Toastify__toast-container {
| z-index: 9999;
| position: fixed;
when server side rendering we should config style loader on both server-side and client side like
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
or we can create base webpack config and we can merge it in client and server side
** OR ****
webpack.base.config.js
i included my config in both webpack.server.config.js / webpack.prod.config.js and webpack.client.config.js / webpack.client.config.js
npm install sass-loader style-loader css-loader import-glob-loader
and my final
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']
}
]
Adding the below to the tsx file before you import the Toastify css seems to have worked for me. I will update if I find that this does not work, but so far it compiled.
require.extensions['.scss'] = () => {
return;
};
require.extensions['.css'] = () => {
return;
};
I found this solution here.
