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

• Babel @babel/preset-env includes @babel/plugin-syntax-dynamic-import by default
• Webpack should "honor" the package.module field and import the corresponding resource

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?

CodePudding user response：

Babel wont interfere with you dynamic import. Here Webpack decides how to resolve your imported modules.

It has a default order of fields it looks for depending on you webpack configs target field. (see https://webpack.js.org/configuration/resolve/#resolvemainfields) The default order is 'browser', 'module' then 'main' and in your example vanilla-lazyload has also the "browser" property in their package.json (https://github.com/verlok/vanilla-lazyload/blob/master/package.json#L7)

{
  "main": "dist/lazyload.min.js",
  "module": "dist/lazyload.esm.js",
  "browser": "dist/lazyload.min.js",
}

You can override webpacks default order by

// webpack config
module.exports = {
  //...
  resolve: {
    mainFields: ['module', 'browser', 'main'],
  },
};

If you don't want to change the order which will also be applied to other imports, you can use the full path: import("vanilla-lazyload/dist/lazyload.esm.min.js") Or you alias it in your webpack config:

const { resolve } = require("path");
module.exports = {
  resolve: {
    alias: {
      "vanilla-lazyload": resolve("node_modules/vanilla-lazyload/dist/lazyload.esm.min.js"),
    },
  },
}

But maybe if the authors of vanilla-lazyload decided to have the .min.js for the browser env then maybe you should check with them if the esm bundle is also good to use. For example it seems not to have been minified (i've opened a PR for that). and it is not transpiled. you have to make sure it will work with your setup / running env.