Help with `css-loader` error

[t47io]

Hi I saw this error when using webpack@4 and css-loader@2:

ERROR in ./applications/main/stylesheets/PortfolioSection.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: Cannot read property 'type' of undefined
    at /Users/stian/Desktop/t47io_main/node_modules/css-loader/node_modules/postcss-modules-local-by-default/index.js:389:21
    at callback (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/container.es6:208:18)
    at callback (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/container.es6:110:18)
    at Root.callback [as each] (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/container.es6:76:16)
    at Root.each (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/container.es6:107:17)
    at Root.walk [as walkRules] (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/container.es6:206:19)
    at /Users/stian/Desktop/t47io_main/node_modules/css-loader/node_modules/postcss-modules-local-by-default/index.js:384:9
    at LazyResult.plugin [as run] (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/lazy-result.es6:352:14)
    at LazyResult.run [as asyncTick] (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/lazy-result.es6:280:26)
    at LazyResult.asyncTick (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/lazy-result.es6:292:14)
    at asyncTick (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/lazy-result.es6:317:12)
    at new Promise (<anonymous>)
    at LazyResult.async (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/lazy-result.es6:314:23)
    at LazyResult.async [as then] (/Users/stian/Desktop/t47io_main/node_modules/postcss/lib/lazy-result.es6:201:17)
    at Object.loader (/Users/stian/Desktop/t47io_main/node_modules/css-loader/dist/index.js:122:6)
    at runLoaders (/Users/stian/Desktop/t47io_main/node_modules/webpack/lib/NormalModule.js:301:20)
    at /Users/stian/Desktop/t47io_main/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/stian/Desktop/t47io_main/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/stian/Desktop/t47io_main/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at process.then.catch.error (/Users/stian/Desktop/t47io_main/node_modules/css-loader/dist/index.js:264:5)
 @ ./applications/main/containers/PortfolioSection.jsx 24:0-59
 @ ./applications/main/containers/index.jsx
 @ ./build/render/server.jsx
 @ multi bootstrap-loader ./build/render/server.jsx

So I tracked to the line in postcss-modules-local-by-default and added a console.log(JSON.stringify(rule) for debugging. Turned out this rule is lacking parent somehow, but I don't have much clue why. The following dump of the problematic rule object contains the raw CSS, hope that would help:

{
  "raws": {
    "before": "",
    "after": "",
    "between": "",
    "semicolon": false,
    "left": "",
    "right": ""
  },
  "type": "rule",
  "nodes": [
    {
      "raws": {
        "before": "",
        "after": "",
        "between": ":",
        "important": "!important"
      },
      "type": "decl",
      "source": {
        "start": {
          "line": 47,
          "column": 5
        },
        "input": {
          "css": ".PORTFOLIO__menu {\n  text-align: center;\n  overflow: hidden;\n  margin-top: 1.5rem;\n  margin-bottom: 3rem; }\n  .PORTFOLIO__menu .PORTFOLIO__filters {\n    list-style: none outside none;\n    text-align: center; }\n    .PORTFOLIO__menu .PORTFOLIO__filters .PORTFOLIO__filter-item {\n      display: inline-block;\n      cursor: pointer;\n      will-change: transform, opacity; }\n      .PORTFOLIO__menu .PORTFOLIO__filters .PORTFOLIO__filter-item.active .PORTFOLIO__filter-link {\n        background: #72a603;\n        color: #fff;\n        font-weight: 900; }\n      .PORTFOLIO__menu .PORTFOLIO__filters .PORTFOLIO__filter-item .PORTFOLIO__filter-link {\n        color: #363940;\n        background: transparent;\n        display: inline-block;\n        margin: 0.25rem;\n        padding: 0.5rem 0.75rem;\n        text-decoration: none;\n        text-transform: uppercase; }\n        .PORTFOLIO__menu .PORTFOLIO__filters .PORTFOLIO__filter-item .PORTFOLIO__filter-link:hover {\n          background: #9fc906;\n          color: #fff; }\n\n.PORTFOLIO__content {\n  overflow: hidden; }\n\n.PORTFOLIO__div div {\n  padding: 0;\n  margin: 0 auto; }\n\n.PORTFOLIO__item {\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 5;\n  overflow: hidden; }\n  .PORTFOLIO__item .SVG {\n    border: 1px solid #cfd8dc;\n    margin-left: -1px;\n    margin-top: -1px;\n    width: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n    z-index: 6;\n    cursor: pointer;\n    transition-duration: 1s; }\n  .PORTFOLIO__item .PORTFOLIO__text {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n    text-align: center;\n    opacity: 0;\n    color: transparent;\n    background: none repeat scroll 0 0 rgba(114, 166, 3, 0.75);\n    transition-duration: 0.6s;\n    transform: scale(0); }\n  .PORTFOLIO__item:hover .SVG {\n    transform: scale(1.5); }\n    .PORTFOLIO__item:hover .SVG .SVG--1,\n    .PORTFOLIO__item:hover .SVG .SVG--2 {\n      opacity: 0;\n      visibility: hidden; }\n  .PORTFOLIO__item:hover .PORTFOLIO__text {\n    opacity: 1;\n    padding: 0 2rem;\n    color: #fff;\n    transform: scale(1); }\n    .PORTFOLIO__item:hover .PORTFOLIO__text .PORTFILIO__text-link {\n      color: inherit;\n      display: block;\n      font-size: 2rem;\n      font-weight: 900;\n      margin-top: 30%;\n      padding-bottom: 1.5rem;\n      text-decoration: none;\n      font-variant: small-caps; }\n    .PORTFOLIO__item:hover .PORTFOLIO__text .PORTFILIO__text-description {\n      font-size: 1.25em;\n      font-weight: normal;\n      line-height: 1.5rem;\n      margin: 0;\n      padding: 0; }\n\n.PORTFOLIO__power-by .PORTFOLIO__find-more {\n  line-height: 1.5rem; }\n\n.PORTFOLIO__power-by .PORTFOLIO__brands {\n  line-height: 2.5rem;\n  padding: 1rem 0;\n  margin: 0; }\n\n.PORTFOLIO__power-by .PORTFOLIO__brand-item {\n  list-style: none;\n  display: inline-block;\n  will-change: transform, opacity; }\n\n.PORTFOLIO__power-by svg {\n  height: 2.5rem;\n  width: 2.5rem;\n  margin: 0 0.5rem; }\n  .PORTFOLIO__power-by svg :global .brand-logo__open,\n  .PORTFOLIO__power-by svg :global .brand-logo__filled,\n  .PORTFOLIO__power-by svg :global .brand-logo__extra {\n    transition-duration: 0.25s; }\n  .PORTFOLIO__power-by svg :global .brand-logo__open {\n    fill: #eee;\n    stroke: #eee; }\n  .PORTFOLIO__power-by svg :global .brand-logo__filled {\n    fill: #9fc906;\n    stroke: #9fc906; }\n  .PORTFOLIO__power-by svg :global .brand-logo__extra {\n    fill: #888; }\n  .PORTFOLIO__power-by svg:hover :global .brand-logo__open,\n  .PORTFOLIO__power-by svg:hover :global .brand-logo__extra {\n    fill: #9fc906;\n    stroke: #9fc906; }\n  .PORTFOLIO__power-by svg:hover :global .brand-logo__filled {\n    fill: #888;\n    stroke: #888; }\n\n@media only screen and (max-width: 767px) {\n  .PORTFOLIO__wrapper {\n    padding: 0; } }\n",
          "hasBOM": false,
          "file": "/Users/stian/Desktop/t47io_main/applications/main/stylesheets/PortfolioSection.scss"
        },
        "end": {
          "line": 47,
          "column": 16
        }
      },
      "prop": "width",
      "value": "100%",
      "_autoprefixerDisabled": false,
      "_autoprefixerGridStatus": false,
      "important": false
    },
    {
      "raws": {
        "before": "",
        "after": "",
        "between": ":",
        "important": "!important"
      },
      "type": "decl",
      "source": {
        "start": {
          "line": 48,
          "column": 5
        },
        "input": {
          "css": "...", // same as above
          "hasBOM": false,
          "file": "/Users/stian/Desktop/t47io_main/applications/main/stylesheets/PortfolioSection.scss"
        },
        "end": {
          "line": 48,
          "column": 23
        }
      },
      "prop": "position",
      "value": "relative",
      "_autoprefixerDisabled": false,
      "_autoprefixerGridStatus": false,
      "important": false
    },
    {
      "raws": {
        "before": "",
        "after": "",
        "between": ":",
        "important": "!important"
      },
      "type": "decl",
      "source": {
        "start": {
          "line": 49,
          "column": 5
        },
        "input": {
          "css": "...", // same as above
          "hasBOM": false,
          "file": "/Users/stian/Desktop/t47io_main/applications/main/stylesheets/PortfolioSection.scss"
        },
        "end": {
          "line": 49,
          "column": 11
        }
      },
      "prop": "top",
      "value": "0",
      "_autoprefixerDisabled": false,
      "_autoprefixerGridStatus": false,
      "important": false
    },
    {
      "raws": {
        "before": "",
        "after": "",
        "between": ":",
        "important": "!important"
      },
      "type": "decl",
      "source": {
        "start": {
          "line": 50,
          "column": 5
        },
        "input": {
          "css": "...", // same as above
          "hasBOM": false,
          "file": "/Users/stian/Desktop/t47io_main/applications/main/stylesheets/PortfolioSection.scss"
        },
        "end": {
          "line": 50,
          "column": 12
        }
      },
      "prop": "left",
      "value": "0",
      "_autoprefixerDisabled": false,
      "_autoprefixerGridStatus": false,
      "important": false
    }
  ],
  "selector": ".PORTFOLIO__item,.PORTFOLIO__item .SVG",
  "lastEach": 2,
  "indexes": {}
}

Any hint is appreciated, thanks a lot in advance!!

[alexander-akait]

Can your provide full example of PortolioSection.scss?

[t47io]

https://github.com/t47io/t47io_main/blob/master/applications/main/stylesheets/PortfolioSection.scss

[alexander-akait]

@t47io can't reproduce, please create minimum reproducible test repo, thanks!

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!

[kettanaito]

Hi. I'm experiencing the very same issue in one of my private applications.

Stack trace:

ERROR in ./src/client/assets/styles/main.scss
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: Cannot read property 'type' of undefined
    at /Users/artemzakharchenko/Documents/oss/unstack/node_modules/postcss-modules-local-by-default/index.js:469:21
    at /Users/artemzakharchenko/Documents/oss/unstack/node_modules/postcss-loader/node_modules/postcss/lib/container.js:239:18
    at /Users/artemzakharchenko/Documents/oss/unstack/node_modules/postcss-loader/node_modules/postcss/lib/container.js:135:18
    at Root.each (/Users/artemzakharchenko/Documents/oss/unstack/node_modules/postcss-loader/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/Users/artemzakharchenko/Documents/oss/unstack/node_modules/postcss-loader/node_modules/postcss/lib/container.js:131:17)
    at Root.walkRules (/Users/artemzakharchenko/Documents/oss/unstack/node_modules/postcss-loader/node_modules/postcss/lib/container.js:237:19)
    at /Users/artemzakharchenko/Documents/oss/unstack/node_modules/postcss-modules-local-by-default/index.js:463:9
    at LazyResult.run (/Users/artemzakharchenko/Documents/oss/unstack/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:295:14)
    at LazyResult.asyncTick (/Users/artemzakharchenko/Documents/oss/unstack/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:208:26)
    at LazyResult.asyncTick (/Users/artemzakharchenko/Documents/oss/unstack/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:221:14)
    at runLoaders (/Users/artemzakharchenko/Documents/oss/unstack/node_modules/webpack/lib/NormalModule.js:301:20)
    at /Users/artemzakharchenko/Documents/oss/unstack/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/artemzakharchenko/Documents/oss/unstack/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/artemzakharchenko/Documents/oss/unstack/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at process.then.catch.error (/Users/artemzakharchenko/Documents/oss/unstack/node_modules/css-loader/dist/index.js:258:5)

With some debugging here's the value of the rule which cannot be processed:

{ rule:
   Rule {
     raws:
      { before: '',
        after: '',
        between: '',
        semicolon: false,
        left: '',
        right: '' },
     type: 'rule',
     nodes: [ [Declaration], [Declaration] ],
     selector: 'h1,h2',
     lastEach: 2,
     indexes: {} } }

The mentioned rule doesn't have a parent field, therefore accessing rule.parent.type will throw an exception.

Dependencies

Reproducible running the latest dependencies:

    "css-loader": "2.1.1",
    "extract-css-chunks-webpack-plugin": "4.3.2",
    "postcss-cssnext": "^3.1.0",
    "postcss-csso": "^3.0.0",
    "postcss-loader": "^3.0.0",

Summary

I found out the issue goes away when rolling back to css-loader@1.0.1. The issue is reproducible with the mentioned dependencies above, which include css-loader@2.1.1.

Could you please double check if there were any breaking changes introduced in css-loader@2.1.1 which might have affected the functionality of this package?

I'm okay with issuing a pull request that accounts for this behavior and rule.parent existence prior to operating on it. Adding a safety check solves the issue:

- if(rule.parent.type === 'atrule' ...
+ if(rule.parent && rule.parent.type === 'atrule' ...

I don't see how this check can negatively affect the library's behavior, but please raise your concerns if you think it does.

[alexander-akait]

@t47io can you open new issue with reproducible test repo, thanks!

[kettanaito]

When checked which version of postcss-modules-local-by-default is css-loader using, I can see that it's not the latest version published on npm:

└─┬ css-loader@2.1.1
  └── postcss-modules-local-by-default@2.0.6 

2.0.6 vs 3.x the latest published

I can patch the dependency locally to see if it eliminates the issue.

Outcome

Patching postcss-modules-local-by-default to resolve to 3.0.0 using Yarn resolve doesn't fix the problem.

[kettanaito]

Thank you for quick cooperation, @evilebottnawi. Could you please release the next patch version? In case you use semantic release, please ignore this :)

Resolving the package to the latest master fixes the issue 🎉

[rebeccafennelly]

Hi! Thanks for these. What was the next patch version we needed?
Thanks