Completely broken with webpack 2.2

[aight8]

,/xxx/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!/xxx/node_modules/style-loader/index.js!/Users/xxxxx/xxxx/xxxx/frontend/node_modules/css-loader/index.js!/Users/xxxx/xxxx/xxxxx/node_modules/sass-loader/index.js!/Users/xxxx/jjd/xxxxx.scss doesn't export content,./src/apps/platform/content/home/style.scss
Module build failed:   Error: 
  
  - NormalModule.js:141 
    [frontend]/[webpack]/lib/NormalModule.js:141:35
  
  - LoaderRunner.js:359 
    [frontend]/[loader-runner]/lib/LoaderRunner.js:359:11
  
  - LoaderRunner.js:225 
    [frontend]/[loader-runner]/lib/LoaderRunner.js:225:18
  
  - LoaderRunner.js:138 runSyncOrAsync
    [frontend]/[loader-runner]/lib/LoaderRunner.js:138:3
  
  - LoaderRunner.js:224 iterateNormalLoaders
    [frontend]/[loader-runner]/lib/LoaderRunner.js:224:2
  
  - LoaderRunner.js:213 iterateNormalLoaders
    [frontend]/[loader-runner]/lib/LoaderRunner.js:213:10
  
  - LoaderRunner.js:228 
    [frontend]/[loader-runner]/lib/LoaderRunner.js:228:3
  
  - LoaderRunner.js:106 context.callback
    [frontend]/[loader-runner]/lib/LoaderRunner.js:106:13
  
  - index.js:289 Object.onRender
    [frontend]/[sass-loader]/index.js:289:9
  
  - async.js:2234 Object.<anonymous>
    [frontend]/[sass-loader]/[async]/dist/async.js:2234:31

This error is outputed for every style import and the build fail.
Using webpack 2.2 and extract-text-webpack-plugin beta 5.
The configuration is correct, tried every kind of examples for v2.
I want to use css with postcss, sass - however for testing I tried without those. But the same error.

[michael-ciniawsky]

@aight8 webpack.config.js and one component you import styles to please

[cloudlena]

I'm having the same error using the Angular-CLI Webpack config and importing a single .css file from a .scss file.

[michael-ciniawsky]

@mastertinner webpack.config.js and one component you import styles to please :)

Did angluar-cli already update to extract-text-plugin v2-rc? Could you open an issue there aswell either asking to update or to investigate further?

[aight8]

I sadly don't know how I fixed this issue, I deleted the nodes_modules and cache etc. but maybe it was a slight config change. I try to put here more infos when I know more... But the issue occurs for several users so it's something important.

[michael-ciniawsky]

@aight8 Where do yu setup postcss options, does it work without it? Could you please post the config postcss.config.js, webpack.config.js, ?angularrc (I don't use angular 😛)

[aight8]

angularrc I dont use either ;) The post css is basically just that:

module.exports = context => {
  return {
    plugins: [
      require('lost'), // http://lostgrid.org/docs.html
    ],
  };
};

The config is generated and is quite complex. I will extract the effective generated client webpack config when I'm back on this tasks. Today I don't found any other solution to print out a generic form of configs other than a messy json - basically because objects serializations are unpredictable. For any solution suggestions I would be thankful - already noted this here: webpack/webpack-cli#38

[cloudlena]

@michael-ciniawsky, the Angular-CLI doesn't let you configure your own webpack.config.js but I believe that it's using this config: https://github.com/angular/angular-cli/tree/master/packages/angular-cli/models/webpack-configs. In our case, we are importing a .scss which contains the following line: @import some/file.css. That's where the problem happens.

[michael-ciniawsky]

In our case, we are importing a .scss which contains the following line: @import some/file.css. That's where the problem happens.

@mastertinner thx, does SASS support plain .css @import(s) ? I will take a deeper look at the cli webpack config(s) when I have time

[cloudlena]

@michael-ciniawsky, yes it does. It has worked up until a few days ago :-)

For reference, here's my full error output. If we use extract-text-webpack-plugin@2.0.0-beta.5, we don't get any errors and everything works fine.

$ ng build --prod --aot
Hash: 8c8abf7ee42b1fc81b35
Time: 57497ms
chunk    {0} main.1acfd2ff751408f001ae.bundle.js (main) 1.36 MB {3} [initial] [rendered]
chunk    {1} scripts.400d08c9e83f80aa6eaa.bundle.js (scripts) 1.51 MB {4} [initial] [rendered]
chunk    {2}  (styles) 1.03 kB {4} [initial] [rendered]
chunk    {3} vendor.f1f0ee65d2ed24978bcd.bundle.js (vendor) 3.07 MB [initial] [rendered]
chunk    {4} inline.5e4064e2fd8708c5bfdb.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module build failed:
@import 'node_modules/normalize.css/normalize';
^
      File to import not found or unreadable: node_modules/normalize.css/normalize.
Parent style sheet: /Users/taafuto1/js/ec-portal/node_modules/sdx/stylesheets/sdx.scss
      in /Users/taafuto1/js/ec-portal/node_modules/sdx/stylesheets/sdx.scss (line 8, column 1)
 @ ./src/styles.scss 4:14-159
 @ multi ./src/styles.scss

ERROR in ./src/styles.scss
Module build failed: Error
    at /Users/taafuto1/js/ec-portal/node_modules/webpack/lib/NormalModule.js:141:35
    at /Users/taafuto1/js/ec-portal/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/taafuto1/js/ec-portal/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/taafuto1/js/ec-portal/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.onRender [as callback] (/Users/taafuto1/js/ec-portal/node_modules/sass-loader/index.js:273:13)
    at Object.<anonymous> (/Users/taafuto1/js/ec-portal/node_modules/async/dist/async.js:2234:31)
    at apply (/Users/taafuto1/js/ec-portal/node_modules/async/dist/async.js:20:25)
    at Object.<anonymous> (/Users/taafuto1/js/ec-portal/node_modules/async/dist/async.js:56:12)
    at Object.callback (/Users/taafuto1/js/ec-portal/node_modules/async/dist/async.js:840:16)
    at options.error (/Users/taafuto1/js/ec-portal/node_modules/node-sass/lib/index.js:289:32)

ERROR in /Users/taafuto1/js/ec-portal/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":false,"publicPath":""}!/Users/taafuto1/js/ec-portal/node_modules/style-loader/index.js!/Users/taafuto1/js/ec-portal/node_modules/css-loader/index.js!/Users/taafuto1/js/ec-portal/node_modules/postcss-loader/index.js!/Users/taafuto1/js/ec-portal/node_modules/sass-loader/index.js!/Users/taafuto1/js/ec-portal/src/styles.scss doesn't export content

ERROR in   TypeError: Cannot read property 'match' of undefined

  - suppress-entry-chunks-webpack-plugin.js:44 filterFn
    [ec-portal]/[angular-cli]/plugins/suppress-entry-chunks-webpack-plugin.js:44    :76

  - Array.filter

  - suppress-entry-chunks-webpack-plugin.js:47 Compilation.<anonymous>
    [ec-portal]/[angular-cli]/plugins/suppress-entry-chunks-webpack-plugin.js:47    :59

  - Tapable.js:208 Compilation.applyPluginsAsyncWaterfall
    [ec-portal]/[tapable]/lib/Tapable.js:208:13

  - util.js:16 Compilation.tryCatcher
    [ec-portal]/[bluebird]/js/release/util.js:16:23


  - index.js:642
    [ec-portal]/[html-webpack-plugin]/index.js:642:12

  - index.js:152
    [ec-portal]/[html-webpack-plugin]/index.js:152:16

  - util.js:16 tryCatcher
    [ec-portal]/[bluebird]/js/release/util.js:16:23

  - promise.js:510 Promise._settlePromiseFromHandler
    [ec-portal]/[bluebird]/js/release/promise.js:510:31

  - promise.js:567 Promise._settlePromise
    [ec-portal]/[bluebird]/js/release/promise.js:567:18

  - promise.js:612 Promise._settlePromise0
    [ec-portal]/[bluebird]/js/release/promise.js:612:10

  - promise.js:691 Promise._settlePromises
    [ec-portal]/[bluebird]/js/release/promise.js:691:18

  - async.js:133 Async._drainQueue
    [ec-portal]/[bluebird]/js/release/async.js:133:16

  - async.js:143 Async._drainQueues
    [ec-portal]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues
    [ec-portal]/[bluebird]/js/release/async.js:17:14

[aight8]

I realised that if I using css-loader v0.14.x it's working again. don't know if this is the problem.

[bebraw]

Can anyone confirm this? There's not enough information to debug. Ideally you should be able to isolate a small project to study. Otherwise this won't progress.

[erkiesken]

OK, after digging through a lot of things I figured out why my build suddenly broke with same "... .css doesn't export content" errors.

Turns out I accidentally ran yarn clean instead of yarn run clean (my custom script defined in package.json). This created a local .yarnclean file which blacklisted .*.yml files and thus .svgo.yml was removed from css-loader > cssnano > postcss-svgo > svgo dependency installation. This dep was triggered when I was using ExtractTextPlugin.extract and css-loader with minimize: true option (thus triggering internally svgo for svg-minimization, and svgo fails if it can't load its .svgo.yml config file).

This seems to be a known issue in yarn, see yarnpkg/yarn#1051

Fix is to either remove .yarnclean or add !.svgo.yml in there and do a rm -rf node_modules && yarn.

I don't think this is an issue with npm based installs, since there's no cleaning feature there.

[bebraw]

Closing as there's no project to debug. Feel free to re-open if you can provide one.