Dependency issue with babel-runtime

[ShukantPal]

Is this a bug report?

Yes.

Environment

npm ls dynamic-cdn-webpack-plugin

gravitify.io@1.0.0 /home/shukant/gravitify.io
└── dynamic-cdn-webpack-plugin@4.0.0 


npm ls webpack

gravitify.io@1.0.0 /home/shukant/gravitify.io
└── webpack@4.29.6 

Steps to Reproduce

My webpack.config.js file looks exactly like this:

const path = require('path');
const webpack = require('webpack');

const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: [path.join(__dirname, '/node_modules/')],
        use: {
          loader: 'babel-loader',
          options: {
            presets: [`@babel/preset-env`],
            plugins: [
              "@babel/plugin-minify-dead-code-elimination",
              "@babel/plugin-transform-object-set-prototype-of-to-assign"
            ]
          }
        }
      }
    ]
  },
  plugins: [
    new DynamicCdnWebpackPlugin(),
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin()
  ],
  optimization: {
    minimizer: [
      new TerserPlugin({
        cache: true,
        parallel: true,
        terserOptions: {
          mangle: true
        }
      })
    ]
  }
}

(Write your steps here:)

1. I just run webpack --optimize-minimize

Expected Behavior

It should build fine.

Actual Behavior

Logs error:

/home/shukant/gravitify.io/node_modules/webpack-cli/bin/cli.js:231
				throw err;
				^

Error: Cannot find module 'babel-runtime/core-js/object/values'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (/home/shukant/gravitify.io/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/shukant/gravitify.io/node_modules/dynamic-cdn-webpack-plugin/lib/index.js:7:15)
    at Module._compile (/home/shukant/gravitify.io/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (/home/shukant/gravitify.io/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/shukant/gravitify.io/node_modules/dynamic-cdn-webpack-plugin/index.js:2:18)
    at Module._compile (/home/shukant/gravitify.io/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (/home/shukant/gravitify.io/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/shukant/gravitify.io/webpack.config.js:4:33)
    at Module._compile (/home/shukant/gravitify.io/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (/home/shukant/gravitify.io/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/home/shukant/gravitify.io/node_modules/webpack-cli/bin/convert-argv.js:115:13)
    at requireConfig (/home/shukant/gravitify.io/node_modules/webpack-cli/bin/convert-argv.js:117:6)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[aulisius]

Hi @SukantPal,

Can you paste your package.json file to help look deeper into this issue?

Thanks,
Faizaan.

[NReilingh]

I think I am seeing the same issue. All I'm doing is requiring this module at the top of my webpack.config.js, and not even adding it in plugins. When I run npx webpack I immediately the the error

Cannot find module 'babel-runtime/core-js/object/values'

If I install babel-runtime as a dev dependency, npx webpack works.

[NReilingh]

@aulisius I went ahead and created a repo that demonstrates the issue:

https://github.com/NReilingh/bug-repro-dynamic-cdn-webpack-plugin

$ npm install-test

[ShukantPal]

However, shouldn't babel-transform-runtime be deprecated. I use the @babel/ plugins and tried installing @babel/plugin-transform-runtime package instead. That does not resolve the issue. I think you need to fix it, as newer Babel isn't gonna support your solution @NReilingh

[NReilingh]

I think I figured this out. This package has a dev dependency on babel-plugin-transform-runtime, and is configured to use it in ('package.json').babel.plugins.

According to the docs for @babel/plugin-transform-runtime, using this plugin requires adding @babel/runtime as a production dependency, which was removed from this project in 124e6f9.

I tried re-building this project in a fork without using the plugin and dev dependency, and everything still appears to build and test just fine. I'll submit a pull request with the change. The purpose of babel-runtime is to reduce compiled artifact size by including shared babel shims in a module instead of duplicating those shims in the compiled output, and while it does reduce the size of index.js from 9,035 bytes to 8,845 bytes, it does so at the expense of 48 KB for babel-runtime itself.