minify unexpect transform

[poyoho]

Describe the bug

run for this config

// run `node index.js` in the terminal
const esbuild = require('esbuild');

const code = `
const module = import('./a.js')
`;

esbuild
  .transform(code, {
    minify: true,
    target: 'chrome60',
  })
  .then((result) => {
    // {
    //   warnings: [],
    //   code: 'var i=Object.create;var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,r=Object.prototype.hasOwnProperty;var s=o=>c(o,"__esModule",{value:!0});var u=(o,m,e,d)=>{if(m&&typeof m=="object"||typeof m=="function")for(let t of n(m))!r.call(o,t)&&(e||t!=="default")&&c(o,t,{get:()=>m[t],enumerable:!(d=l(m,t))||d.enumerable});return o},a=(o,m)=>u(s(c(o!=null?i(p(o)):{},"default",!m&&o&&o.__esModule?{get:()=>o.default,enumerable:!0}:{value:o,enumerable:!0})),o);const module=Promise.resolve().then(()=>a(require("./a.js")));\n',
    //   map: ''
    // }
    console.log(result);
  });

esbuild transform dynamic import to require.

I think need to polyfill import in chrome60

like this:

import('./workerImport-a2c311d3.js')

to

require('./workerImport-a2c311d3.js')

Reproduction

https://stackblitz.com/edit/node-qfc2yz?devtoolsheight=33&file=index.js

[poyoho]

vitejs/vite#7179

[evanw]

This is because import() expressions are only supported in Chrome 63+: https://caniuse.com/es6-module-dynamic-import.

[poyoho]

yep!

But transform it to require can't to run too. Do you have a solution?

[evanw]

The transformation of import to require just allows the code to be parsed without causing a syntax error. This must be done by esbuild because esbuild is in charge of syntax-related stuff.

From there, you can use that to write some code that loads the file however you'd like for it to be loaded. You could do this for example, which loads the file as a string:

window.require = function (what) {
  return {
    then: function (cb) {
      return fetch(what)
        .then(function (r) { return r.text() })
        .then(function (text) { return { 'default': text } })
        .then(cb)
    },
  }
}

[swandir]

Dynamic imports can be polyfilled with reliance on a global function name.

Perhaps the function name should be configurable in ESBuild (can't seem to find an option in the docs)? And maybe substitution should not happen in transform mode if the option is not supplied — unless format is cjs probably.

[evanw]

With the upcoming release you will be able to disable this transform with --supported:dynamic-import=true. This will tell esbuild to pretend it’s supported even though it’s actually not, which will leave import() in the output.

Closing as fixed because there is now a way to do this.