Skip to content

"extract-text-webpack-plugin" loader is used without the corresponding plugin #579

Closed
@digitalkaoz

Description

@digitalkaoz

Again, this error popped up (node-version: v7.4.0)

ERROR in ./style/index.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
        at Object.module.exports.pitch (/project/node_modules/extract-text-webpack-plugin/loader.js:27:9)
     @ ./js/components/App.jsx 8:0-34
     @ ./~/html-webpack-plugin/lib/loader.js!./js/index.jsx
{
  "devDependencies": {
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "2.2.0",
  }
}

my webpack config

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ['./js/index.jsx'],

    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                     fallbackLoader: 'style-loader',
                     loader: ['css-loader', 'sass-loader']
                 })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './js/index.jsx',
            inject: false
        }),
        new ExtractTextPlugin({filename: '[name].css', allChunks: true}),
    ]
};

my template

import React from 'react';
import { render } from 'react-dom';
import { renderToString } from 'react-dom/server';

import App from './components/App.jsx';

class Html extends React.Component {
    render() {
        return <html lang="en">
        <head>
            <meta charSet="utf-8"/>
            <link rel="stylesheet" href="/main.css"/>
        </head>
        <body>
        <App />
        <script async defer src="/bundle.js"></script>
        </body>
        </html>
    }
}


// Client render (optional):
if (typeof document !== 'undefined') {
     render(<Html/>, document);
}

// Exported static site renderer:
export default (locals, callback) => {
    const html = '<!DOCTYPE html>'+ renderToString(<Html {...locals} />);

    //server side rendering
    if ('function' === typeof callback) {
        callback(null, html);
    } else {
        //html-webpack-plugin
        return html;
    }
};

if i exclude the ExtractTextPlugin the rendering works fine...

any ideas?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions