refactor: pass a unique compiler name to get child compilation (webpack 3) #483

sokra · 2017-04-13T11:56:59Z

This is recommended after webpack/webpack#4704

It's not good to merge before this PR because it would create absolute paths in the records.

Closes #389

This is recommended after webpack/webpack#4704

jsf-clabot · 2017-04-13T11:56:59Z

All committers have signed the CLA.

codecov · 2017-04-13T11:57:08Z

Codecov Report

Merging #483 into master will decrease coverage by 0.16%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #483      +/-   ##
==========================================
- Coverage   90.38%   90.22%   -0.17%     
==========================================
  Files           6        6              
  Lines         364      358       -6     
  Branches       77       75       -2     
==========================================
- Hits          329      323       -6     
  Misses         35       35

Impacted Files	Coverage Δ
loader.js	`89.74% <100%> (-0.74%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a284f3a...6777369. Read the comment docs.

bstuff · 2017-04-21T09:04:40Z

i've installed extract-text-webpack-plugin and webpack from these commits but i still get the error:

ERROR in   Error: Child compilation failed:
  Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

here's the repository to test: https://github.com/bstuff/require-styles-webpack

HtmlWebpackPlugin Template:

<html>
  <head></head>
  <body>
    <div class="header">Some template stuff</div>
    ${require('./body')}
  </body>
</html>

body/index.js:

import style from './style.styl'; // this line causes the error
import tpl from './tpl.html';

export default tpl;

joshwiens · 2017-05-02T16:44:17Z

Note to @webpack-contrib/org-maintainers - Should be done in conjunction with #477 as a single semver: Major to coincide with the webpack@3.0.0 release.

sokra · 2017-05-06T20:21:38Z

@bstuff It's not automatically fixed. This webpack PR only allow to use the compiler matching in rules:

rules: [
  { test: /\.css$/, oneOf: [
    { compiler: "html-webpack-plugin", loader: "null-loader" },
    { use: ETP.extract(...) }
  ] }
]

sokra · 2017-05-06T20:22:27Z

btw. html-webpack-plugin can do a similar change for webpack 3. cc @jantimon

- refactor: Pass a unique compiler name to get child compilation [483](#483) - refactor: Apply webpack-defaults [542](#542) BREAKING CHANGE: Enforces `engines` of `"node": ">=4.3.0 < 5.0.0 || >= 5.10` - refactor: DeprecationWarning: Chunk.modules [543](#543) BREAKING CHANGE: Updates to `Chunk.mapModules`. This release is not backwards compatible with `Webpack 2.x` due to breaking changes in webpack/webpack#4764 - fix: css generation order issue see: webpack/webpack#5225 BREAKING CHANGE: Enforces `peerDependencies` of `"webpack": "^3.1.0"`.

marmelin · 2017-11-15T10:24:21Z

Hi guys,
I'm using webpack@3.8.1 and still facing this problem.
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

The rules-section looks like this:

 // CSS LOADER
      , {
          test: /\.css$/
        , use: ['css-to-string-loader'].concat(
              ExtractTextPlugin.extract({
                  fallback: 'style-loader'
                , use: ['css-loader']
              })
            )
        }

How ca I implement the above "oneOf" workaround into my loader config?
Is this still necessary?

Thanks.

michael-ciniawsky · 2017-11-15T13:41:13Z

@marmelin remove css-to-string-loader

marmelin · 2017-11-17T10:12:50Z

Thanks,
btw. this is the AOT compiling part - normal JIT compilation works fine!

now without css-to-string-loader the configuration looks like this:

In config file :

...
, { test: /\.css$/
   , use:  ExtractTextPlugin.extract({
           fallback: 'style-loader'
         , use: ['css-loader']
       })
 } ...

as merged object in Config-object output :

...
{ test: /\.css$/,
  use:
   [ { loader: '<path>/node_modules/extract-text-webpack-plugin/dist/loader.js',
       options: [Object] },
     { loader: 'style-loader' },
     { loader: 'css-loader' } ] }

Error is still the same.

internal/streams/legacy.js:59
      throw er; // Unhandled stream error in pipe.
      ^
Error: Error: Child compilation failed:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin,

PS:

Change config and passing compiler option, does not change anything:

, { test: /\.css$/
    , oneOf: [
               { compiler: "html-webpack-plugin", loader: "null-loader"}
             , { use:  ExtractTextPlugin.extract(
                    { fallback: 'style-loader' , use: ['css-loader'] }
                 )
                }
       ]
  }

QUESTION for clarity:

Is the "_filename" in /extract-text-webpack-plugin/dist/loader.js:42:59 the one from the config ...

  , new ExtractTextPlugin({
      filename: **"css/[name].[hash].styles.css"**
     , allChunks: true
    })

... or is this the "index.html" from html-webpack-plugin, which should be generated first?

Greetings.

kimown · 2018-01-27T02:51:51Z

@marmelin I met the same problem, do you have any solution finally, thanks.

marmelin · 2018-04-11T10:07:06Z

Hi @kimown ,
I solved this error along with some others and so I forgot to mention it here :) .

See my repo here:marmelin/ngtools-webpack-error-message-undefined, where I solved the error and explain it.

It boils down to this:

You can't use extract-text-webpack-plugin for components CSS templates, because it does not support / or do not function with "Child compilations". However you can with global css. Use two CSS rules in webpack config: 1) with "css-loader" and second with extract-text-webpack-plugin and include statement, for your global CSS files.

  // COMPONENT CSS LOADER
      , { test: /\.css$/
        , use: ['css-to-string-loader'].concat(['css-loader'])
        }
      // GLOBAL CSS LOADER
      , { test: /\.css$/
         , include: helpers.getPath('src/client/style')
         , use: ['css-to-string-loader'].concat(
            ExtractTextPlugin.extract({
                fallback: 'style-loader'
              , use: ['css-loader']
            })
          )
        }

This is what I did and it solved the error!
Good luck :)

pass a unique compiler name to get child compilation

6777369

This is recommended after webpack/webpack#4704

sokra added the PR: breaking change label Apr 13, 2017

joshwiens added PR: waiting for other changes and removed PR: waiting for other changes labels Apr 13, 2017

michael-ciniawsky added priority: 2 (urgent) semver: Major pr_action: Review type: Refactor labels Apr 22, 2017

michael-ciniawsky added this to the 3.0 milestone Apr 22, 2017

michael-ciniawsky changed the title ~~pass a unique compiler name to get child compilation~~ refactor: pass a unique compiler name to get child compilation Apr 22, 2017

michael-ciniawsky mentioned this pull request Apr 23, 2017

Extract Text Plugin does not work in child compilations #389

Closed

michael-ciniawsky changed the title ~~refactor: pass a unique compiler name to get child compilation~~ refactor: pass a unique compiler name to get child compilation (webpack 3) Apr 25, 2017

michael-ciniawsky added priority: 5 (nice to have) pr_action: Blocked and removed priority: 2 (urgent) pr_action: Review labels Apr 25, 2017

joshwiens self-assigned this May 19, 2017

joshwiens changed the base branch from master to feature/webpack3 June 11, 2017 00:32

joshwiens merged commit 77daf83 into feature/webpack3 Jun 11, 2017

michael-ciniawsky deleted the bugfix/unique-compiler-name branch July 7, 2017 16:58

michael-ciniawsky added status: Approved and removed priority: 5 (nice to have) pr_action: Blocked labels Jul 7, 2017

michael-ciniawsky modified the milestone: 4.0.0 Aug 31, 2017

kimown mentioned this pull request Jan 27, 2018

ETP can't works with oneOf configuration in webpack? #705

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: pass a unique compiler name to get child compilation (webpack 3) #483

refactor: pass a unique compiler name to get child compilation (webpack 3) #483

sokra commented Apr 13, 2017 •

edited by joshwiens

jsf-clabot commented Apr 13, 2017 •

edited

codecov bot commented Apr 13, 2017 •

edited

bstuff commented Apr 21, 2017

joshwiens commented May 2, 2017

sokra commented May 6, 2017

sokra commented May 6, 2017

marmelin commented Nov 15, 2017 •

edited

michael-ciniawsky commented Nov 15, 2017

marmelin commented Nov 17, 2017 •

edited

kimown commented Jan 27, 2018

marmelin commented Apr 11, 2018

refactor: pass a unique compiler name to get child compilation (webpack 3) #483

refactor: pass a unique compiler name to get child compilation (webpack 3) #483

Conversation

sokra commented Apr 13, 2017 • edited by joshwiens

jsf-clabot commented Apr 13, 2017 • edited

codecov bot commented Apr 13, 2017 • edited

Codecov Report

bstuff commented Apr 21, 2017

HtmlWebpackPlugin Template:

body/index.js:

joshwiens commented May 2, 2017

sokra commented May 6, 2017

sokra commented May 6, 2017

marmelin commented Nov 15, 2017 • edited

michael-ciniawsky commented Nov 15, 2017

marmelin commented Nov 17, 2017 • edited

In config file :

as merged object in Config-object output :

PS:

QUESTION for clarity:

kimown commented Jan 27, 2018

marmelin commented Apr 11, 2018

sokra commented Apr 13, 2017 •

edited by joshwiens

jsf-clabot commented Apr 13, 2017 •

edited

codecov bot commented Apr 13, 2017 •

edited

marmelin commented Nov 15, 2017 •

edited

marmelin commented Nov 17, 2017 •

edited