search

GoogleChromeLabs / prerender-loader

📰 Painless universal pre-rendering for Webpack.
https://npm.im/prerender-loader
Apache License 2.0
1.9k stars 50 forks source link

Extracting css/scss on build time #18

Open nirbenya opened 6 years ago

nirbenya commented 6 years ago

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
                        }
                    }
                ]
            })
        },  
    ]
}
hugmanrique commented 6 years ago

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.

nirbenya commented 6 years ago

@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?

hugmanrique commented 6 years ago

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

developit commented 6 years ago

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

nirbenya commented 6 years ago

@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>
developit commented 6 years ago

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

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

nirbenya commented 5 years ago

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

nirbenya commented 5 years ago

@developit it this version published to npm?