Support older build targets

[milamer]

ESBuild supports different build targets to make the code backwards compatible with older devices. Currently remix only provides a target in the build command for the server build, but not the client build.

See compiler.ts

[milamer]

Patch

For 0.18.0-pre.0

diff --git a/node_modules/@remix-run/dev/compiler.js b/node_modules/@remix-run/dev/compiler.js
index 923d122..e9378a7 100644
--- a/node_modules/@remix-run/dev/compiler.js
+++ b/node_modules/@remix-run/dev/compiler.js
@@ -177,6 +177,7 @@ async function createBrowserBuild(config, options) {
   return esbuild.build({
     entryPoints,
     outdir: config.assetsBuildDirectory,
+    target: config.browserBuildTarget,
     platform: "browser",
     format: "esm",
     external: externals,
diff --git a/node_modules/@remix-run/dev/config.js b/node_modules/@remix-run/dev/config.js
index e4d5d8a..9f3b85e 100644
--- a/node_modules/@remix-run/dev/config.js
+++ b/node_modules/@remix-run/dev/config.js
@@ -100,6 +100,7 @@ async function readConfig(remixRoot, serverMode = serverModes.ServerMode.Product
     devServerPort,
     assetsBuildDirectory,
     publicPath,
+    browserBuildTarget: appConfig.browserBuildTarget,
     rootDirectory,
     routes: routes$1,
     serverBuildDirectory,

With this you can add a build target in remix.config.js

module.exports = {
  appDirectory: 'app',
  browserBuildDirectory: 'public/build',
  browserBuildTarget: 'es2018',
  publicPath: '/build/',
  serverBuildDirectory: 'build',
  devServerPort: 8002,
}

Supported features

Be aware that unsupported features can lead to endless loops (e.g. build target es5 with const in you code).

Note that if you use a syntax feature that esbuild doesn't yet have support for transforming to your current language target, esbuild will generate an error where the unsupported syntax is used. This is often the case when targeting the es5 language version, for example, since esbuild only supports transforming most newer JavaScript syntax features to es6.

More info on supported features

Build targets

You can define the build target in the remix.config.js as browserBuildTarget. It can either be a single string with the desired target (e.g. es2018) or an array of targets. It also supports browser versions!

interface Config {
  browserBuildTarget : string | Array<string>
}
// eg
const buildTarget = [
    'es2020',
    'chrome58',
    'firefox57',
    'safari11',
    'edge16',
    'node12',
]

More info on possible build targets

[markiavelli7]

Thanks @milamer!! You rock!

The structure of @remix-run/dev/config.js has changed a little bit in v0.18+, but it's a pretty minor change and the same principle of declaring and returning the build target is the same.

[vijaybritto]

I'm trying to port part of our Enterprise app to Remix and the browser support we need is ES2018 at least. Is adding target property going to be supported any time? Or there any technical reasons for this?
I can open a PR.

[unlinking]

Need it too.

[machour]

@vijaybritto we always welcome PRs :)

[sergiodxa]

You can define the build target in the remix.config.js as browserBuildTarget. It can either be a single string with the desired target (e.g. es2018) or an array of targets. It also supports browser versions!

I think using .browserlist for this would be better since that's also used by other tools.

[mciparelli]

It's currently not possible to specify a build target and it defaults to node 14 (https://github.com/remix-run/remix/blob/main/packages/remix-dev/build.ts#L19)
top level await does not work because of this.

[soundstep]

I've got similar needs I think, both for the js client output and also the js that is in the html page.
I've created a discussion in the Remix discord to get some advices.