New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

throwing an error if I disable source map in uglifyjs plugin #1385

Closed
thisguychris opened this Issue Aug 24, 2015 · 35 comments

Comments

Projects
None yet
@thisguychris

thisguychris commented Aug 24, 2015

I think this is a more appropriate location to file this issue:
webpack-contrib/extract-text-webpack-plugin#98

I disabled extract text plugin and it still gives an error. Its probably in webpack.

So just re posting this:

I get an error if I turn off source map in

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
    , sourceMap: false
  })

I'm trying to disable source map since my build takes 5 minutes long. Removing it yields 1 minute 40 seconds.

Here's part of my stack trace

ERROR in bundle.js from UglifyJs
TypeError: Cannot read property 'sections' of null
    at new SourceMapConsumer (/var/www/project/node_modules/webpack/node_modules/webpack-core/node_modules/source-map/lib/source-map/source-map-consumer.js:24:21)
    at /var/www/project/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:62:23
    at Array.forEach (native)
    at Tapable.<anonymous> (/var/www/project/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:44:10)
    at Tapable.next (/var/www/project/node_modules/webpack/node_modules/tapable/lib/Tapable.js:69:14)
    at Tapable.<anonymous> (/var/www/project/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:136:4)
    at Tapable.applyPluginsAsync (/var/www/project/node_modules/webpack/node_modules/tapable/lib/Tapable.js:71:13)
    at Tapable.<anonymous> (/var/www/project/node_modules/webpack/lib/Compilation.js:564:9)
    at Tapable.next (/var/www/project/node_modules/webpack/node_modules/tapable/lib/Tapable.js:67:11)
    at ExtractTextPlugin.<anonymous> (/var/www/project/node_modules/extract-text-webpack-plugin/index.js:303:4)
    at Tapable.applyPluginsAsync (/var/www/project/node_modules/webpack/node_modules/tapable/lib/Tapable.js:71:13)
    at Tapable.<anonymous> (/var/www/project/node_modules/webpack/lib/Compilation.js:560:8)
    at Tapable.next (/var/www/project/node_modules/webpack/node_modules/tapable/lib/Tapable.js:67:11)
    at ExtractTextPlugin.<anonymous> (/var/www/project/node_modules/extract-text-webpack-plugin/index.js:279:5)
    at /var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:52:16
    at done (/var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:248:21)
    at /var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:44:16
    at /var/www/project/node_modules/extract-text-webpack-plugin/index.js:270:6
    at /var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:52:16
    at done (/var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:248:21)
    at /var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:44:16
    at /var/www/project/node_modules/extract-text-webpack-plugin/index.js:267:13
    at /var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:187:20
    at /var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:239:13
    at _arrayEach (/var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:91:13)
    at _each (/var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:82:13)
    at Object.async.forEachOf.async.eachOf (/var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:238:9)
    at Object.async.forEach.async.each (/var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:215:22)
    at /var/www/project/node_modules/extract-text-webpack-plugin/index.js:241:11
    at /var/www/project/node_modules/extract-text-webpack-plugin/node_modules/async/lib/async.js:187:20
@SimenB

This comment has been minimized.

Contributor

SimenB commented Aug 24, 2015

What's your devtool?

@thisguychris

This comment has been minimized.

thisguychris commented Aug 24, 2015

I don't have it on my webpack config since this is for production.

@sokra

This comment has been minimized.

Member

sokra commented Aug 26, 2015

try to reinstall all dependencies.

@thisguychris

This comment has been minimized.

thisguychris commented Aug 27, 2015

@sokra just tried reinstalling dependencies. Still getting the same error on build:

ERROR in bundle.js from UglifyJs
TypeError: Cannot read property 'sections' of null
    at new SourceMapConsumer 
@thisguychris

This comment has been minimized.

thisguychris commented Aug 27, 2015

@sokra I've setup a sample repo to reproduce the bug:
https://github.com/deezahyn/webpack-production-test

@sokra sokra added the bug label Aug 31, 2015

@angelomichel

This comment has been minimized.

angelomichel commented Sep 4, 2015

I am getting the same error here when using sourcemap false and --optimize-minimize (if I leave the optimize out it works).

@hanai

This comment has been minimized.

hanai commented Nov 26, 2015

same error

@sercaninaler

This comment has been minimized.

sercaninaler commented Nov 27, 2015

+1

1 similar comment
@indiejoseph

This comment has been minimized.

indiejoseph commented Nov 30, 2015

+1

@sokra

This comment has been minimized.

Member

sokra commented Nov 30, 2015

when using new UglifyJsPlugin and --opimize-minimize (or -p) you are adding the UglifyJsPlugin twice. Omit the CLI option.

@sercaninaler

This comment has been minimized.

sercaninaler commented Dec 17, 2015

Thanks so much @sokra, This helped me!

@macbury

This comment has been minimized.

macbury commented Apr 12, 2016

+1

@guzmonne

This comment has been minimized.

guzmonne commented Apr 21, 2016

Thanks @sokra it also fixed it for me

@Intey

This comment has been minimized.

Intey commented May 2, 2016

Have similar issue, but i don't specify sourceMap: false. Only when i declare this, build pass.

@Zjaaspoer

This comment has been minimized.

Zjaaspoer commented May 22, 2016

Thanks @sokra, you fixed this bug for me too :)

nimishamukherjee pushed a commit to nimishamukherjee/fabric8-planner that referenced this issue Sep 3, 2016

Nimisha
Possibel fix for the production build.
Uglify throws an error for devtool set as source-map. Based on webpack/webpack#1385 changed to eval.
After adding a constructor to app.component.ts, the production build succeeded.
@jquintozamora

This comment has been minimized.

jquintozamora commented Nov 20, 2016

Thanks @sokra it also fixed it for me as well

@hypery2k

This comment has been minimized.

hypery2k commented Nov 22, 2016

you can also try this:

  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: null, 
      lineToLine: true,
      module: false,
      test: /\.(ts|map|js)($|\?)/i 
    }),
@thisguychris

This comment has been minimized.

thisguychris commented Nov 27, 2016

@sokra removing -p does indeed fixes it for me. Is this intended behavior though? if a flag in cli does the same thing in config, it will just apply it twice?

I'll gladly make a PR if you can just give me pointers where to look. Let me know if we don't plan to fix this, and I'll have this close.

@johnnyghost

This comment has been minimized.

johnnyghost commented Nov 29, 2016

Thanks @sokra!

@xiguaaxigua

This comment has been minimized.

xiguaaxigua commented Jan 22, 2017

thanks @sokra , fixed this bug

@luoyjx

This comment has been minimized.

luoyjx commented Mar 15, 2017

+1
fix by remove -p

@deot

This comment has been minimized.

deot commented Mar 27, 2017

+1
fix by remove -p

@ulfryk

This comment has been minimized.

ulfryk commented May 5, 2017

@sokra thank you vey much :D

@isaac2004

This comment has been minimized.

isaac2004 commented Jun 2, 2017

Is there a fix coming for this? In my opinion Webpack should be smart enough to omit one or the other f both are present.

@HeadFox HeadFox referenced this issue Jul 3, 2017

Closed

Remove uglifyJs #3

aaronhedquist referenced this issue in tylermcginnis/react-fundamentals Jul 9, 2017

muehan added a commit to muehan/angular-starter that referenced this issue Sep 25, 2017

BeAce added a commit to BeAce/expressjs-react-blog that referenced this issue Nov 15, 2017

fix(webpack.prod): webpack/webpack#1385 when using new UglifyJsPlugin…
… and --opimize-minimize (or -p) you are adding the UglifyJsPlugin twice. Omit the CLI option.

ystros added a commit to ystros/throneteki that referenced this issue Nov 30, 2017

Fix webpack build scripts
Adds a `build-vendor:dev` script for local development. This fixes the
issue where building the vendor scripts in production mode but running
the server in development mode caused ReactDOMServer.renderToString to
crash.

Removes the `-p` option from the build scripts. This was conflicting
with the usage of UglifyJsPlugin, basically uglifying Javascript code
twice. See:
webpack/webpack#1385 (comment)

Removes the unnecessary passing of environment variables to Webpack.
Environment is now controlled completely using the `--env` option.

cryogen added a commit to throneteki/throneteki that referenced this issue Dec 1, 2017

Fix webpack build scripts (#1621)
* Fix webpack build scripts

Adds a `build-vendor:dev` script for local development. This fixes the
issue where building the vendor scripts in production mode but running
the server in development mode caused ReactDOMServer.renderToString to
crash.

Removes the `-p` option from the build scripts. This was conflicting
with the usage of UglifyJsPlugin, basically uglifying Javascript code
twice. See:
webpack/webpack#1385 (comment)

Removes the unnecessary passing of environment variables to Webpack.
Environment is now controlled completely using the `--env` option.

* Remove colon from build-vendor-dev

* Incorporate offline feedback re: webpack cli options
@roeycohen

This comment has been minimized.

roeycohen commented Feb 12, 2018

when using yarn, you could add this to your package.json file:

"resolutions": {
    "webpack/uglifyjs-webpack-plugin": "^1.1.8"
  },

this will replace webpack original dependency with a more recent one, so you could still use -p switch.

@ReeganExE

This comment has been minimized.

ReeganExE commented Feb 21, 2018

With Webpack 4, mode: 'production' will automatically add optimizations plugins.

If you get the following warning/error message when building with mode: 'production', try fixing by below instruction.

TypeError: Cannot read property 'sections' of null 👉 Remove `new UglifyJsPlugin` from plugins part
schema id ignored LoaderOptionsPlugin              👉 Remove `new LoaderOptionsPlugin` plugin from config
schema id ignored SourceMapDevToolPlugin           👉 Remove `devtool` config
@damianobarbati

This comment has been minimized.

damianobarbati commented Feb 25, 2018

@ReeganExE if I remove new UglifyJsPlugin from config then how can I customize uglify options? (webpack@4)

@ashtrie

This comment has been minimized.

ashtrie commented Feb 26, 2018

do not remove UglifyJsPlugin, just add sourceMap: true to its config

@damianobarbati

This comment has been minimized.

damianobarbati commented Feb 26, 2018

@ashtrie thanks but I don't get it: where do I define uglify-es configuration? Where do you add sourceMap: true?
All I have are package.json and webpack.config.js to configure my project.

Plus sourcemaps seems to link to transpiled code and not original source: not sure whether uglify or webpack issue (#6567 (comment))

@ReeganExE

This comment has been minimized.

ReeganExE commented Feb 26, 2018

@damianobarbati, you might pass it as minimizer option rather than push it as plugin part.

const configs = {
  mode: "production",
  entry: "./index",
  output: {
    filename: "bundle.js"
  },
  optimization: {
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        uglifyOptions: {
          // ...
        }
      })
    ]
  }
};
@damianobarbati

This comment has been minimized.

damianobarbati commented Feb 26, 2018

Thanks @ReeganExE, I made it.

@pbrain19

This comment has been minimized.

pbrain19 commented Feb 26, 2018

None of the fixes above have worked for me when updating to webpack 4. Here are my configs and error. Any idea why it wouldn't work

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const uglify = require('uglify-js');

const env = process.env.NODE_ENV;
const root = 'src';

/**
 * @param {Boolean} tranformCopy - boolean to signal if build should minify copied js
 */
module.exports = (tranformCopy) => {

    return {
        mode: 'production', 
        resolve: {
            modules: ['node_modules', 'bower_components', (path.resolve(__dirname, './src/app'))],
            alias: { 'chart.js': 'Chart.js/Chart.js' }
        },
        entry: {
            app: [
                'babel-polyfill',
                path.join(__dirname, root, 'clutch.js')
            ],
            vendorjs: path.join(__dirname, root, 'vendor.js'),
            vendorstyle: path.join(__dirname, root, 'style.js'),
            templates: path.join(__dirname, root, 'templates.js')
        },
output: {
    filename: '[name].[chunkhash].js',
    publicPath: '/',
    path: path.resolve(__dirname, 'build'),
    chunkFilename: '[name].[chunkhash].js'
},
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: [
                        'ng-annotate-loader',
                        {
                            loader: 'babel-loader',
                            options: {
                                cacheDirectory: true
                            }
                        }
                    ],
                    parser: {
                        amd: false
                    }
                },
                {
                    test: /\.html$/,
                    include: path.resolve(__dirname, 'src', 'app'),
                    use: [
                        {
                            loader: `ngtemplate-loader?relativeTo=${path.resolve(__dirname, 'src', 'app')}`
                        },
                        {
                            loader: 'html-loader'
                        }
                    ]
                },
                {
                    test: /\.(scss|sass)$/,
                    exclude: /(node_modules|bower_components)/,
                    use: ['style-loader',
                        {
                            loader: 'css-loader'
                        },
                        'sass-loader']
                },
                {
                    test: /\.css$/,
                    use: ['style-loader',
                        {
                            loader: 'css-loader'
                        }
                    ]
                },
                {
                    test: /\.(eot|ttf|woff|woff2)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'fonts/'
                            }
                        }
                    ]
                },
                {
                    test: /\.(svg|png|jpg|jpeg|ico)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'img/'
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
// Injects bundles in your index.html instead of wiring all manually.
    new HtmlWebpackPlugin({
        template: 'src/index.html',
        inject: 'body',
        minify: {
            caseSensitive: true,
            collapseInlineTagWhitespace: true,
            collapseWhitespace: true,
            minifyJS: true,
            keepClosingSlash: true,
            collapseBooleanAttributes: true,
            preserveLineBreaks: false
        }
    }),
            // copies moment locales into public folder.
            new CopyWebpackPlugin([
                {
                    from: 'node_modules/moment/locale/*.js',
                    to: 'locale/moment'
                },
            ]),

            // copies angular-i18n locales into public folder.
            new CopyWebpackPlugin([
                {
                    from: 'node_modules/angular-i18n/*.js',
                    to: 'locale/angular-local',
                    flatten: true
                },
            ]),

            // copies language files to into public folder.
            new CopyWebpackPlugin([
                {
                    from: 'src/locale/*.js',
                    to: 'locale/dashride'
                },
            ]),

            // ensures only english locale loaded from moment.
            new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),

            // injects modules by alias into each file.
            new webpack.ProvidePlugin({
                $: 'jquery',
                _: 'lodash',
                Chart: 'Chart.js/Chart.js',
                'chart.js': 'Chart.js/Chart.js',
                moment: 'moment',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            })
        ]
    };
};

The error is

TypeError: Cannot read property 'sections' of null at new SourceMapConsumer (/home/paul/Documents/dashride-dispatch/node_modules/source-map/lib/source-map-consumer.js:20:19) at /home/paul/Documents/dashride-dispatch/node_modules/uglifyjs-webpack-plugin/dist/index.js:141:27 at Array.forEach (native) at UglifyJsPlugin.optimizeFn (/home/paul/Documents/dashride-dispatch/node_modules/uglifyjs-webpack-plugin/dist/index.js:122:142) at _err0 (eval at create (/home/paul/Documents/dashride-dispatch/node_modules/tapable/lib/HookCodeFactory.js:1:0), <anonymous>:12:1) at /home/paul/Documents/dashride-dispatch/node_modules/uglifyjs-webpack-plugin/dist/index.js:262:11 at step (/home/paul/Documents/dashride-dispatch/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:90:11) at done (/home/paul/Documents/dashride-dispatch/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:99:22) at /home/paul/Documents/dashride-dispatch/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:105:15 at /home/paul/Documents/dashride-dispatch/node_modules/worker-farm/lib/farm.js:191:19 at _combinedTickCallback (internal/process/next_tick.js:73:7) at process._tickCallback (internal/process/next_tick.js:104:9)

@ReeganExE

This comment has been minimized.

ReeganExE commented Feb 28, 2018

new HtmlWebpackPlugin({
    template: 'src/index.html',
    inject: 'body',
    minify: {
        // ...
        minifyJS: true,
        // ...
    }
})

@pbrain19, try removing minifyJS: true from your HtmlWebpackPlugin config.

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Mar 15, 2018

Closing due original problem was solved. If you have problem please create new issue or use stackoverflow or slack. Thanks everyone 👍

@pardoman

This comment has been minimized.

pardoman commented Aug 1, 2018

Another way I was able to get rid of this issue was by removing devtool: 'source-map' from webpack config.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment