prateekbh/babel-esm-plugin

Add this plugin to generate mirrored esm modules for your existing bundles

Hello!

I work with Coinbase on their web and javaScript infrastructure. We focus on shipping better quality code and enabling our engineers to ship better and robust features faster to our consumers. I am also pretty focused on the performance of our client code that we ship via our web products and react antive apps. Previously I contributed to next.js and Preact

If you wanna discuss stuff around web or ask me anything use this link.

babel-esm-plugin's Issues

Syntax Error: Error: [BABEL] /home/isub/My Space/gakkou-in/src/main.ts: .options_ is not a valid Plugin property

I don't know what's the problem.

generate bundle with a different targets

In my babel config I configured my preset-env to target IE11 and higher, and when I added the babel-esm-plugin I thought it would create another bundle which targets esmodules regardless of the targets that are defined in the babel config (in my case IE11).

When I do a standalone build that targets esmodules the filesize is considerably smaller and preserves ES6 features like classes etc, but when I use the plugin with my babel config and inspect the ES6 bundle geneerated by this plugin it doesn't preserve ES6 features.

Is this expected behavior or am I doing something wrong? If it's unclear I could setup a test case to provide more information.

Does the plugin work with babel.config.js and browserslist ?

My @babel/present-env is defined in a babel.config.js file but it seems it cannot read this because it giving me w warning 'Adding @babel/preset-env because it was not found'

My targets are defined in a .browserslistrc and i'm not sure if this is used by the babel preset that is added by this plugin.

It does generate a .es6 file but this does not contain classes and const variables so my guess is that this is not a esm build.

Crashes when entry is a string

Hi! First of all, this plugin is awesome! )

I have played a little bit and found that it doesn't handle case when the entry is a string but not an object.

Example:

{
 // webpack configuration
 entry: './index.js'
}

Error message

ERROR in Entry module not found: Error: Can't resolve 'd' in '/test/src-example'

ERROR in Entry module not found: Error: Can't resolve 'e' in '/test/src-example'

ERROR in Entry module not found: Error: Can't resolve 'i' in '/test/src-example'

ERROR in Entry module not found: Error: Can't resolve 'n' in '/test/src-example'

ERROR in Entry module not found: Error: Can't resolve 'x' in '/test/src-example'

several loaders support

this code

test: /\.coffee$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        'presets': [
          [
            '@babel/preset-env', {
            'targets': {
              'browsers': ['last 2 versions', 'safari >= 7']
            }
          }
          ]
        ]
      }
    },
    'coffee-loader'
  ]

fails with Babel-loader config not found!!! because plugin code does not expect use to be an array

Document usage with html-webpack-plugin

Hi, I've landed here via https://web.dev/publish-modern-javascript/. This plugin looks promising. I'm using the html-webpack-plugin. How would one integrate those two plugins? A short notice or wiki documentation would be very welcome. Thank you!

Is this plugin still in development? Is it fully compat with latest webpack 5?

Hi, as per the title, I'd like to know if this plugin is fully compat with webpack 5, and if it's still in development.

Thank you, regards

Got a question around asyncTap

Yo dude. I came across your comments on GitHub. Were you able to solve the issue you had? It was around needing a tapAsyc. Pretty much I’ve got the same problem where this.hooks.thisCompilation.tap throws an error because tap is undefined.

TypeError: Cannot read property 'includes' of undefined

Error:

(node:37856) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'includes' of undefined
    at config.module.rules.forEach.rule (.\node_modules\babel-esm-plugin\src\index.js:187:23)

Occurs in this config:

module: {
      rules: [
        {
          test: /\.svelte$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'svelte-loader',
          },
        },
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', {}],
              ],
            },
          },
        },
      ],
    },

Does not handle exterals

You will get compile time errors like this: Module not found: Error: Can't resolve '...' in '...'

child compiler's assets does not have `webpackJsonpCallback` function

Any assets created by babel-esm-plugin does not have webpackJsonpCallback to load the respective chucks.

Does not work with .babelrc

Currently this cannot detect any options supplied from .babelrc. We need to add this functionality

Switch dependencies and devDependencies

It seems like your dependencies and devDependencies are the wrong way around. ava and webpack should definitely be devDependencies since they're only used during development/testing. chalk, babel-loader and their peerDependencies should be normal dependencies since they are used in the production build. release-it, webpack-cli and deepcopy seen to be correct.

The reason I bring this up is because I'm using Yarn PnP, which is very strict about correct dependency declaration. If a package requires another package without it being listed in the (non-dev) dependencies, it will throw an error which is currently the case.

Peer dependency of fixed webpack version

Hi,

Interesting plugin which I like to try out. But i'm facing the issue that an old version of webpack is required as a peer dependency.

Is there a reason why you required version 4.28.4 of webpack ?

Fails build with `mini-css-extract-plugin`

If mini-css-extract-plugin is added with this plugin, it gives the following error.

ERROR in ./style.css
    Module build failed: TypeError: this[NS] is not a function
        at childCompiler.runAsChild (/Users/prateekbh/projects/webpack-exp/node_modules/mini-css-extract-plugin/dist/loader.js:148:15)
        at compile (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compiler.js:242:11)
        at hooks.afterCompile.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compiler.js:487:14)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at compilation.seal.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compiler.js:484:30)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at hooks.optimizeAssets.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:966:35)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at hooks.optimizeChunkAssets.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:957:32)
        at _err0 (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
        at /Users/prateekbh/projects/webpack-exp/node_modules/uglifyjs-webpack-plugin/dist/index.js:334:11
        at _class.runTasks (/Users/prateekbh/projects/webpack-exp/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:63:9)
        at UglifyJsPlugin.optimizeFn (/Users/prateekbh/projects/webpack-exp/node_modules/uglifyjs-webpack-plugin/dist/index.js:253:16)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at hooks.additionalAssets.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:952:36)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at hooks.optimizeTree.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:948:32)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at Compilation.seal (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:890:27)
        at hooks.make.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compiler.js:481:17)
        at _err0 (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
        at _addModuleChain (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:758:12)
        at processModuleDependencies.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:697:9)
        at _combinedTickCallback (internal/process/next_tick.js:131:7)
        at process._tickCallback (internal/process/next_tick.js:180:9)
     @ ./index.js 3:0-22

As a first time plugin dev i have no idea what this means. Please help

Built in webpack modes have no effect

While default bundles are auto minified by webpack --mode=production. Files generated by this are not.

Also webpack --mode=development have no effect on output

Different hash

Hi prateekbh

First of all, thank you for this great plugin! A nice way to ship less code.

However, I just encountered a bug: The filename [hash] and [chunkhash] don't match those used otherwise by Webpack - this makes cache busting impossible when not using the HTML plugin.

Best regards,
Fabian von Ellerts

Breaking with webpack 5 rc3

Hi. I have installed the webpack rc3 and I have the following error during compilation
xxxx\node_modules\webpack-cli\bin\cli.js:93
throw err;
^
Error: Cannot find module 'webpack/lib/MultiEntryPlugin'

Do you have any plans to think about a possible resolution? Thanks so much for your work. I appreciate

empty sourcemaps for esm bundle

the .es6 assets that are generated with this plugin, have an empty sourcemap:

{"version":3,"sources":[],"names":[],"mappings":"","file":"esm/vendor-b2c1fb4206cbdb61d74d.es6.js","sourceRoot":""}

If you want I can make a test case webpack.config with devtool: source-map i

TypeError: Cannot read property 'targets' of undefined

Error:

(node:51108) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'targets' of undefined
    at options.presets.forEach.preset (D:\Projects\go\src\github.com\spaceavocado\svelte-router\node_modules\babel-esm-plugin\src\index.js:226:35)

Occurs in this config:

module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env'],
              ],
            },
          },
        },
      ],
    },

Doesn't seem to exclude externals from bundle

I use https://github.com/liady/webpack-node-externals to handle externals and cjs is ok, but esm include all of external dependencies.
Maybe I did something wrong?

does it work with jest?

I'm trying to run few tests with jest and it breaks since esm is not supported, will this module helps in this case?

Make it work with webpack 3.x

Currently only works with webpack 4.x.
Check if this can work with webpack 3.x

Does not work with vue-loader?

config like this :

 module: {
      rules: [{
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    targets: {
                                        browsers: ["last 2 versions", "safari >= 7"]
                                    }
                                }
                            ]
                        ]
                    }
                }
            },
            ...
        ]
 },
 plugins: [
  new VueLoaderPlugin(),
  new BabelEsmPlugin()
],

some errors:

UnhandledPromiseRejectionWarning: Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
    at VueLoaderPlugin.apply (/Users/wzc0x0/Desktop/MySpace/webpack-boilerplate/node_modules/vue-loader/lib/plugin.js:65:13
)
    at compiler.hooks.make.tapAsync (/Users/wzc0x0/Desktop/MySpace/webpack-boilerplate/node_modules/babel-esm-plugin/src/in
dex.js:66:18)

Combine with webpack-manifest-plugin

When combining the Plugin with the webpack-manifest-plugin the es6 Version will get generated correctly but the entry of the legacy file in the Manifest is missing.

The simplified plugin configuration to this issue looks like this:

plugins: [
  new WebpackManifestPlugin({
    basePath: paths.ASSET_DIR
  }),
  new BabelEsmPlugin({ 
    chunkFilename: 'javascripts/chunks/[chunkhash].[name].es6.js',
    filename: 'javascripts/[chunkhash].[name].es6.js'
  })
]

The main.js and the main.es6.js file will get generated but the manifest.json will just contain the URL to the es6 version and the legacy file is missing in the map of source filenames.

{
  "/main.js": "/javascripts/6aed7290bc40b110cb97.main.js",
}

Is this a configuration issue?

Automatically switch Terser/Uglify to ecma:8 input & output

The child compiler spawned by babel-preset-modules needs to change Terser's parsing and output modes to ecma:8 in order to preserve arrow functions and other constructs, and to allow it to minify modern syntax effectively.

Make it work with webpack dev server

Make this work with webpack dev server as requested in preactjs/preact-cli#721