Dynamic import not being resolved into code-split output files

[quantizor]

Not sure what I'm doing wrong here...

tsconfig:

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Language and Environment */
    "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "jsx": "react" /* Specify what JSX code is generated. */,
    /* Modules */
    "module": "ESNext" /* Specify what module code is generated. */,
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    "resolveJsonModule": true /* Enable importing .json files. */,

    /* Emit */
    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "inlineSources": true /* Include source code in the sourcemaps inside the emitted JavaScript. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    /* Completeness */
    "skipDefaultLibCheck": true /* Skip type checking .d.ts files that are included with TypeScript. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": ["src"],
  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"]
}

tsup config:

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.tsx'],
  format: ['cjs', 'esm'],
  outExtension({ format }) {
    return {
      js: `.${format}.js`,
    };
  },
  name: 'intl',
  splitting: true,
  sourcemap: true,
});

src/index.tsx

const enUS = {locale: 'en-US'}

export const IntlProvider = ({
  locale = 'en-US',
  ...props
}: React.PropsWithChildren<{locale: string}>) => {
  const [resolvedLocaleBag, setResolvedLocaleBag] =
    React.useState<{locale: string}>(enUS);

  React.useLayoutEffect(() => {
    if (locale === 'en-US') {
      setResolvedLocaleBag(enUS);
    } else {
      import(`./locales/${locale}.ts`).then(
        (bag) => setResolvedLocaleBag(bag.default()),
        () => {
          setResolvedLocaleBag(enUS);

          console.warn(
            `Locale "${locale}" is not currently implemented, defaulting to "en-US".`
          );
        }
      );
    }
  }, [locale]);

  return <IntlContext.Provider {...props} value={resolvedLocaleBag} />;
};

src/locales/de-DE.ts

export default function generateIntlContext() {
  const locale = 'de-DE';

  return {
    locale,
  };
}

When I run build I get index.ts generated but it never emits the locales directory

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[quantizor]

Ok I think the issue is the variable interpolation. There is a rollup plugin that could be used to enable the functionality: https://www.npmjs.com/package/@rollup/plugin-dynamic-import-vars

[quantizor]

Looks like esbuild will support this natively in an upcoming release: evanw/esbuild#2508

FWIW I tried doing this with an esbuild plugin (https://github.com/RTVision/esbuild-dynamic-import) and it doesn’t seem to work 🤷🏼

[JounQin]

@probablyup Do you have a reproduction? I tried https://github.com/esbuildr/esbuild-plugin-dynamic-import, it should work as expected.