Output mjs file extension

[stefee]

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

#2953

babel/babel#9144

[snowyu]

Why has this merged feature not been released for two years?

[kdy1]

It's not merged

[wintercounter]

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.

[himself65]

Landed in swc-project/cli#286

Should close this issue

[himself65]

No, after I tried, even the output file is mjs, but the code is still like import './xxx.js'

[shimarulin]

In #8742 (comment) 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";
//...

[josh-i386g]

@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"
  }

[Clashsoft]

Is there an equivalent .swcrc option?

[sirzeta]

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 ".mjs" 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.

[hanseltime]

I wanted to echo what @sirzeta reported. We do have the out-file-extension command, but it when used with resolveFully the resolve fully seems unaware of the extension to use and creates the broken links. It would be nice to have this supported in swc/core

[kdy1]

I'll work take on this when I have some time for it.

[hanseltime]

@kdy1 - I ended up cobbling together a solution locally to this problem since the above hack wasn't working for me and I figured that I may as well spend time debugging a fix instead of a hack. If you already have something you're working on or if you have a different fix in mind because my PR did the fix in the wrong spot or isn't up to par for rust in this project, etc, just let me know and I can bow out or make requested changes (whatever works best for you).

#9784

Thanks!

[hanseltime]

@kdy1 - one thing that I didn't do was add any documentation to the site for this option. Should that be added as well?

[kdy1]

Yeah, I guess so. Can you send a PR to https://github.com/swc-project/website ?

[hanseltime]

Awesome. I added an attempt at the documentation here: swc-project/website#278