Closed
Description
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?