Issue with UglifyJS while packing production build #28
Comments
|
I ended up using my own basic transliteration function until I find the correct way to use this one: /* Basic transliteration helper */
function transliterate(str) {
return str.replace(/[ÀÁÂÃÄÅ]/g, 'A')
.replace(/[Æ]/g, 'AE')
.replace(/[Ç]/g, 'C')
.replace(/[ÈÉÊË]/g, 'E')
.replace(/[ÌÍÎÏ]/g, 'I')
.replace(/[Ñ]/g, 'N')
.replace(/[ÒÓÔÕÖ]/g, 'O')
.replace(/[Œ]/g, 'OE')
.replace(/[ÙÚÛÜ]/g, 'U')
.replace(/[ÝŸ]/g, 'Y')
.replace(/[àáâãäå]/g, 'a')
.replace(/[æ]/g, 'ae')
.replace(/[ç]/g, 'c')
.replace(/[èéêë]/g, 'e')
.replace(/[ìíîï]/g, 'i')
.replace(/[ñ]/g, 'n')
.replace(/[òóôõö]/g, 'o')
.replace(/[œ]/g, 'oe')
.replace(/[ùúûü]/g, 'u')
.replace(/[ýÿ]/g, 'y');
} |
|
Hi @daformat, |
|
Sure, here is the important part of my webpack config (for prod): new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
unused: true,
dead_code: true // eslint-disable-line camelcase
},
output: {
comments: false
}
}),
... |
|
So, importing via import {transliterate} from 'transliteration';
console.log('Transiterate is ', transliterate);
// Helper functions for filtering
export const defaultMatcher = (filterText, node) => {
return transliterate(node.name.toLowerCase()).indexOf(transliterate(filterText.toLowerCase())) !== -1;
};I get |
|
I couldn't get the babel transpiled import to work neither, that's why I chose to import from the ES6 source. From what I can tell webpack2's UglifyJS plugin has no trouble with ES6, I just hit this problem using transliterate. Here is a copy of the deps I currently have on the "dependencies": {
"axios": "^0.15.3",
"compression": "^1.6.2",
"express": "^4.14.1",
"immutability-helper": "^2.0.0",
"lodash": "^4.17.4",
"react": "^15.4.2",
"react-addons-css-transition-group": "^15.4.2",
"react-cookie-banner": "0.0.17",
"react-dom": "^15.4.2",
"react-ga": "^2.1.2",
"react-helmet": "^4.0.0",
"react-router": "^3.0.2",
"react-treebeard": "^1.1.4",
"smoothscroll": "^0.3.0",
"transliteration": "^1.5.2"
},
"devDependencies": {
"@types/axios": "^0.9.32",
"@types/react": "^15.0.6",
"@types/react-addons-test-utils": "^0.14.15",
"@types/react-dom": "^0.14.22",
"@types/react-router": "^3.0.0",
"autoprefixer": "^6.7.2",
"babel-core": "^6.13.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.0",
"babel-plugin-istanbul": "^3.1.2",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.2.0",
"babel-preset-react": "^6.1.18",
"browser-sync": "^2.18.7",
"browser-sync-spa": "^1.0.3",
"css-loader": "^0.26.1",
"del": "^2.0.2",
"es6-shim": "^0.35.0",
"eslint": "^3.14.1",
"eslint-config-xo-react": "^0.10.0",
"eslint-config-xo-space": "^0.15.0",
"eslint-loader": "^1.3.0",
"eslint-plugin-babel": "^4.0.1",
"eslint-plugin-react": "^6.9.0",
"extract-text-webpack-plugin": "^2.0.0-beta",
"gulp": "github:gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
"gulp-filter": "^4.0.0",
"gulp-hub": "github:frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
"gulp-sass": "^2.1.1",
"gulp-util": "^3.0.7",
"html-webpack-plugin": "^2.28.0",
"jasmine": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-junit-reporter": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-phantomjs-shim": "^1.1.2",
"karma-webpack": "^2.0.2",
"mark.js": "julmot/mark.js",
"node-sass": "^4.5.0",
"phantomjs-prebuilt": "^2.1.6",
"postcss-loader": "^1.2.2",
"react-addons-test-utils": "^15.0.1",
"react-hot-loader": "^1.3.0",
"react-icons": "^2.2.3",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.0",
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-fail-plugin": "^1.0.5",
"webpack-hot-middleware": "^2.16.1"
} |
|
Have you tried using the newest version 1.5.3? |
|
Thanks for trying! So, updating to 1.5.3 I can import directly from transliteration, but using a named import (not the default suggested in previous replies, which will still get me However I still have the same issue with my build process. ( Are you successfully uglifying it via webpack's plugin on your end? If it's easier for you I'm happy to do a quick skype so I can share my screen with you and we can investigate further. |
|
Hmm, it's kind of weird. Can you check this link below and set |
|
Wow, thanks for being proactive like you are! I already tried setting Have a nice train trip! |
|
I've got a clue on why it didn't work now. UglifyJS can't recognize some ES6 grammar like the 'let' keyword and arrow functions. babel-loader seems also missing; and even if it's not, in a real project node_modules folder is usually excluded. That's where the issue occurred. I'm thinking if I should babel-transpiling transliteration module further, which previously caused a strange issue in React Native. Need to do some experiments on my end. On your side, I think if you temporally enable babel-loader for transliteration module it will work fine. |
|
I have updated test-transliteration repo and now |
|
Ok, that could explain things, I indeed was excluding the node_modules folder for babel_loader, here is the full webpack-dist.conf.js I'm using on my own project: const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pkg = require('../package.json');
const autoprefixer = require('autoprefixer');
const deps = Object.keys(pkg.dependencies);
const filteredOutDeps = ['express', 'compression'];
for (let i = 0; i < filteredOutDeps.length; i++) {
const pos = deps.indexOf(filteredOutDeps[i]);
if (pos > -1) {
deps.splice(pos, 1);
}
}
console.log('Dist dependencies:', deps);
module.exports = {
module: {
loaders: [
{
test: /.json$/,
loaders: [
'json-loader'
]
},
{
test: /.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforce: 'pre'
},
{
test: /(\.scss|\.css)$/,
loader: ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader', publicPath: '/'})
},
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
'babel-loader'
]
}
]
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
FailPlugin,
new HtmlWebpackPlugin({
template: conf.path.src('index.html')
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
unused: true,
dead_code: true // eslint-disable-line camelcase
},
mangle: false,
output: {
comments: false
}
}),
new ExtractTextPlugin('/index-[contenthash].css'),
new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: () => [autoprefixer],
sassLoader: {
includePaths: [path.resolve(__dirname, 'src', 'scss')]
},
context: '/'
}
})
],
output: {
path: path.join(process.cwd(), conf.paths.dist),
filename: '/[name]-[hash].js'
},
entry: {
app: `./${conf.path.src('index')}`,
vendor: deps
}
}; |
|
Not excluding the node_modules folder for babel-loader throws quite a few errors for the other deps I'm using and it still gets me the error about |
|
How about ignoring |
|
As said previously, importing this way gets me I'm confused about the ignore you're suggesting, should I edit something else than my rule for babel-loader? I tried using the test regex you gave for babel-loader with no success (same error about codemap). I guess I need to add something equivalent for uglify ? |
|
Please check |
|
Importing from |
|
Yup I did so. Apparently I made typo copy/pasting from your comments. Copy pasting the exclude directive from test-transliteration into my webpack build configuration file did solve the issue. I now get a production build, that actually builds :) Uploading to a test server right now. |
|
Great, let me know if there's more issues. I think I'll need to address this issue in README file, while for long term maybe I'll still need to refactor the code a bit to find a better solution. |
|
Woops, sorry for the joy, I was on my master branch (it's 6.30 am here, so my brain is still not 100% awake). Sadly, I still get the same error in my build. |
|
Here is my full webpack file: |
|
Ad my .babelrc: |
|
So it might have something to do with my "modules": false directive... Don't know how to handle this edge case |
|
So what's the error message now? |
|
Still the same message about codemap
|
|
I'm not sure .babelrc works or not. Can you try to use queries in webpack config file like in test-transliteration repo instead of using .babelrc? |
|
Ok, I might try this first: https://twitter.com/dan_abramov/status/830776755204063232 Thanks a lot for the help. Though on my end, there's no rush fixing it, as my visitors and my content are french, the basic transliteration helper I wrote works fine for the time being. |
|
Hi guys, I tried There seems to be no way to overcome this, because |
|
Tried adding |
|
Hi Folks, any update on this? I'm using es2015 preset, but it doesn't solve the problem. |
|
I published the following package as a temporary workaround: https://www.npmjs.com/package/transliterations (clone of transliteration, but using es2015 preset) |
|
I confirm, create-react-app build script fails with I switched to |
|
Would love to see some progress on this matter. I see more and more traction to my clone, which is OK, but was not intended initially. @andyhu could you please let us know if you intent to fix this issue? I know we are not paying customers, but a fix would be very simple and it does not hurt. ;-) |
|
Sorry guys for keep you waiting. I've been really busy. I'm planning to make multiple builds for different environment. Will update soon |
|
@andyhu looking forward to!!! |
|
Did you try explicitly set own |
|
@andyhu I'am using |
|
@andyhu Same.. |
|
sorrycc/blog#68 |
|
Hi guys, please try v2 version. Now this issue should be fixed |
Hello,
I have no problem using transliterate in my dev environment, however, when I try to generate my production build I get an error with webpack 2 UglifyJS plugin complaining about
codemap:I'm using react (es6) and I'm importing the transliterate helper via:
import {transliterate} from 'transliteration/src/main';I couldn't get any other method described in the README for the import to work.
Using node v7.4.0 (with npm v4.1.2)
Is there something I'm missing? Eagerly waiting for you insights ^^
The text was updated successfully, but these errors were encountered: