How can I customize SWC configuration to target ES2015+?

[hueter]

Hello,

I am using SWC with Shakapacker and it's great! 🎉

However, I ran into an issue today. I'm trying to transpile to ES2015+ so I can use web components in my app, so I went to the SWC config and tried to set target: "es2015".

However, this setting is incompatible with Shakapacker's default SWC env setting, defined here:

shakapacker/package/swc/index.js

Lines 37 to 40 in cdf3283

	env: {
	coreJs: 3,
	exclude: ['transform-typeof-symbol'],
	mode: 'entry'

When I specify target as per the SWC docs, it results in a compilation error:

I went poking around node_modules to see if I could fix it, and this worked:

module.exports = loaderMatches(webpackLoader, 'swc', () => ({
  test: /\.(ts|tsx|js|jsx|mjs|coffee)?(\.erb)?$/,
  ...jscommon,
  use: ({ resource }) => {
    const swcConfig = getSwcLoaderConfig(resource);
    // I added this line below
    delete swcConfig.options.env
    return swcConfig
  }
}))

But as you can tell, this is janky and I would rather not fork the repo.

Do y'all have any recommendations? Or an alternative strategy to transpile to ES2015+?

Thank you!

[ahangarha]

Thanks for giving us feedback.

CC @justin808 @Judahmeek

[hueter]

Update: I actually found a workaround that transpiles to ES2015+, just by setting the browserslist config in the env.targets:

swc.config.js

const customConfig = {
  options: {
    jsc: {/* etc */},
    env: {
      // this overrides the Shakapacker defaults
      coreJs: null,
      exclude: [],
      mode: "entry",
      // this transpiles to ES2021+
      targets: "last 2 years",
    },
  },
};

module.exports = customConfig;

[ahangarha]

So basically you needed to override the default config for env entries.

Would be nice to include in the documentation.