Error triying of compile a single sass file

s4malve commented 3 years ago

Bug report

Actual Behavior

I have a template of webpack for my projects maded with react and in the past worked perfectly, but now cant compile a single sass file, i really dont now what i'm dong wrong

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: document is not defined

Expected Behavior

Compile without errors because the sass file that i try to compile is empty

How Do We Reproduce?

I have a repo with the actual issue, you just should clone and run npm start

Please paste the results of `npx webpack-cli info` here, and mention other relevant information

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: document is not defined
    at Object.insertStyleElement (/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/style-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/css-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/sass-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/src/components/App/main.scss:322:17)
    at Object.domAPI (/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/style-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/css-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/sass-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/src/components/App/main.scss:417:30)
    at addElementStyle (/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/style-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/css-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/sass-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/src/components/App/main.scss:213:21)
    at modulesToDom (/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/style-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/css-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/sass-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/src/components/App/main.scss:197:21)
    at module.exports (/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/style-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/css-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/sass-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/src/components/App/main.scss:234:25)
    at /home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/style-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/css-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/sass-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/src/components/App/main.scss:575:120
    at /home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/style-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/css-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/sass-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/src/components/App/main.scss:582:3
    at Object.<anonymous> (/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/style-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/css-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/sass-loader/dist/cjs.js!/home/s4malve/code/challenges/devChallenges-recipe-page/src/components/App/main.scss:585:12)
    at Module._compile (/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at evalModuleCode (/home/s4malve/code/challenges/devChallenges-recipe-page/node_modules/mini-css-extract-plugin/dist/utils.js:46:10)

alexander-akait commented 3 years ago

Wrong loader order:

{
  test: /\.(sc|sa|c)ss/i,
  use: [
    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader',
],
},

in your example, but after fixing this, all works fine. Based on your error, you apply style-loader and mini-css-extract-plugin together, but you should not do it, check your module order. We have small example https://github.com/webpack-contrib/mini-css-extract-plugin#recommend, you don't need MiniCssExtractPlugin when you use style-loader. Feel free to feedback.

s4malve commented 3 years ago

Now that you mentioned it I thought the same and after fix it and push the changes, I have this error

Compiled with problems:

Error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "// Imports": expected 1 selector or at-rule, was "import ___CSS_LOADE"
        on line 1 of src/components/App/main.scss
>> // Imports

I clarify that my main.scss file is still empty

alexander-akait commented 3 years ago

If you need help, please provide repo with reproducible problem, your repo works fine

s4malve commented 3 years ago

my repo

alexander-akait commented 3 years ago

Works fine:

* {
    margin: 0;
}

on my page using npm run start

alexander-akait commented 3 years ago

How you run code? Do you open a browser?

s4malve commented 3 years ago

no just run npm start

s4malve commented 3 years ago

i try to run just css but either and with styled-components run perfectly

alexander-akait commented 3 years ago

check your extensions, document is available in any browser, I can't reproduce

s4malve commented 3 years ago

In my environment it worked commenting the style loader and the sass loader (that is, working only with css)

//...same config

{
  test: /\.(sc|sa|c)ss/i,
  use: [
    MiniCssExtractPlugin.loader,
    // devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
    // 'sass-loader',
    'css-loader',
  ],
},

And with sass but again, just with style-loader

{
  test: /\.(sc|sa|c)ss/i,
  use: [
    // MiniCssExtractPlugin.loader,
    // devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
    'sass-loader',
    'style-loader',
    'css-loader',
  ],
},

alexander-akait commented 3 years ago

Again, sass-loader should be after css-loader, please use:

  devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
  'css-loader',
  'sass-loader',

if you want to always extract remove style-loader

s4malve commented 3 years ago

|

Again, sass-loader should be after css-loader, please use:
  devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
  'css-loader',
  'sass-loader',
if you want to always extract remove style-loader

You are absolutely right, sorry for my stupidity :)

webpack-contrib / mini-css-extract-plugin