In prod mode with ExtractTextPlugin, my styles import returns an array of values.
shouvik opened this issue · comments
In development mode, I don't seem to have any issues running the application. The styles are loaded by javascript and the variables are available as objects for require styles, the way css-modules intended me to use it.
{ headerTitle: 'headerTitle___1VPCU', _style: '.headerTitle___1VPCU {\n color: #c51d23;\n font-size: 1.167em;\n font-weight: 700;\n text-transform: uppercase;\n padding: 18% 1% 1% 1%;\n text-align: center;\n}' }
The problem I run into is is production mode. My import returns an array set containing path information of the required style file, followed with the contents of the style file converted by postcss.
[ [ '/Users/shouvik/Documents/dream11/pandora/client/containers/MatchCenter/style.css.webpack-module', '.headerTitle___1VPCU{color:#c51d23;font-size:1.167em;font-weight:700;text-transform:uppercase;padding:18% 1% 1%;text-align:center}', '' ] ]
I am not sure where exactly am I going wrong when it comes to configuring my webpack.
For the webpack-isomorphic-tools.js, I have reused the code written here.
For my webpack config I do this:
module.exports = {
context: path.resolve(__dirname, '..'),
entry: {
jsx: './client/index.js',
html: './client/index.html',
vendor: [
'react',
'react-dom',
'react-redux',
'react-router',
'react-router-redux',
'redux'
]
},
output: {
path: assetsPath,
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'file?name=[name].[ext]'
},
{
test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.css$/,
include: /client/,
loaders: (
() => {
if (isDevelopment) {
return [
'style-loader',
'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
'postcss-loader'
] } else return [
ExtractTextPlugin.extract('style-loader', 'css-loader'),
'css-loader?modules&importLoaders=2&localIdentName=[local]___[hash:base64:5]',
'postcss-loader'
]
}
)()
},
{
test: /\.css$/,
exclude: /client/,
loader: 'style!css'
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: [
'react-hot',
'babel-loader'
]
}
],
},
resolve: {
extensions: ['', '.js', '.jsx']
},
postcss: [
values,
assets({
basePath : 'client/assets',
loadPaths: ['images','fonts'],
relative : true,
cacheBuster: true
}),
rucksack({
autoprefixer: true
})
],
plugins: (() => {
const plugins = [];
if(isDevelopment) {
plugins.push(
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') },
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true,
__DEVTOOLS__: true
}),
webpackIsomorphicToolsPlugin.development()
)
} else {
plugins.push(
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
},
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: false,
__DEVTOOLS__: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
webpackIsomorphicToolsPlugin
)
}
return plugins
})(),
devServer: {
contentBase: '../client',
hot: true
}
}
Maybe you're not really in production and that's the reason you get weird assets.
Look at your webpack-assets.json: the styles should be represented as maps there.
If they aren't then it means that the parser might be incorrect.
Make sure NODE_ENV is production in production mode.
So, I tweaked the way I am using extract-text-plugin a little but. Now instead of using the ExtractTextPlugin.extract I use the same CSS transpiling as the dev mode. My new section looks like this
{
test: /\.css$/,
include: /client/,
loaders: [
'style-loader',
'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
'postcss-loader'
]
},
The rest of the file remains unchanged. I am using parse to return source.module as extract text plugin removes the css into a file. The isomorphic-webpack-tools debug throws the following error stack to me now on build.
/Users/shouvik/Documents/react-project/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:549
throw _iteratorError5;
^
Error: More than a single candidate module was found in webpack stats for require()d path "!!./../../../node_modules/css-loader/index.js?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]!./../../../node_modules/postcss-loader/index.js!./style.css". Enable "debug: true" flag in webpack-isomorphic-tools configuration for more info.
at fail (/Users/shouvik/Documents/react-project/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:442:11)
at /Users/shouvik/Documents/react-project/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:450:5
at resolver (/Users/shouvik/Documents/react-project/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:140:17)
at Function._module2.default._findPath (/Users/shouvik/Documents/react-project/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:450:25)
at Function.Module._resolveFilename (module.js:453:25)
at Function._module2.default._resolveFilename (/Users/shouvik/Documents/react-project/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:423:34)
at Function.Module._load (module.js:403:25)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/shouvik/Documents/react-project/client/components/LeftNav/style.css.webpack-module:5:15)
at Module._compile (module.js:556:32)
at Object._module2.default._extensions.(anonymous function) [as .webpack-module] (/Users/shouvik/Documents/react-project/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:274:11)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at populate_assets (/Users/shouvik/Documents/react-project/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:528:32)
at write_assets (/Users/shouvik/Documents/react-project/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:73:2)
at Compiler.<anonymous> (/Users/shouvik/Documents/react-project/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/plugin.js:205:45)
at Compiler.applyPlugins (/Users/shouvik/Documents/react-project/node_modules/tapable/lib/Tapable.js:26:37)
at Compiler.<anonymous> (/Users/shouvik/Documents/react-project/node_modules/webpack/lib/Compiler.js:193:12)
at Compiler.emitRecords (/Users/shouvik/Documents/react-project/node_modules/webpack/lib/Compiler.js:282:37)
at Compiler.<anonymous> (/Users/shouvik/Documents/react-project/node_modules/webpack/lib/Compiler.js:187:11)
at /Users/shouvik/Documents/react-project/node_modules/webpack/lib/Compiler.js:275:11
at Compiler.applyPluginsAsync (/Users/shouvik/Documents/react-project/node_modules/tapable/lib/Tapable.js:60:69)
at Compiler.afterEmit (/Users/shouvik/Documents/react-project/node_modules/webpack/lib/Compiler.js:272:8)
at Compiler.<anonymous> (/Users/shouvik/Documents/react-project/node_modules/webpack/lib/Compiler.js:267:14)
at /Users/shouvik/Documents/react-project/node_modules/async/lib/async.js:52:16
at done (/Users/shouvik/Documents/react-project/node_modules/async/lib/async.js:246:17)
You can post your webpack-stats.json and I can give it a look
It's a pretty huge file. Which section would you like me to link for you? It's about 30k lines of code.
You can post the whole file
You can't comment at this time — your comment is too long (maximum is 65536 characters).
I wonder, if I could host it on a site. Pastebin threw a similar error as well. I could mail you the file if you would like.
You can post it as a "gist"
Yes, it needs it as a string.
v1 is kinda weird, yeah.
v2 though (for Webpack 2.x beta) knows how to handle an array: https://github.com/webpack/extract-text-webpack-plugin
Yep @halt-hammerzeit Thanks a bunch for your time.