Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

185
Vistas
How to use babel-loader with native es6 modules?

I'm use native es6 modules on static site.

<script type="module" src="./main.js"></script>

Before deploying, I pass js files through babel

// webpack.config.js

rules: [
  {
    test: /\.js$/i,
    exclude: /node_modules/,
    use: ['babel-loader'],
  }
]

// .babelrc

  {
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": false,
          }
        ]
      ]
    }

By default babel turns modules into common js, although I have a flag "modules": false in my .babelrc

I don't want babel to turn modules into commonjs, I just want to turn everything except import and export in es2015, so that I can use native modules in the browser

Like this: // main.js before

export default () => {
  return 'Hello world!'
}

// main.js after babel

export default function () {
  return 'Hello world!'
}

According to the documentation babel provides a module: false option, but it doesn't work for me

Also, not working caller with supportsStaticESM

  {
    test: /\.js$/i,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        caller: {
          supportsStaticESM: true
        }
      }
    }
  }

However, when I use babel-cli I get what I need!

i think webpack is not friendly with babel in this case

Thanks.

"babel-loader": "8.0.5"
"webpack": "^5.40.0"
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

For me just specifying target did the trick.

module.exports = {
    entry: './js/index.js',
    // ...
    target: ['web', 'es5']
}
about 4 years ago · Juan Pablo Isaza Denunciar

0

If it works with Babel but not with Webpack, then most likely Webpack configuration overrides setting from Babel.

Please try to remove presets: ['@babel/preset-env'], from Webpack config (if present).

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda