Unable to use @swc/plugin-transform-imports

[RomainFallet]

Hello,

I tried to use @swc/plugin-transform-imports to transform my relative TypeScript imports such as:

import * as utils from './utils'

To:

import * as utils from "./utils.js"

With this configuration into ./swrc:

{
  "jsc": {
    "parser": {
      "syntax": "typescript"
    },
    "target": "es2022",
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-transform-imports",
          {
            "./utils": {
              "transform": "./utils.js"
            }
          }
        ]
      ]
    }
  },
  "module": {
    "type": "es6"
  },
  "sourceMaps": true,
  "minify": true
}

But imports are not changed and there is no error. What am I doing wrong ?

You can find the reproduction repository here: https://github.com/RomainFallet/swc-transform-plugin-issue

Thanks for the help.

[tientm-dsv]

Does anyone have a solution? I also met this issue too.

[yuhr]

Same here. I'm using the following option with https​://esm.sh/​@swc/wasm-web​@1.3.66:

{
	module: { type: "es6" },
	jsc: {
		target: "es2022",
		parser: { syntax: "typescript", tsx: true, dynamicImport: true },
		transform: { react: { runtime: "automatic", importSource: "react" } },
		experimental: {
			plugins: [["transform-imports", { "^(https:.+)$": { transform: "/api/modules/${1}" } }]],
		},
	},
}

[yuhr]

Gotcha, this is the problem in my case: https://github.com/swc-project/swc/issues/3934.

[yuhr]

FWIW I managed to get it to work by using parse before transform:

const ast = await parse(content, {
	syntax: "typescript",
	tsx: true,
	dynamicImport: true,
	target: "es2022",
})
for (const node of ast.body) {
	if (node.type === "ImportDeclaration") {
		node.source.value = node.source.value.replace(/^(https:.+)$/, "/api/modules/$1")
		node.source.raw = `"${node.source.value}"`
	}
}
const { code } = await transform(ast, { ...options })

[rlmcneary2]

Edited to add skipDefaultConversion information.

Needed this capability today to convert import names from a ".ts" extension to a ".js" extension. After perusing the code I came up with this configuration to do that:

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-transform-imports",
          {
            "^(.*?)(\\.ts)$": {
              "skipDefaultConversion": true,
              "transform": "{{matches.[1]}}.js"
            }
          }
        ]
      ]
    },
  },
}

• The "key" in the options passed to the plugin is going to be used as a regex and it will be passed the import path for comparison.
• The value of transform is a handlebars template. The template renderer is passed a HashMap that contains a matches property. This property contains the regex capture groups in an array (0 is the matched string). In the example above the path without an extension is in element 1 of matches.
• By default the plugin will change the import to act as if the module being imported has a default export (from { foo } to foo) if you don't want that behavior add the skipDefaultConversion property and set it to true.

Anyway the configuration above does the following conversion:

// input: before transpilation
import { fubar } from "../foo/bar.ts";

// output: after transpilation
import { fubar } from "../foo/bar.js";

[Roma-Kyrnis]

Hi! For me, it's working only with

import { authConversation, deAuthConversation } from './conversations/auth.ts';

imports But with

import ua from '../config/locales/ua.ts';

it does not work.

And for index.ts files, it's working okay. But then something transforms import from

 import { deAuthHears } from './hears/index.ts';

to

import { deAuthHears } from './hears';

But I need a full path to work with ESM runner

Does someone have an idea why?

I'm using a .swrrc file with settings

{
  // "$schema": "https://json.schemastore.org/swcrc",
  "exclude": [
    "node_modules/"
  ],
  "jsc": {
    "target": "esnext",
    "paths": {
      "*/index.js": ["*", "/index.js"]
    },
    "baseUrl": "./src/",
    "parser": {
      "syntax": "typescript",
      "decorators": true,
      "dynamicImport": true,
      "dts": true
    },
    "transform": {
      "legacyDecorator": true,
      "decoratorMetadata": true
    },
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-transform-imports",
          {
            "^(.*?)(\\.ts)$": {
              "skipDefaultConversion": true,
              "transform": "{{matches.[1]}}.js"
            }
          }
        ]
      ]
    }
  },
  "module": {
    "type": "nodenext"
  }
}

[eliyya]

In my case I need transform the exports

export * from "./classes/Client.ts";
export * from "./classes/User.ts";

to

export * from "./classes/Client.js";
export * from "./classes/User.js";

but doesn't works, only with imports

And I observe that the imports with * like import * from './x.ts' doesn't work too

Any sugestion?

my .swcrc

{
  "exclude": "node_modules/",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "topLevelAwait": true
    },
    "target": "esnext",
    "baseUrl": ".",
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-transform-imports",
          {
          "^(.*?)(\\.ts)$": {
              "skipDefaultConversion": true,
              "transform": "{{matches.[1]}}.js"
            }
          }
        ]
      ]
    }
  },
  "module": {
    "type": "nodenext"
  }
}

[andkulakov]

@Roma-Kyrnis in case you're still having issue with compiling

import { deAuthHears } from './hears/index.ts';

to

import { deAuthHears } from './hears';

I found this option https://swc.rs/docs/configuration/modules#resolvefully so you need to add it to your config file

"module": {
  "type": "nodenext",
  "resolveFully": true
}

[kdy1]

Closing as the plugin is not for appending extension