darrenscerri / duplicate-package-checker-webpack-plugin

🕵️ Webpack plugin that warns you when a build contains multiple versions of the same package
MIT License
709 stars 29 forks source link

Not warning about duplicate packages #9

Closed nfriend closed 7 years ago

nfriend commented 7 years ago

Perhaps I'm just using this plugin wrong, but I can't seem to get any output even when I know my build contains multiple versions of the same module. For example, I made a quick test app that has the following dependency structure:

My App
├── lodash@4.10.0
├── Module A
│   └── lodash@4.17.4
└── Module B
    └── lodash@3.10.1

When I run the app, this is the output:

capture

As you can see, the modules and the app are all reporting that they are using different versions of lodash. However, my build output doesn't show any warnings:

C:\Users\nfriend\code\test-app>gulp build
[15:01:53] Using gulpfile ~\code\test-app\gulpfile.js
[15:01:53] Starting 'build'...
[15:01:53] Starting 'clean:build'...
[15:01:53] Finished 'clean:build' after 17 ms
[15:01:53] Starting 'webpack'...
[15:01:53] Starting 'tslint'...
[15:01:53] Starting 'html-pages'...
[15:01:53] Starting 'assets'...
[15:01:53] Starting 'font-awesome'...
ts-loader: Using typescript@2.2.1 and C:\Users\nfriend\code\test-app\tsconfig.json
[15:01:54] Finished 'html-pages' after 1.29 s
[15:02:00] Finished 'assets' after 6.92 s
[15:02:00] Finished 'font-awesome' after 6.92 s
[15:02:00] Finished 'tslint' after 6.93 s
[15:02:00] Finished 'webpack' after 7.13 s
[15:02:00] Finished 'build' after 7.15 s

C:\Users\nfriend\code\test-app>

Just to show that the app is correctly reporting the lodash versions, if I add the following alias in my app's webpack.config:

// force all "lodash" imports to use the app's version of lodash
'lodash': path.resolve(__dirname, 'node_modules/lodash')

the app displays this:

capture2

Just to be complete, here's my full webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');

module.exports = {
    entry: ['./src/entry.ts'],
    output: {
        filename: 'test-app.js'
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['', '.ts', '.js', '.tsx', '.jsx'],
        alias: {
            angular: path.resolve(__dirname, 'node_modules/angular'),

            // see http://stackoverflow.com/a/28989476/1063392
            jquery: path.resolve(__dirname, 'node_modules/jquery/src/jquery'),

            'bootstrap.css': path.resolve(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.css'),
            'AdminLTE.css': path.resolve(__dirname, 'node_modules/admin-lte/dist/css/AdminLTE.css'),
            'skin-purple-light.css': path.resolve(__dirname, 'node_modules/admin-lte/dist/css/skins/skin-purple-light.css'),
            'font-awesome.less': path.resolve(__dirname, 'node_modules/font-awesome/less/font-awesome.less'),

            'lodash': path.resolve(__dirname, 'node_modules/lodash')
        }
    },
    plugins: [

        // see http://stackoverflow.com/a/28989476/1063392
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),

        new DuplicatePackageCheckerPlugin({
            verbose: true
        })
    ],
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ng-annotate', 'ts-loader']
            },
            { test: /\.html$/, loader: 'html' },
            {
                test: /\.less$/,
                loaders: [
                    'style-loader',
                    'css-loader?importLoaders=1&-url&-import',
                    'less-loader'
                ]
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader?-url&-import']
            }
        ]
    },
    htmlLoader: {
        attrs: false,
        minimize: false,
        collapseWhitespace: true,
        conservativeCollapse: true,
    }
};

I use this webpack.config.js in my gulp build, where I require() the file and pass it to webpack-stream to perform the actual webpack build.

Any ideas? Is there something else I need to do to make this plugin warn me when I use multiple versions of lodash? Thanks!

nfriend commented 7 years ago

After doing a little bit of debugging, I think this actually an issue with how I'm using webpack-stream - I seem to be inadvertently suppressing warnings. I'll close this issue for now and reopen later if necessary.

nfriend commented 7 years ago

Yep, the issue was with webpack-stream. If anyone else is having this issue and is using webpack-stream, check out this comment for an example of how to manually log errors and warnings: https://github.com/shama/webpack-stream/issues/64#issuecomment-207373677

darrenscerri commented 7 years ago

Thanks for the follow up @nfriend.