Outlaying Eik react complications

eik-react-issue.md

The issue

1. Typescript converts to a js version with jsx files This is just Lars' build step that outputs to a /lib folder

2. I add a rollup build to convert out the jsx so its pure js with esm

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default {
    input: './lib/client/index.js',
    preserveModules: true,
    output: {
        dir: './.eik',
        format: 'es',
        paths: {
            'react': '@pika/react',
            'react-dom': '@pika/react-dom',
        }
    },
    plugins: [
        resolve({
            extensions: ['.js', '.jsx'],
        }),
        commonjs(),
        babel({
            exclude: 'node_modules/**',
            babelrc: false,
            presets: [
                [
                    '@babel/env',
                    {
                        targets: {
                            esmodules: true,
                        },
                    },
                ],
                '@babel/preset-react',
            ],
        }),
    ],
    external: ['react', 'react-dom', '@pika/react', '@pika/react-dom'],
};

This outputs to a .eik/lib folder

3. I run eik over that

I've got an assets.json file that points to the .eik folder and references our import map

{
  "name": "displayads-podlet-horseshoe-test",
  "major": 1,
  "server": "https://assets.finn.no",
  "js": {
    "input": "./.eik/lib/client/index.js",
    "options": {}
  },
  "css": {
    "input": "./src/client/index.css",
    "options": {}
  },
  "import-map": [ "https://assets.finn.no/map/finn/v2" ]
}

I then run the build with eik package

The main bundle succeeds. The import map maps react and react-dom to absolute urls

The fallback bundle for ie11 fails on lines like import { useState } from 'react' Since react is commonjs and doesn't export anything, it can't find useState.

Writing it like this would have worked:

import React from 'react'
const { useState } = React;

However, it seems that @babel/preset-env converts jsx to import { createElement } from 'react' anyway so theres no real way to avoid this syntax.

Additional information

This works in the main bundle since our import map maps the bare import react to an absolute URL on Eik. It does not work in our ie11 fallback bundle because since ie11 does not support esm we can't be importing from absolute URLs at all so it is inlining the react package from node_modules

Current working solution

In my rollup build script, I'm using the paths output configuration to map react and react-dom to @pika/react and @pika/react-dom which are versions of react and react dom that have been converted to esm

With this in place, everything works.