search

d3 / d3-transition

Animated transitions for D3 selections.
https://d3js.org/d3-transition
ISC License
223 stars 65 forks source link

Can not bundle project with webpack minimize option. Cannot get final name for export 'easeCubicInOut' ... #133

Closed TkhiienLok closed 2 years ago

TkhiienLok commented 2 years ago

I am not sure that this issue should be opened in this repository but after I upgraded d3 packages I got a problem bundling project with minimize: true in webpack .

After upgare when I run command webpack --config ./webpack.config.js I am getting this error:

ERROR in ../node_modules/d3-transition/src/selection/index.js + 4 modules
Cannot get final name for export 'easeCubicInOut' of ../node_modules/d3-ease/src/index.js
Error: Cannot get final name for export 'easeCubicInOut' of ../node_modules/d3-ease/src/index.js
    at getFinalBinding (/Users/apple/Documents/resglass/node_modules/webpack/lib/optimize/ConcatenatedModule.js:473:10)
    at ConcatenatedModule.codeGeneration (/Users/apple/Documents/resglass/node_modules/webpack/lib/optimize/ConcatenatedModule.js:1189:24)
    at /Users/apple/Documents/resglass/node_modules/webpack/lib/Compilation.js:3323:22
    at /Users/apple/Documents/resglass/node_modules/webpack/lib/Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (/Users/apple/Documents/resglass/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Cache.get (/Users/apple/Documents/resglass/node_modules/webpack/lib/Cache.js:75:18)
    at ItemCacheFacade.get (/Users/apple/Documents/resglass/node_modules/webpack/lib/CacheFacade.js:111:15)
    at Compilation._codeGenerationModule (/Users/apple/Documents/resglass/node_modules/webpack/lib/Compilation.js:3316:9)
    at /Users/apple/Documents/resglass/node_modules/webpack/lib/Compilation.js:3223:11
    at arrayIterator (/Users/apple/Documents/resglass/node_modules/neo-async/async.js:3467:9)

This is a part of webpack config

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
...

optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        include: /\.min\.js$/,
      }),
      new CssMinimizerPlugin(),
    ],
    providedExports: false,
  },

So this is a difference between old versions and new ones:

image

And these are versions of webpack and webpack minimize plugins

    "webpack": "^5.0.0",
    "terser-webpack-plugin": "^5.2.4",
    "css-minimizer-webpack-plugin": "^3.1.1",

First I didn't upgrade them but then I found that for webpack there is a newer release 5.68.0 and css-minimizer-webpack-plugin can be upgraded to v3.4.1, but nothing changed when I upgraded these packages.

Again, if minimize is set to false everything works fine, but need to minimize bundle for production. Do I need to add something to my webpack config or downgrade d3-transition package to be able to bundle project?

TkhiienLok commented 2 years ago

I guess this issue is more likely related to https://github.com/d3/d3-selection repository, right? Because in release 3.0.0 they "adopted type: module" https://github.com/d3/d3-selection/releases

TkhiienLok commented 2 years ago

Ok, I found an issue. Ishould have used providedExports option of webpack optimization set to true. https://webpack.js.org/configuration/optimization/