Trying to incorporate sass and css modules into my next.config.js has been challenging due to an error I keep encountering:
Failed to compile.
./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css
Unknown word (1:1)
> 1 | var api = require("!../../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js");
| ^
2 | var content = require("!!../../../../../../css-loader/index.js!./index.css");
3 |
4 | content = content.__esModule ? content.default : content;
After researching on github and stackoverflow, it seems like the issue stems from having two instances of css module configurations in my next.config.js. However, I am unsure how to consolidate them while preserving the logic:
config.module.rules.push({
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});
Here is the full version of my next.config.js file:
const path = require('path');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const aliasPathsToResolve = [
{
name: 'react-ui',
path: path.resolve(__dirname, './node_modules/@riskalyze/react-ui/')
},
{
name: '@babel/runtime-corejs2',
path: path.resolve(__dirname, './node_modules/@babel/runtime-corejs2/')
}
];
module.exports = withCSS(
withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
},
webpack: (config, { defaultLoaders }) => {
config.module.rules.push({
test: /\.+(js|jsx|ts|tsx)$/,
loader: defaultLoaders.babel,
include: /react-ui/
});
config.module.rules.push({
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});
aliasPathsToResolve.forEach(module => {
config.resolve.alias[module.name] = module.path;
});
return config;
}
})
);