nx: nx Typescript generator "Cannot use import statement outside a module"

I’m still working on formulating the exact fix we want to go with here, I’m personally leaning towards dropping @swc-node/register as a supported transpiler. Its not that much faster than ts-node, and this isn’t the first time we’ve hit an issue with it.

It took me some time to figure it out:

• The issue occurs when tsconfig.base.ts has a files property
• Nx 16.8.1 is NOT impacted
• Nx 16.10.0 and Nx 17 are impacted

I created a repo with three branches illustrating the different behaviors: https://github.com/rosahealth/nx-17-local-executor-tsconfig-bug/branches/all

The command to run is npx nx run myngapp:bug-local-executor --skip-nx-cache On 16.8.1, it succeeds. While 16.10 and 17 have the following error:

 >  NX   Cannot use import statement outside a module

Commit from the Nx 17 that makes it crash: https://github.com/rosahealth/nx-17-local-executor-tsconfig-bug/commit/c15ca6889c4b1e64b5ec8933bb413db4c4fa4b34

The content of the files array does not matter. What matters is having the property defined.

@AgentEnder Let me know if I can help further on this topic.

This version of @swc-node/register is not compatible with nx 18 anymore. https://github.com/nrwl/nx/blob/master/package.json#L107 A real fix here would be highly appreciated.

We were able to upgrade by moving tsconfig.base.json "files" into only the tsconfigs that need it. Which we probably should have had it that way to start, but I was lazy 😄

i wrote up a quick article outlining this on dev.to if you all would like to read it. But it just basically has my findings i listed in these comments. Share this with others if this ends up being a fix that works for people.

https://dev.to/quincarter/nx-17-upgrade-errors-cannot-use-import-outside-a-module-1ea8

@joeldbirch Make a git commit hook which enforces the version.

@quincarter thanks for the suggestion, but we haven’t manually run that and the package.json change is still constantly sneaking back into our commits.

My team has been trying to workaround this for a while now. We’ve tried setting the version of @swc-node/register to "1.4.2" as per this comment which works but it seems like NX (or … something) keeps editing the package.json to point back to "^1.6.7". Our team hasn’t pin-pointed what causes this. Does anyone have an idea as to why/how this could happen please?

Looking into this more. Can anyone provide the use case for having files / includes in tsconfig.base.json? I can see how that is causing the problem in newer versions of swc-node.

You can set NX_PREFER_TS_NODE to tell Nx to use it instead, which should avoid this altogether while we work on it.

@AgentEnder - i am not sure if there are any vulnerabilities in the @swc-node/register@1.4.2 package, or what the risks are for downgrading it, but That does seem to work and it looks like all of my commands that are nx related seem to be working right now in my project. Not sure if others can confirm here. Maybe @Sieabah or @antoinepairet can confirm?

A reproduction would certainly help, thanks for the offer.

yep i am having this same issue going from 15 to 16.x.x or even beyond to 17.x.x

package manager

yarn 1.x.x

Node Version

Fails no matter what node version i am on.

node -v
16.15.0

node -v 
18.17.1

it had an error on the initial migration but i reran it and it passed

Could not replace @nrwl/linter with @nx/linter in tools/workspace-plugin/src/generators/web-component-ts/files/package.json.
Ran update-16-0-0-add-nx-packages from @nrwl/linter
  Replace @nrwl/linter with @nx/linter

  UPDATE package.json
  UPDATE .nx/cache/file-map.json
  UPDATE .nx/cache/parsed-lock-file.json
  UPDATE .nx/cache/project-graph.json
  UPDATE migrations.json
---------------------------------------------------------
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }thread '', <unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
thread 'thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', thread 'packages/nx/src/native/plugins/js/ts_import_locators.rs<unnamed>:thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:thread '450:10<unnamed>thread '450' panicked at '<unnamed>:called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs' panicked at ':450:10
10
called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
:450:10
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10thread '
<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10
' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 2, kind: NotFound, message: "No such file or directory" }', packages/nx/src/native/plugins/js/ts_import_locators.rs:450:10

fatal runtime error: failed to initiate panic, error 5
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Command failed: yarn nx _migrate --run-migrations
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 >  NX   Command failed: yarn nx migrate --run-migrations

   Pass --verbose to see the stacktrace.

Failed.generate command

$ nx generate web-component-ts $1 test-here --verbose

>  NX  Generating workspace-plugin:web-component-ts

✔ Which type of library would you like to generate? · component

 >  NX   Cannot use import statement outside a module

......./tools/workspace-plugin/src/generators/web-component-ts/index.ts:1
import {
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Module._compile (......./node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Object.newLoader [as .ts] (......./node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at Module.Mod.require (......./node_modules/nx/bin/init-local.js:207:36)
error Command failed with exit code 1.

feel free to fork this (it’s in gitlab, not github) and you can try to replicate it. Component Library Starter node version 16.16.x or above run the nx migrate commands to go to latest or 16.x.x I am also running yarn locally

npm script to execute the generator is:

yarn new-component:ts test-test-test