Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extracting css/scss on build time #18

Open
nirbenya opened this issue Oct 16, 2018 · 8 comments
Open

Extracting css/scss on build time #18

nirbenya opened this issue Oct 16, 2018 · 8 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@nirbenya
Copy link
Contributor

nirbenya commented Oct 16, 2018 •
edited

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
Copy link
Contributor

hugmanrique commented Oct 26, 2018 •
edited

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
Copy link
Contributor Author

@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
Copy link
Contributor

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

@developit
Copy link
Collaborator

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

@nirbenya
Copy link
Contributor Author

nirbenya commented Oct 31, 2018 •
edited

@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
Copy link
Collaborator

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

prerender-loader/src/index.js

Line 104 in 317993c

const plugins = (parentCompiler.options.plugins || []).filter(c => /MiniCssExtractPlugin/i.test(c.constructor.name));

@developit developit added bug Something isn't working help wanted Extra attention is needed labels Nov 2, 2018
@nirbenya
Copy link
Contributor Author

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

developit added a commit that referenced this issue Dec 3, 2018
@developit
Merge pull request #20 from NirBenya/master
81ab6c8 
[FEAT] allow extracting css with ExtractTextPlugin (#18)
@nirbenya
Copy link
Contributor Author

@developit it this version published to npm?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@developit @hugmanrique @nirbenya