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.mapExpected 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.mapRelated issues:
Babel plugin or link to the feature description
No response
Additional context
No response
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.
module#resolveFullyis used it will unwrap directory import/exports to explicitly emitindex.jsCurrent behaviour:
⬇ swc with config ⬇
⬇⬇⬇
Expected behaviour:
⬇ swc with config ⬇
⬇⬇⬇
Related issues:
Babel plugin or link to the feature description
No response
Additional context
No response