Open stefee opened 2 years ago
Why has this merged feature not been released for two years?
It's not merged
Will this ever be solved :D I would really need this feature.
When I transpile to modules, my dynamic imports will stop working in Node, because it either requires an extension to be defined, or the file must have .mjs
extension. A simple import('./myModule')
will fail without having an extension defined.
Landed in https://github.com/swc-project/cli/pull/286
Should close this issue
No, after I tried, even the output file is mjs, but the code is still like import './xxx.js'
In https://github.com/swc-project/swc/issues/8742#issuecomment-2040392007 I describe possible workaround. You also need to use the .mts
extension of the sources to import them as .mjs
.
`tsconfig.json'
⬇⬇⬇
{
"compilerOptions": {
"module": "NodeNext",
"moduleResolution": "NodeNext"
"...": "..."
}
}
// ======
// SOURCE
// Import from './pkgs.mts' to './ctx.mts'
// ======
import { ProjectPackages, getProjectPackages } from "~/pkgs.mjs";
export interface Ctx {
packages: ProjectPackages | null
}
//...
⬇ swc --out-file-extension mjs ... ⬇
import { getProjectPackages } from "./pkgs.mjs";
//...
@shimarulin thanks that works
"scripts": {
"swc-watcher": "npx swc src --out-dir dist --strip-leading-paths --watch --out-file-extension mjs",
"swc-runner": "node --watch-path=./dist/ ./dist/index.mjs"
}
Is there an equivalent .swcrc option?
I have a problem with ESM (mjs) modules, when i use something like this:
// src/bootstrap.mjs
import 'reflect-metadata'
import {RegisterRoutes} from './routes.mjs'
import {errorRequestHandler} from './my_module/middleware/index.mjs'
import {getContainer} from './inversify.config.mjs'
and build it with
swc src --out-file-extension mjs --strip-leading-paths -D -d dist
I get the following:
// dist/bootstrap.mjs
import "reflect-metadata";
import { RegisterRoutes } from "./routes.mjs";
// This should be ".mts" extension, no ".js"
import { errorRequestHandler } from "./my_module/middleware/index.js";
import { getContainer } from "./inversify.config.mjs";
if I run this, I get the following error
Error: Directory import '/dist/my_module/middleware' is not supported resolving ES modules imported from /dist/bootstrap.mjs
my configuration is
{
"$schema": "https://swc.rs/schema.json",
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": false,
"decorators": true,
"dynamicImport": true,
"resolveFully": true
},
"transform": {
"decoratorMetadata": true
},
"target": "es2022",
"baseUrl": "."
},
"module": {
"type": "es6",
"noInterop": true,
"resolveFully": true
},
"sourceMaps": true
}
My workaround is transform the import, but theres a catch, check for {{matches.[1]}}.mjs
.
{
"$schema": "https://swc.rs/schema.json",
"jsc": {
"experimental": {
"plugins": [
[
"@swc/plugin-transform-imports",
{
"^(.*?)\\.mjs(x)?$": {
"skipDefaultConversion": true,
"transform": "{{matches.[1]}}.mjs "
}
}
]
There's a space at the end of .mjs. This does the job (it's still a valid import), as it ensures it doesn’t end up returning "./my_module/middleware/index.js"
. This makes my app happy to run but with annoying spaces.
// dist/bootstrap.mjs
import "reflect-metadata";
import { RegisterRoutes } from "./routes.mjs ";
import { errorRequestHandler } from "./my_module/middleware/index.mjs ";
import { getContainer } from "./inversify.config.mjs ";
There's a better way to doing this?.
Thanks.
Describe the feature
A configuration option to output mjs files instead of js files (when using module type es6).
Babel plugin or link to the feature description
https://babeljs.io/docs/en/babel-cli#set-file-extensions
Additional context
https://github.com/swc-project/swc/discussions/2953
https://github.com/babel/babel/pull/9144