Monday, 1 August 2022

Webpack + @babel/preset-env with dynamic import... package.module not honored?

I don't know if it's the intended behavior or there is something wrong with my configuration. As far as I know:

With this configuration:

{
  "presets": [
    "@babel/preset-typescript",
    ["@babel/preset-env", {
      "corejs": 3,
      "useBuiltIns": "usage",
      "bugfixes": true
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-typescript", {
      "allowDeclareFields": true
    }],
    "@babel/plugin-proposal-class-properties"
  ]
}

When I dynamical import any library, the wrong file is imported. For example, with vanilla-lazyload library, the following is defined in package.json:

{
  "name": "vanilla-lazyload",
  "main": "dist/lazyload.min.js",
  "module": "dist/lazyload.esm.js"
}

Importing with:

import('vanilla-lazyload').then(({ default: LazyLoad }) => { /* use */ });

.... dist/lazyload.min.js will be bundled, and NOT dist/lazyload.esm.js.

Any clue?



from Webpack + @babel/preset-env with dynamic import... package.module not honored?

No comments:

Post a Comment