Webpack WARNING: "Critical dependencies: This seems to be a pre-built javascript file. ..."

[ditransler]

Main point

I'm getting the following warning in webpack while bundling:

WARNING in ./bower_components/clipboard/dist/clipboard.min.js Critical dependencies: 7:421-428 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ./bower_components/clipboard/dist/clipboard.min.js 7:421-428

What I use

• clipboard 1.5.16
• webpack 1.13.1
• bower 1.3.12
• NodeJS 4.4.2
• macOS Sierra (10.12.2)

Webpack config's excerpt

module.exports = {
  plugins: [
      new webpack.ProvidePlugin({
        Clipboard: "clipboard"
    }),
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    )
  ],
  resolve: {
    modulesDirectories: ["bower_components", "app" ],
    alias: {
        'clipboard': __dirname+'/bower_components/clipboard/dist/clipboard.min.js'
    }
  }
};

Expected behaviour

This warning shouldn't appear in the console.

It draws extra attention and becomes irritative. Especially as it's the only dependency that produces this warning.

Moreover, I don't want to suppress all warnings in webpack (possibly missing some valuable warnings).

What I tried to change

• not to use webpack.ProvidePlugin
• not to use an alias
• not to require the 'min' version
• require clipboard via npm and not bower
• use require instead of import (as it described here: Bundling Clipboard.js' distribution with Webpack

Side note

I found out that this warning appeared in other libraries:

• Webpack (issue link)
• VideoJS (issue link)
• Quill (issue link)
• Elm-simple-loader (issue link)

But my other plugins are required the same way and they don't trigger this warning:

• flatpickr
• qTip
• Remodal
• noty

Please, help me. I'll really appreciate it.

[itaisteinherz]

First of all, as this is only a warning, you could just ignore it. From my understanding, you are getting this error because the dist/clipboard.min.js and dist/clipboard.js files are pre-built javascript files, which means they are generated using babel and browserify, and are not just the original source code of the module itself. What you could do to prevent this warning is to simply use the lib/clipboard.js file instead of the dist/clipboard.min.js file, like so:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    resolve: {
        alias: {
            clipboard: 'clipboard/lib/clipboard.js'
        }
    }
};

(Note: most of the solution was taken from zenorocha's web pack config example)

If this solution doesn't work for you or you still have questions, feel free to let me know.

[ditransler]

@itaisteinherz, thank you for your reply.

1. Yes, dist/clipboard.min.js is a pre-built JS file. And I don't understand the reason why all other pre-built files (in other libs and plugins that I listed) work fine and don't trigger this warning.

Does it mean that babel + browserify generate the pre-built files in some specific way and webpack is not satisfied with that?

2. All my other dependencies are installed via bower and there's no 'lib' folder there.
   But I will try your variant and install it via npm.

[itaisteinherz]

@ditransler I think that the problem is due to browserify and not babel. As you said above, browserify generates a bundle of all of the dependencies into a single file, so webpack doesn't have anything to build. Because of that, webpack will bundle the generated browserify bundle as-is.

[ditransler]

@itaisteinherz, I see. Thank you.

I read some comments saying that settings used to bundle scripts may differ and the output may be different as the result of it.
And as clipboard.js is provided in the pre-built version that is tested and I'm not going to modify it in anyway (just want to use it as it is) I'd prefer to avoid generating it with webpack.

That's why I've finally found another solution:

We can use the module.noParse parameter in webpack to suppress this warning:

module: {
    loaders: [{
        ...
    }],
    noParse: /bower_components\/clipboard\/dist\/clipboard.min.js/,
}

Now there's no warning in the console.
Thanks to mverderese for this solution.