ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?

[Maseeharazzack]

My code works perfectly in dev environment when I try npm run build I get the following error:

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js? {"omit":0,"remove":true}!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/app/communication-center/comm-center .component.scss Module build failed: .all-common-grid { ^ Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex" in D:\dev\Greater_Giving\CommunicationCenter\src\app\communication-center\comm-center.component.scss (line 1, column 1) @ ./src/app/communication-center/comm-center.component.scss 2:21-317 @ ./src/app/communication-center/comm-center.component.ts @ ./src/app/communication-center/comm-center.module.ts @ ./src/app/app-routing.module.ts @ ./src/app/app.module.ts @ ./src/app/main.ts

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js? {"omit":0,"remove":true}!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/style.scss Module build failed: / Imported Stylesheet / ^ Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex" in D:\dev\Greater_Giving\CommunicationCenter\src\assets\style.scss (line 1, column 1) @ ./src/assets/style.scss 2:21-286

Following is my code

webpack.config.common.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var helpers = require('./helpers');
var webpack = require('webpack');

module.exports = {
entry: {
'app': './src/app/main.ts',
'polyfills': './src/polyfills.ts',
'styles' : './src/assets/style.scss'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: {
transpileOnly: true
}
},
{ loader: 'angular2-template-loader' },
{ loader: 'angular-router-loader' }
]
},
{
test: /.html$/,
loaders: ['html-loader']
},
{
test: /.scss$/,
exclude: [ /node_modules/, helpers.root('src', 'style.scss') ],
use: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
},
{
test: /.scss$/ ,
use: ExtractTextPlugin.extract({
use: 'css-loader!sass-loader'
})
},
{
test: /.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,
use: 'file-loader?name=assets/[name].[hash].[ext]'
}
],
exprContextCritical: false
},
plugins: [
new ExtractTextPlugin({ // define where to save the file
filename: 'styles/[name].bundle.css',
allChunks: true,
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CopyWebpackPlugin([
{
from: 'node_modules/froala-editor/css/',
to: 'assets/froala-editor/css/',
},
{
from: 'node_modules/font-awesome/css/font-awesome.min.css',
to: 'assets/font-awesome/css/font-awesome.min.css',
},
{
from: 'node_modules/font-awesome/fonts',
to: 'assets/font-awesome/fonts'
}
]),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};

webpack.config.prod.js
var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('styles.[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
}),
new webpack.LoaderOptionsPlugin({
options: {
htmlLoader: {
minimize: false // workaround for ng2
}
}
}),
new UglifyJSPlugin()
]
});

[mohammadjavadnouri]

I don't remember what I did, but now it works! =))))))))))))

[TheBigSteph]

@juanitaV try npm rebuild node-sass

Thanks, that works for me

[rgurgul]

for me works only downgrade postcss-loader to v3 npm i postcss-loader@v3

[sivaraman-s]

Re-installing webpack solved the issue for me. npm install --save-dev webpack

I tried installing webpack and got several errors, then I uninstalled that. Now I got into huge mess ):

[alexander-akait]

Don't use extract-text-webpack-plugin, please migrate on mini-css-extract-plugin

[mohsenmhs]

I tried update node version and it works. 💯

[ismail-dinar]

@juanitaV try npm rebuild node-sass

This worked for me. Thanks 😊

[Catalin29Ro]

I have this issues , i cannot find any ways to fix it I have M1 chip

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (93) For more information on which environments are supported please see: https://github.com/sass/node-sass/releases/tag/v4.14.1 at module.exports (/Users/catalinmocanu/Work/tuprenotalo2/back_office/node_modules/node-sass/lib/binding.js:13:13) at Object. (/Users/catalinmocanu/Work/tuprenotalo2/back_office/node_modules/node-sass/lib/index.js:14:35) at Module._compile (node:internal/modules/cjs/loader:1108:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10) at Module.load (node:internal/modules/cjs/loader:988:32) at Function.Module._load (node:internal/modules/cjs/loader:828:14) at Module.require (node:internal/modules/cjs/loader:1012:19) at require (node:internal/modules/cjs/helpers:93:18) at getDefaultSassImpl (/Users/catalinmocanu/Work/tuprenotalo2/back_office/node_modules/sass-loader/dist/index.js:198:10) at Object.loader (/Users/catalinmocanu/Work/tuprenotalo2/back_office/node_modules/sass-loader/dist/index.js:80:29)

[alexander-akait]

Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (93)

Please migrate on sass from node-sass

[Ashok1602]

I got this issue when I tried to start my react app. uncaught error: Module build failed (from ./node_modules/postcss-loader/src/index.js)

./node_modules/perfect-scrollbar/css/perfect-scrollbar.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/perfect-scrollbar/css/perfect-scrollbar.css) TypeError: Cannot read property 'prefix_exceptions' of undefined at Array.map ()

[mumarse]

./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css

i am facing this issue

[Nabin0433]

./src/Style/style.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/Style/style.scss) Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

[saulwolfdev]

I recommend this environment width webpack 5 , beacuse i am used, postcss, sass, babel, etc

https://github.com/saulwolfdev/webpack-5

[Jihaneharimech]

Nothing solved my problem yet

[equicy]

已收到  我会尽快回复您

[na-zi-ya]

I am struggling with this too... tried above all solutions but didnt work for me...

[Jittojoyes98]

I too have this issue? Any fix for this?

[equicy]

已收到  我会尽快回复您

[KanhaiyaJayas]

./src/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss)

[lance2k]

Remove sass first, then install it as dev dependency

1. npm uninstall sass or npm uninstall -g sass
2. npm install sass sass-loader --save-dev

This fix it for me

[Jittojoyes98]

The same situation,no change after trying.

[Jittojoyes98]

Solved, it was the issue with bringing the bundle.js file in index.html

here is the code.

<!DOCTYPE html>

[solohcode]

if your're facing this error and it has to do with tailwind css styling, i'll suggest you do a search for the main error cause on your IDE and take the matches entirely off your code then restart the app. it worked for me

[YonatanZviLevy]

Has anyone encountered this installing the @canvasjs/charts package for Angular 15? I tried updating the npm version as well as uninstalling and reinstalling and nothing helps, And I reinstalled webpack and it didn't help, Does anyone have a solution?

[umhoai]

you can check installed extension .sass (only)

[equicy]

已收到  我会尽快回复您

[equicy]

已收到  我会尽快回复您

[BrankoSrokuca]

It solved my problem because I transferred that file from my tsk file where I dragged the colors to .scss and now everything works, it doesn't give me that error.

so try changing the file extension to .scss

[akanksha356]

./src/pages/auth/auth.module.scss (./node_modules/css-loader??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-6-3!./src/pages/auth/auth.module.scss) To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace.

[wbisschoff]

This worked for me (https://github.com/webpack-contrib/sass-loader/issues/530#issuecomment-565719388)

Above comment worked for me....

It is the compatibility of the node-sass you are using - I was using 4.9 for an old project so downloaded and installed node 10.18.0 using NVM - Node Version Manager here - (https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide)

check node & node-sass compatibility.

NodeJS | Minimum node-sass version | Node Module Node 13 | 4.13+ | 79 Node 12 | 4.12+ | 72 Node 11 | 4.10+ | 67 Node 10 | 4.9+ | 64 Node 8 | 4.5.3+ | 57

I changed the corresponding node-sass version to my NodeJs version. It worked

[equicy]

已收到  我会尽快回复您

[Nagendrak12]

ERROR in ./src/styles/experienceStyles.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/styles/experienceStyles.scss) Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):

having this issue i have done above all methods but its not worked for me

[jesuitdelray]

tried all above, but still have this error:

Cannot read properties of undefined (reading 'indexOf') node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/app/styles/index.scss

[theoturner]

For those experiencing this problem recently, node LTS has updated from v18 to v20. This breaks legacy node-sass installs. Downgrading to node v18 fixed this for me.

[KamilMr]

@theoturner thanks. Using node v18 solved my issue.

[equicy]

已收到  我会尽快回复您

[tarikulker-js]

downgrading react-script to ^3.4.3 solved the issue for me. good luck!

[equicy]

已收到  我会尽快回复您

[LeulAria]

已收到  我会尽快回复您

Received I will reply to you as soon as possible bot

[Sibusiso07]

Hi, non of the solutions have are working for me, here is the error that I am getting:

ERROR in ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[4]!./src/App.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Undefined variable. ╷ 12 │ padding: $bpk-spacing-lg * 2; │ ^^^^^^^^^^^^^^^ ╵ src\App.scss 12:14 root stylesheet

[GariBisht]

Angular Live Development Server is listening on localhost:4203, open your browser on http://localhost:4203/ ** 10% building modules 6/6 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4203/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: 404s will fallback to //index.html

Date: 2024-04-12T10:30:08.821Z Hash: 614a0725fa656f44500a Time: 7424ms chunk {main} main.js, main.js.map (main) 433 kB [entry] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 636 kB [entry] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 425 kB [entry] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.3 MB [initial] [rendered]

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/dist/cjs.js??ref--14-3!./src/styles.scss) Module build failed: Error: Node Sass version 9.0.0 is incompatible with ^4.0.0. at getRenderFuncFromSassImpl (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:165:13) at Object.loader (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:79:18) ERROR in ./src/app/todo/todo.component.scss Module build failed: Error: Node Sass version 9.0.0 is incompatible with ^4.0.0. at getRenderFuncFromSassImpl (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:165:13) at Object.loader (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:79:18)

Please suggest me some solution I applied all methods.

[ghost160111]

Angular Live Development Server is listening on localhost:4203, open your browser on http://localhost:4203/ ** 10% building modules 6/6 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4203/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: 404s will fallback to //index.html

Date: 2024-04-12T10:30:08.821Z Hash: 614a0725fa656f44500a Time: 7424ms chunk {main} main.js, main.js.map (main) 433 kB [entry] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 636 kB [entry] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 425 kB [entry] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.3 MB [initial] [rendered]

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/dist/cjs.js??ref--14-3!./src/styles.scss) Module build failed: Error: Node Sass version 9.0.0 is incompatible with ^4.0.0. at getRenderFuncFromSassImpl (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:165:13) at Object.loader (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:79:18) ERROR in ./src/app/todo/todo.component.scss Module build failed: Error: Node Sass version 9.0.0 is incompatible with ^4.0.0. at getRenderFuncFromSassImpl (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:165:13) at Object.loader (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:79:18)

Please suggest me some solution I applied all methods.

download node-sass 9.0.0 which is the last version, but it is recommended not to use node-sass, use just sass, because that worked for me, node-sass is deprecated package!

[ghost160111]

Angular Live Development Server is listening on localhost:4203, open your browser on http://localhost:4203/ ** 10% building modules 6/6 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4203/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: 404s will fallback to //index.html

Date: 2024-04-12T10:30:08.821Z Hash: 614a0725fa656f44500a Time: 7424ms chunk {main} main.js, main.js.map (main) 433 kB [entry] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 636 kB [entry] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 425 kB [entry] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.3 MB [initial] [rendered]

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/dist/cjs.js??ref--14-3!./src/styles.scss) Module build failed: Error: Node Sass version 9.0.0 is incompatible with ^4.0.0. at getRenderFuncFromSassImpl (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:165:13) at Object.loader (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:79:18) ERROR in ./src/app/todo/todo.component.scss Module build failed: Error: Node Sass version 9.0.0 is incompatible with ^4.0.0. at getRenderFuncFromSassImpl (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:165:13) at Object.loader (/home/garima/Project/My-Angular-Project/angular-animation/node_modules/sass-loader/dist/index.js:79:18)

Please suggest me some solution I applied all methods.

Like I said the best solution for this error, is deleting node-sass, if you have webpack configuration, configure correctly everything there, I mean loaders, that loads CSS, SASS, etc. And download just 'sass' package.