update to 0.1.20 error running the production script
maiopirata opened this issue · comments
I upgraded to 0.1.20 to use the stylesheet optional paramenters.
Now when I run in production (that it was perfectly working before), I have this error:
| /usr/src/app/webpack/webpack.config.client.production.js:105
| scss_loader.loader = _extractTextWebpackPlugin2.default.extract(scss_loader.loaders.shift(), scss_loader.loaders.join('!'));
| ^
|
| TypeError: Cannot read property 'shift' of undefined
| at Object.<anonymous> (webpack.config.client.production.js:83:50)
| at Module._compile (module.js:409:26)
| at loader (/usr/src/app/node_modules/babel-register/lib/node.js:158:5)
| at Object.require.extensions.(anonymous function) [as .js] (/usr/src/app/node_modules/babel-register/lib/node.js:168:7)
| at Module.load (module.js:343:32)
| at Function.Module._load (module.js:300:12)
| at Module.require (module.js:353:17)
| at require (internal/module.js:12:17)
| at Object.<anonymous> (/usr/src/app/webpack/webpack.config.client.production.entry.js:3:18)
| at Module._compile (module.js:409:26)
| at Object.Module._extensions..js (module.js:416:10)
| at Module.load (module.js:343:32)
| at Function.Module._load (module.js:300:12)
| at Module.require (module.js:353:17)
| at require (internal/module.js:12:17)
| at module.exports (/usr/src/app/node_modules/webpack/bin/convert-argv.js:80:13)
|
| npm info react-frost@ Failed to exec production-build-client script
| npm ERR! Linux 4.4.0-31-generic
| npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run-script" "production-build-client"
| npm ERR! node v4.4.7
| npm ERR! npm v2.15.8
| npm ERR! code ELIFECYCLE
| npm ERR! react-frost@ production-build-client: `webpack --colors --display-error-details --config ./webpack/webpack.config.client.production.entry.js`
| npm ERR! Exit status 1
| npm ERR!
| npm ERR! Failed at the react-frost@ production-build-client script 'webpack --colors --display-error-details --config ./webpack/webpack.config.client.production.entry.js'.
| npm ERR! This is most likely a problem with the react-frost package,
| npm ERR! not with npm itself.
| npm ERR! Tell the author that this fails on your system:
| npm ERR! webpack --colors --display-error-details --config ./webpack/webpack.config.client.production.entry.js
| npm ERR! You can get information on how to open an issue for this project with:
| npm ERR! npm bugs react-frost
| npm ERR! Or if that isn't available, you can get their info via:
| npm ERR!
| npm ERR! npm owner ls react-frost
| npm ERR! There is likely additional logging output above.
|
| npm ERR! Please include the following file with any support request:
| npm ERR! /usr/src/app/npm-debug.log
| ERROR: "production-build-client" exited with 1.
|
| npm info react-frost@ Failed to exec production script
| npm ERR! Linux 4.4.0-31-generic
| npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "production"
| npm ERR! node v4.4.7
| npm ERR! npm v2.15.8
| npm ERR! code ELIFECYCLE
| npm ERR! react-frost@ production: `npm-run-all production-build-client production-build-server production-server`
| npm ERR! Exit status 1
| npm ERR!
| npm ERR! Failed at the react-frost@ production script 'npm-run-all production-build-client production-build-server production-server'.
| npm ERR! This is most likely a problem with the react-frost package,
| npm ERR! not with npm itself.
| npm ERR! Tell the author that this fails on your system:
| npm ERR! npm-run-all production-build-client production-build-server production-server
| npm ERR! You can get information on how to open an issue for this project with:
| npm ERR! npm bugs react-frost
| npm ERR! Or if that isn't available, you can get their info via:
| npm ERR!
| npm ERR! npm owner ls react-frost
| npm ERR! There is likely additional logging output above.
|
| npm ERR! Please include the following file with any support request:
| npm ERR! /usr/src/app/npm-debug.log
it seems that the loaders property undefined.
Do you think that it is connected to your last modifications?
Post your /usr/src/app/webpack/webpack.config.client.production.js and I'll see
import language from './language'
import path from 'path'
import webpack from 'webpack'
import configuration from './webpack.config.client'
import clean_plugin from 'clean-webpack-plugin'
import extract_text_plugin from 'extract-text-webpack-plugin'
// const configuration = Object.clone(base_configuration)
// const server_output_path = path.resolve(configuration.output.path, '../server')
configuration.devtool = 'source-map'
configuration.plugins = configuration.plugins.concat(
// clears the output folder
new clean_plugin([path.relative(configuration.context, configuration.output.path)], { root: configuration.context }),
// environment variables
new webpack.DefinePlugin ({
'process.env': {
// Useful to reduce the size of client-side libraries, e.g. react
NODE_ENV: JSON.stringify('production') // 'development' to see non-minified React errors
},
_development_ : false,
_production_ : true,
_development_tools_ : false // enable/disable redux-devtools
}),
// css files from the extract-text-plugin loader
// (for more information see the extract_text_plugin code for scss_loader below)
//
// the "allChunks: true" option means that this extracted file will contain
// the styles from all chunks of an entry (each entry can be divided into chunks).
// without this option styles would only be extracted from the top-level chunk of an entry.
new extract_text_plugin('[name]-[contenthash].css', { allChunks: true }),
// omit duplicate modules
new webpack.optimize.DedupePlugin(),
// Assign the module and chunk ids by occurrence count.
// Ids that are used often get lower (shorter) ids.
// This make ids predictable, reduces to total file size and is recommended.
new webpack.optimize.OccurenceOrderPlugin(),
// extracts common javascript into a separate file (works)
// new webpack.optimize.CommonsChunkPlugin('common', 'common.[hash].js'),
// Compresses javascript files
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
)
// // don't know why they write it like this
// configuration.output.filename = '[name]-[chunkhash].js'
// network path for static files: fetch all statics from the static server
// configuration.output.publicPath = `http://localhost:3001/build/`
// begin: set extract text plugin as a Css loader
// find the styles loader
const scss_loader = configuration.module.loaders.filter(loader => {
return loader.test.toString() === configuration.regular_expressions.styles.toString()
})[0]
// https://github.com/webpack/extract-text-webpack-plugin
//
// It moves every require("style.css") in entry chunks into a separate css output file.
// So your styles are no longer inlined into the javascript, but separate
// in a css bundle file (styles.css). If your total stylesheet volume is big,
// it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.
// (but it also disables hot module reload)
//
// the first argument to the .extract() function is the name of the loader
// ("style-loader" in this case) to be applied to non-top-level-chunks in case of "allChunks: false" option.
// since in this configuration "allChunks: true" option is used, this first argument is irrelevant.
scss_loader.loader = extract_text_plugin.extract(scss_loader.loaders.shift(), scss_loader.loaders.join('!'))
delete scss_loader.loaders
// done: set extract text plugin as a Css loader
export default configurationif you notice I commented the configuration clone line..
Well, the error means that scss_loader wasn't found.
Try to do console.log(require('util').inspect(configuration.module.loaders))
indeed I don't have a loaders but a loader..
[ { test: /\.json$/, loader: 'json-loader' },
{ test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader' },
{ test: /\.scss$/,
loader: 'style-loader!/usr/src/app/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":false,"id":1}!style!css?sourceMap!resolve-url?sourceMap!postcss-loader!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true' },
{ test: /\.svg/,
loader: 'url-loader?limit=26000&mimetype=image/svg+xml' },
{ test: /\.(jpg|png)$/, loaders: [ 'url-loader?limit=10000' ] },
{ test: /\.rt/,
loader: 'react-templates-loader',
include: '/usr/src/app/webpack/application' } ]
So, what you have there is
loader: 'style-loader!/usr/src/app/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":false,"id":1}!style!css?sourceMap!resolve-url?sourceMap!postcss-loader!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true' },
This reminds me of the "flash of unstyled content" issue solution.
Why do you have it enabled in production?
my webpack.config.client is indeed
import { client_configuration } from 'universal-webpack'
import settings from './universal-webpack-settings'
import configuration from './webpack.config'
export default client_configuration(configuration, settings, { development: true, css_bundle: true })
I just turn it on for development and I didn't figure out that I was using the same file for production as well.
It works!
Also, I thought that that boilerplate code with extract-text-webpack-plugin is common enough to include it into the library as well.
In the latest version of universal-webpack it's now possible to pass development: false parameter and extract-text-webpack-plugin will be applied automatically (unless css_bundle is set to false).
I guess everyone does that in production.
The relevant commit to the example app:
catamphetamine/webpack-react-redux-server-side-render-example@807c76d
That is much better. Good Idea!