Reference snapshot of error -->> Cannot set property 'styles' of undefined, error in nextJs
whenever I installs package or simply doing npm i I face this issue, I have tried
//next.config.js module.exports = withPlugins([...], {webpack5: false,}) and yarn add --dev webpack@webpack-4 less less-loader@5
but none of them solved the issue later on digging on issue came to know that @zeit\next-css have been deprecated, below is the next.config.js reference please let me know how to resolve issue, how to update code in config file so that I can use built-in CSS support of nextJs itself leaving behind the deprecated one, Very very Thanks in Advance.
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const path = require('path');
module.exports = withCSS(
withSass({
webpack: (config) => {
config.node = {
fs: 'empty'
};
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
limit: 1000000,
name: '[name].[ext]'
}
},
{
loader: 'url-loader',
options: {
limit: 1000000,
name: '[name].[ext]'
}
}
]
});
module.exports = {
resolve: {
alias: {
TweenLite: path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
TweenMax: path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
TimelineLite: path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
TimelineMax: path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
ScrollMagic: path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
'animation.gsap': path.resolve(
'node_modules',
'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'
),
'debug.addIndicators': path.resolve(
'node_modules',
'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'
)
}
}
};
return config;
}
})
);