webpack 5 ts-babel bundle target to ie11 fails with dynamic import but works with require-CodePudding

I am struggling to figure out what is the issue here. I have a lib the needs to import a external module that has full support for webpack. The whole build works fine in IE and core-js is added where it is needed. The problem is that if I use a dynamic import everything then breaks for IE11 neither the serve works nor the build.

I have the following:

//tsconfig.json
{
  "compilerOptions": {
    //   "sourceMap": true,
      "target": "ESNext",
      "module": "ESNext",
      "lib": [
          "es2017",
          "dom",
      ],
      "noImplicitUseStrict": true,
      "skipLibCheck": true,
      "moduleResolution": "node",
      "importHelpers": true,
      "isolatedModules": false,
      "allowJs": true,
      "baseUrl": "./",
      "allowSyntheticDefaultImports": true
  },
  "include": [
      "**/*.ts"
  ]
}

//webpack.config.js
const path = require('path');

module.exports =  
{
  entry: './src/index.ts',

  devtool: "eval-source-map",
  output: {
      publicPath: '',
      path: path.resolve(__dirname, 'dist'),
      filename: 'lib.js',
      library: 'myLib',
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        },
      ],
    },
    devServer: {
      static: {
        directory: path.join(__dirname, 'public'),
      },
      compress: true,
      port: 9000,
    },
  
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
  }

// babel.config.js

module.exports = {
      presets: [
      [
        "@babel/preset-env",
        {

          "useBuiltIns": "usage",
          "corejs": {
            "version": 3, 
          },
          "debug": true,
        }
      ],
      ["@babel/preset-typescript"],
    ]
  
}

//.browserlistrc
ie >= 11

//index.ts
const dynamicModule = 'pathtomydynamic';
import(/* webpackIgnore: true */ dynamicModule); //this does not work and breaks the whole build for IE11, used to work fine with core-js
require(/* webpackIgnore: true */ dynamicModule); //works fine while serving and on build, but then does not support magic comments by default, will it have the same effect?

the strange thing about the code above is that dynamic imports used to works with this setup. and now using require(module) works fine but then I have the message complaining that the require has a dynamic value as module path since magic comments does not work for require.

Any ideas of what I might be missing here?

CodePudding user response：

I ended changing the webpack to 4 and it works as expected. Not sure it is an bug but it works for me that way.

That "require" statement does not work, actually. It was because the script was already in the dom when I called it...