prerender-loader icon indicating copy to clipboard operation
prerender-loader copied to clipboard

Published 20 hours ago • verified publisher icon GoogleChromeLabs

Extracting css/scss on build time

Open nirbenya opened this issue 7 years ago • 8 comments

Hi, the prerender-loader works fine for me except when it comes to css.

In my index.js: import './style.scss

But when I run the build I get this error:

ERROR in ./web-assets/scss/style.scss Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

webpack.prod.config:

output: {
    filename: "[name]-[chunkhash].js",
    chunkFilename: "[id].[chunkhash].bundle.js",
    publicPath: '/static/dist/',
    path: __dirname + "/dist"
},

plugins: [

    new webpack.optimize.UglifyJsPlugin(),
    new webpack.LoaderOptionsPlugin({ minimize: true }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: '!!prerender-loader?string!index.html',
    }),
    new ExtractTextPlugin("[name]-[chunkhash].css"),
  

],

module: {
    rules: [

        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                loader: "css-loader"
            })
        },
        {
            test: /\.scss/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                loader: [
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            })
        },  
    ]
}

nirbenya avatar Oct 16 '18 13:10 nirbenya

As the error mentions, the extract-text-plugin webpack plugin requires both a plugin instance (passed to the plugins array by creating an ExtractTextPlugin instance) and a loader instance.

You can check their docs for additional information.

hugmanrique avatar Oct 26 '18 16:10 hugmanrique

@hugmanrique , as can be seen in the attached code I am using extract-text-plugin both in the plugins object and the loaders object. or am I missing something?

nirbenya avatar Oct 26 '18 19:10 nirbenya

Whoops! Sorry I missed that. Have you tried passing the HtmlLoaderPlugin instance after the ExtractTextPlugin one on the plugins array?

hugmanrique avatar Oct 26 '18 20:10 hugmanrique

Hi @NirBenya - can you try with the latest update I just published? Cheers.

developit avatar Oct 31 '18 04:10 developit

@developit , thanks a lot but it still doesn't work. it throws the same error, I'll add this html file output as well, maybe it can help:

<head><link href="/static/dist/internalLandingApp-217579f4eb006a304979.css" rel="stylesheet"></head>Html Webpack Plugin:
<pre>
  Error: Child compilation failed:
  Module build failed: Error: Child compilation failed:
  
  - prerender-loader.js:23 
    [web-workey]/[prerender-loader]/dist/prerender-loader.js:23:31
  
  - Compiler.js:510 applyPluginsAsync.err
    [web-workey]/[webpack]/lib/Compiler.js:510:14
  
  - Tapable.js:202 next
    [web-workey]/[tapable]/lib/Tapable.js:202:11
  
  - CachePlugin.js:78 Compiler.<anonymous>
    [web-workey]/[webpack]/lib/CachePlugin.js:78:5
  
  - Tapable.js:206 Compiler.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:206:13
  
  - Compiler.js:507 compilation.seal.err
    [web-workey]/[webpack]/lib/Compiler.js:507:11
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:677 applyPluginsAsync.err
    [web-workey]/[webpack]/lib/Compilation.js:677:19
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:668 applyPluginsAsync.err
    [web-workey]/[webpack]/lib/Compilation.js:668:11
  
  - Tapable.js:202 next
    [web-workey]/[tapable]/lib/Tapable.js:202:11
  
  - index.js:244 Compilation.<anonymous>
    [web-workey]/[uglifyjs-webpack-plugin]/dist/index.js:244:6
  
  - Tapable.js:206 Compilation.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:206:13
  
  - Compilation.js:663 applyPluginsAsync.err
    [web-workey]/[webpack]/lib/Compilation.js:663:10
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:659 applyPluginsAsyncSeries
    [web-workey]/[webpack]/lib/Compilation.js:659:9
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:602 Compilation.seal
    [web-workey]/[webpack]/lib/Compilation.js:602:8
  
  - Compiler.js:504 applyPluginsParallel.err
    [web-workey]/[webpack]/lib/Compiler.js:504:17
  
  - Tapable.js:289 
    [web-workey]/[tapable]/lib/Tapable.js:289:11
  
  - Compilation.js:505 _addModuleChain
    [web-workey]/[webpack]/lib/Compilation.js:505:11
  
  - Compilation.js:475 processModuleDependencies.err
    [web-workey]/[webpack]/lib/Compilation.js:475:14
  
  - next_tick.js:73 _combinedTickCallback
    internal/process/next_tick.js:73:7
  
  
  - Error: Child compilation failed:
  
  - compiler.js:76 
    [web-workey]/[html-webpack-plugin]/lib/compiler.js:76:16
  
  - Compiler.js:300 compile
    [web-workey]/[webpack]/lib/Compiler.js:300:11
  
  - Compiler.js:510 applyPluginsAsync.err
    [web-workey]/[webpack]/lib/Compiler.js:510:14
  
  - Tapable.js:202 next
    [web-workey]/[tapable]/lib/Tapable.js:202:11
  
  - CachePlugin.js:78 Compiler.<anonymous>
    [web-workey]/[webpack]/lib/CachePlugin.js:78:5
  
  - Tapable.js:206 Compiler.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:206:13
  
  - Compiler.js:507 compilation.seal.err
    [web-workey]/[webpack]/lib/Compiler.js:507:11
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:677 applyPluginsAsync.err
    [web-workey]/[webpack]/lib/Compilation.js:677:19
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:668 applyPluginsAsync.err
    [web-workey]/[webpack]/lib/Compilation.js:668:11
  
  - Tapable.js:202 next
    [web-workey]/[tapable]/lib/Tapable.js:202:11
  
  - index.js:244 Compilation.<anonymous>
    [web-workey]/[uglifyjs-webpack-plugin]/dist/index.js:244:6
  
  - Tapable.js:206 Compilation.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:206:13
  
  - Compilation.js:663 applyPluginsAsync.err
    [web-workey]/[webpack]/lib/Compilation.js:663:10
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:659 applyPluginsAsyncSeries
    [web-workey]/[webpack]/lib/Compilation.js:659:9
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [web-workey]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:602 Compilation.seal
    [web-workey]/[webpack]/lib/Compilation.js:602:8
  
  - Compiler.js:504 applyPluginsParallel.err
    [web-workey]/[webpack]/lib/Compiler.js:504:17
  
  - Tapable.js:289 
    [web-workey]/[tapable]/lib/Tapable.js:289:11
  
  - Compilation.js:505 _addModuleChain
    [web-workey]/[webpack]/lib/Compilation.js:505:11
  
  - Compilation.js:475 processModuleDependencies.err
    [web-workey]/[webpack]/lib/Compilation.js:475:14
  
  - next_tick.js:73 _combinedTickCallback
    internal/process/next_tick.js:73:7
  
  - next_tick.js:104 process._tickCallback
    internal/process/next_tick.js:104:9
  
</pre><script type="text/javascript" src="/static/dist/internalLandingApp-217579f4eb006a304979.js"></script>

nirbenya avatar Oct 31 '18 09:10 nirbenya

Perhaps we need to whitelist ExtractTextPlugin here like we do for MiniCssExtractPlugin?

https://github.com/GoogleChromeLabs/prerender-loader/blob/317993c3d91de937387afc19e8d13cca33539119/src/index.js#L104

developit avatar Nov 02 '18 18:11 developit

@developit I published a PR on this. https://github.com/NirBenya/prerender-loader/commit/ecb5500af18045aec995d42ce1888673c748fc99

nirbenya avatar Nov 25 '18 16:11 nirbenya

@developit it this version published to npm?

nirbenya avatar Dec 30 '18 12:12 nirbenya