Module aliases and jsx syntax extensions

[aiji42]

Proposal

I propose to add two new properties to remix.config.js to allow control over the compiler.

1. Module alias mapping for resolvers
2. Options to control JSX syntax

1. Module alias mapping for resolvers

const path = require('path')

module.exports = {
  moduleAliasMap: {
    'org-pkg-1': 'apps/libs/replaced-pkg.js', // Replaced on both server and browser
    'org-pkg-2:server': require.resolve('replaced-pkg'), // Replaced on only server side
    'org-pkg-2:browser': require.resolve('replaced-pkg/esm/index.js'), // Replaced on only browser side
  }
}

2. Options to control JSX syntax

module.exports = {
  jex: {
    inject: `import { jsx } from '@emotion/react'; import { Fragment } from 'react'`,
    factory: 'jsx',
    fragment: 'Fragment'
  }
}

Background of this proposal

We have seen many reports of problems such as "I can't build xxxx modules" or "I can't use Remix and xxxx together. In most cases, the cause is one of the followings.

• There is a discrepancy between the runtime expected by the module and the runtime selected by Remix.
  • For example, module expects node, remix selects edge worker, etc.
• The library was originally created with the assumption that the compiler settings would be extended.
  • For example, @emotion/react and preact need to control jsx syntax.

These issues can be solved by controlling the plugins and inject in esbuild. For this reason, I previously created a PR here. However, that approach was unacceptable because it exposed the esbuild configuration and made it possible to rewrite all the settings, which would have had an excessive impact and would have increased the likelihood that Remix would lock the compiler into esbuild.
@kentcdodds and @MichaelDeBoey then encouraged me to open the discussion.

Actual use cases

Here is an example of selecting Cloudflare Workers as the runtime and using @emotion/react.
Since @motion/server is not intended to run on the edge, we need to detoxify the modules that depend on node. (Fortunately, these modules are not necessary for using @emotion with Remix.)

module.exports = {
  serverBuildTarget: "cloudflare-workers",
  server: "./server.js",
  devServerBroadcastDelay: 1000,
  ignoredRouteFiles: [".*"],
  moduleAliasMap: {
    'through': require.resolve('no-op'),
    'tokenize': require.resolve('no-op'),
    'pipe': require.resolve('no-op'),
  },
  jex: {
    inject: `import { jsx } from '@emotion/react'; import { Fragment } from 'react'`,
    factory: 'jsx',
    fragment: 'Fragment'
  }
}

These changes are not based on specific compiler behavior. Therefore, it should not be a problem if Remix replaces a compiler in the future.

I welcome your comments.