emit .js extensions to produce valid ESM import/export paths

[Hotell]

Describe the feature

We are using swc extensively but recently ran into issues when compiling sources to native ESM output.

swc should provide an option to emit explicit extensions within imports even if they are not specified within source code.

• rollup does this by default for example.
• there seems to be a inconsistencies within swc compiler already as if module#resolveFully is used it will unwrap directory import/exports to explicitly emit index.js

NOTE:

We tried using @swc/plugin-transform-imports as a workaround but those transforms happen before swc does the transform ( we also need to use module#resolveFully in order to properly emit directory imports/exports in order to make outputs valid for browser ).

Current behaviour:

// ======
// SOURCE
// ======
export { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, webDarkTheme, webLightTheme } from './themes'; // 🚨 invalid directory path - wont work within browser
export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme } from './utils'; // 🚨 invalid directory path - wont work within browser

export { themeToTokensObject } from './themeToTokensObject';
export { tokens } from './tokens';
export { typographyStyles } from './global'; // 🚨 invalid directory path - wont work within browser

⬇ swc with config ⬇

"module": {
    "type": "es6",
    // ✅✅✅ unwraps directory imports to explicit `index.js`
    "resolveFully": true
  },
  "jsc": {
    "baseUrl": ".",
  }
}

⬇⬇⬇

export { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, webDarkTheme, webLightTheme } from "./themes/index.js"; // ✅
export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme } from "./utils/index.js"; // ✅
export { themeToTokensObject } from "./themeToTokensObject"; // 🚨 invalid ESM
export { tokens } from "./tokens";  // 🚨 invalid ESM
export { typographyStyles } from "./global/index.js"; // ✅

//# sourceMappingURL=index.js.map

Expected behaviour:

// ======
// SOURCE
// ======
export { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, webDarkTheme, webLightTheme } from './themes'; // 🚨 invalid directory path - wont work within browser
export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme } from './utils'; // 🚨 invalid directory path - wont work within browser

export { themeToTokensObject } from './themeToTokensObject';
export { tokens } from './tokens';
export { typographyStyles } from './global'; // 🚨 invalid directory path - wont work within browser

⬇ swc with config ⬇

"module": {
    "type": "es6",
    // ✅✅✅ unwraps directory imports to explicit `index.js`
    "resolveFully": true
  },
  "jsc": {
    "baseUrl": ".",
  }
}

⬇⬇⬇

export { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, webDarkTheme, webLightTheme } from "./themes/index.js"; // ✅
export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme } from "./utils/index.js"; // ✅
export { themeToTokensObject } from "./themeToTokensObject.js"; // ✅
export { tokens } from "./tokens.js";  // ✅
export { typographyStyles } from "./global/index.js"; // ✅

//# sourceMappingURL=index.js.map

Related issues:

• TS + ES Module paths cli#60
• Output mjs file extension #3067

Babel plugin or link to the feature description

No response

Additional context

No response

[shimarulin]

A workaround I know of is to configure tsconfig.json to require the .js extension when imported into the source file. In one of my projects, I set the parameters "module": "NodeNext" and "moduleResolution": "NodeNext":

`tsconfig.json'

⬇⬇⬇

{
  "compilerOptions": {
    "declaration": true,
    "importHelpers": true,
    "module": "NodeNext",
    "strict": true,
    "target": "ESNext",
    "esModuleInterop": true,
    "moduleResolution": "NodeNext"
  }
}

// ======
// SOURCE
// Import from './pkgs.ts'  to './ctx.ts'
// ======
import { ProjectPackages, getProjectPackages } from "~/pkgs.js";

export interface Ctx {
  packages: ProjectPackages | null
}

//...

⬇ swc ⬇

import { getProjectPackages } from "./pkgs.js";
//...

[swc-bot]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.