How to property use createRoot when using custom entries? (export 'default' (imported as 'App') was not found)

[AllenAttuned]

I'm trying to set up a simple app which is utilizing the custom entry feature of Modern.js: src/entry.tsx Docs .

Based on the docs, creating a file src/entry.jsx, and setting the source.enableCustomEntry to be truthy, should allow you to define a custom entry point into the application, rather than Modern.js assuming src/App.jsx is the entry.

However, using the following src/entry.jsx causes Modern.js to fail with this error:

error   Compile error: 
Failed to compile, check the errors for troubleshooting.
File: /.../node_modules/.modern-js/index/runtime-global-context.js:1:1
export 'default' (imported as 'App') was not found in '@_modern_js_src/entry.js' (module has no exports)

// src/entry.jsx

import { createRoot } from '@modern-js/runtime/react';
import { render } from '@modern-js/runtime/browser';
import App from './App';

const ModernRoot = createRoot(App);

async function beforeRender() {
  console.log('doing something here');
}

beforeRender().then(() => {
  render(<ModernRoot />);
});

My src/App.tsx contains the following (using named exports also fails):

// src/App.jsx

export default function() {
  return (
    <h1>This is App.tsx</h1>
  );
}

The createRoot docs suggest that its argument is optional, and if not provided will use the default from src/App.tsx. This error occurs regardless of if the argument is provided or not. Relevant createRoot source.

I have the following modern.config.ts which is customized to produce an SPA which is to be served statically.

// modern.config.ts

export default defineConfig({
    output: {
        cleanDistPath: true,
        disableSourceMap: false,
        polyfill: 'off',
        legalComments: 'none',
        svgDefaultExport: 'url',
        assetPrefix: '...',
        distPath: {
            html: '',
        },
        filename: {
            js: `[name].[${version}].[contenthash:8].js`,
            css: `[name].[${version}].[contenthash:8].css`,
            svg: `[name].[${version}].[contenthash:8].svg`,
            font: `[name].[${version}].[contenthash:8][ext]`,
            image: `[name].[${version}].[contenthash:8][ext]`,
            media: `[name].[${version}].[contenthash:8][ext]`
        },
    },
    html: {
        disableHtmlFolder: true,
    },
    runtime: {
        router: false,
    },
    deploy: {
        microFrontend: {
            enableHtmlEntry: false,
            externalBasicLibrary: false
        }
    },
    dev: {
        assetPrefix: '...',
        host: '...'
    },
    source: {
        mainEntryName: 'index',
        enableAsyncEntry: true,
        enableCustomEntry: true,
        globalVars: {
            PKG_VERSION: packageInfo.version,
            PKG_NAME: packageInfo.name,
        },
    },
    plugins: [
        appTools({
            bundler: 'webpack'
        }),
    ],
    tools: {
        webpack: (_, { appendPlugins, webpack }) => {
            appendPlugins([
                new DotenvPlugin({
                    ignoreStub: true,
                    path: envPath,
                }),
                new webpack.NormalModuleReplacementPlugin(
                   /.../,
                   path.resolve(__dirname, 'node_modules/...')
                ),
            ]);
        }
    }
});

Here's some diagnostics about my system:

• MacOS 14.4.1
• Node v20.10.0/ NPM 10.2.3
• React/DOM v17.0.2
• Modern.js v2.57.0 (recently upgraded - the error also occurred on v2.56.2