We Keep Coding

Cannot set property 'styles' of undefined in NextJs, I'm facing this issue whenever I start server after installing any packages or simply 'npm i'

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;
}
})
);

NextJS with CSS/ SCSS loaders

I'm completely new to NextJS, trying out its SSR features.
I want to setup loaders where I can load 4 types of files into the app:
*.module.css;
*.module.scss;
*.css;
*.scss;
1 and 2 are loaded with CSS modules and 3 and 4 just as regular CSS/SCSS.
How can I do this with #zeit/next-css and #zeit/next-sass?

Currently next-css / next-sass are not supporting this feature, but you can add it by your self to the webpack config.
I've similar but the opposite option, I'm enabling module: true for all imports and for all files that I want to be treated as regular css in (ie. global), I need to add, .global suffix.
This is my modification to the webpack config:
// next.config.js
config.module.rules.forEach(rule => {
if (rule.test && rule.test.toString().includes('.scss')) {
rule.rules = rule.use.map(useRule => {
if (typeof useRule === 'string') {
return {
loader: useRule,
};
}
if (useRule.loader.startsWith('css-loader')) {
return {
oneOf: [
{
test: /\.global\.scss$/,
loader: useRule.loader,
options: {
...useRule.options,
modules: false,
},
},
{
loader: useRule.loader,
options: useRule.options,
},
],
};
}
return useRule;
});
delete rule.use;
}
});
This piece of code looks for the css-loader config and modifies it to support .global.scss suffix.
BTW, you can get updated by following this PR
EDIT
Next version ^9.2.0 has now a native support for css imports with some restrictions.

just wondering whether you've managed to get this working?
I managed to come close with something similar to Felix's answer to get .module.scss and .scss files working with .css only working in #imports within a .scss/.module.scss file. Really would like to be able to get .css files working whilst imported from a component.
My next.config.js file for reference below
const withSass = require('#zeit/next-sass');
const withPlugins = require('next-compose-plugins');
const withSourceMaps = require('#zeit/next-source-maps');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const sassConfig = {
cssModules: true,
cssLoaderOptions: {
importLoaders: 2,
localIdentName: '[local]___[hash:base64:5]',
},
webpack: config => {
config.module.rules.forEach(rule => {
if (rule.test && rule.test.toString().match(/\.(sa|sc)ss$/)) {
rule.rules = rule.use.map(useRule => {
if (typeof useRule === 'string') {
return { loader: useRule };
}
if (useRule.loader.startsWith('css-loader')) {
return {
oneOf: [
{
test: new RegExp(/\module.(sa|sc)ss$/),
exclude: new RegExp(/\.css$/),
loader: useRule.loader,
options: useRule.options,
},
{
loader: useRule.loader,
options: {},
},
],
};
}
return useRule;
});
delete rule.use;
}
});
return config;
},
};
module.exports = withPlugins(
[[withSourceMaps], [withSass, sassConfig]]
);

Can't get the array state value in React

When I try to get value ...this.state.users shows error in react
React Code
handleChange(i, e) {
const { name, value } = e.target;
let users = [...this.state.users];
users[i] = { ...users[i], [name]: value };
this.setState({ users });
}
My webpack file
const path = require('path');
module.exports = (env) => {
const isProduction = env === 'production';
return {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
}
And the error is
ERROR in ./src/components/Index.js
[1] Module build failed: SyntaxError: E:/Program/reactjs/check/client/src/components/Index.js: Unexpected token (47:15)
Please help me to fix this error

It looks like you need to configure babel correctly.
According to this post, you need to make sure that you have the stage-0 preset installed:
npm install --save-dev babel-preset-stage-0
and configured:
{
"presets":[
"es2015", "react", "stage-0"
]
}
However, if you are using Babel v7 or higher you have to use a different installation & configuration:
npm install --save-dev #babel/plugin-proposal-object-rest-spread
and put it into your .babelrc file:
{
"plugins": ["#babel/plugin-proposal-object-rest-spread"]
}

React - Next.js configuration with cssModules and url-loader

I need to configure next.config.js file in order to use in the same time two different loaders.
This is the first:
const withSass = require('#zeit/next-sass');
module.exports = withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
})
And this is the second:
const withSass = require('#zeit/next-sass');
const withCSS = require('#zeit/next-css');
module.exports = withCSS(withSass({
webpack (config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
})
return config
}
}))
Individually they work great!
But I'm not able to combine them in a single rule so that both can work together.
Thanks for your help!!

You should use next-compose-plugins. Here is a link below for additional reference.
How can I combine multiple loaders (CSS, LESS, ttf, etc) in NextJS config file?
But the code below should solve your issue:
Install
yarn add --dev #zeit/next-css
yarn add --dev #zeit/next-sass file-loader url-loader
Update your next.config.js file
const withPlugins = require('next-compose-plugins');
const sass = require("#zeit/next-sass")
const css = require("#zeit/next-css")
const nextConfig = {
webpack: function (config) {
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]'
}
}
})
return config
}
}
module.exports = withPlugins([
[css],
[sass, {
cssModules: true
}]
], nextConfig);
Note: You should now be able to import scss modules like this:
import styles from 'your-file-name.module.scss'
Note: Watch out for vendors libs that are not formatted properly in that case you should import as follows:
import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";

Nextjs-Graphql webpack loader: How to integrate Nextjs with Graphql loader

I am trying to integrate Nextjs with graphql-tag/loader, This is my next.config.js file:
const withSass = require('#zeit/next-sass')
const graphqlLoader = require('graphql-tag/loader')
module.exports = withSass({
webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
config.module.rules.push({
test: /\.(graphql|gql)$/,
loader: graphqlLoader,
exclude: /node_modules/
})
return config
}
})
I am unable to build, I get the error below:
/HOME/node_modules/graphql-tag/loader.js:43
this.cacheable();
^
TypeError: Cannot read property 'cacheable' of undefined
Please help.

i made it working in my setup as follows. Not sure what is wrong in your code, but you can try it and see if it is working :) You can use next js plugin for it. Maybe the order of plugins matter. Here is my config. There are some additional code, but i am sure, that you will get it what you need from it. As for the libraries version "next": "6.1.1", "next-optimized-images": "1.4.1", "next-plugin-graphql": "^0.0.1",
const withSass = require("#zeit/next-sass");
const webpack = require("webpack");
const withGraphQL = require("next-plugin-graphql");
const withOptimizedImages = require("next-optimized-images");
module.exports = withOptimizedImages(
withGraphQL(
withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]"
},
webpack: config => {
config.plugins.push(
new webpack.ContextReplacementPlugin(
/graphql-language-service-interface[\\/]dist$/,
new RegExp(`^\\./.*\\.js$`)
)
);
return config;
}
})
)
);
If you would prefer just to modify your code and do not install plugins you can inspire yourself from this next-graphql-plugin. The plugin is working for me, the difference from your setup is that they have rule configured as follows
config.module.rules.push({
test: /\.(graphql|gql)$/,
include: [dir],
exclude: /node_modules/,
use: [
{
loader: 'graphql-tag/loader'
}
]
})