bug: SyntaxError: Cannot use import statement outside a module

[yf-hk]

Where the bug happens

• [ ] Browser Extension
• [X] Library
• [ ] Other

your browser

No response

Describe the bug

When using @locator/runtime:

import setupLocatorUI from '@locator/runtime/dist'

if (process.env.NODE_ENV === 'development') {
  setupLocatorUI()
}

It prompts this error message:

\node_modules\.pnpm\@[email protected][email protected]\node_modules\@locator\runtime\dist\index.js:1
import { initRuntime } from "./initRuntime";
^^^^^^

SyntaxError: Cannot use import statement outside a module

To reproduce

1. Install Next
2. Install @locator/runtime
3. Call it in _app.tsx:

import setupLocatorUI from '@locator/runtime' if (process.env.NODE_ENV === 'development') { setupLocatorUI() }

Additional information

No response

[UNDERCOVERj]

I meet too

[Willaiem]

I managed to fix this, by adding the ".js" at the end of the import for all files that does import JS:

also I had to add type="module" for both package.jsons in runtime and shared folder

it seems this topic is quite known in TS community: https://stackoverflow.com/questions/62619058/appending-js-extension-on-relative-import-statements-during-typescript-compilat

The other solution I've found is by changing the babel config and tsconfig for both packages to generate the CommonJS files instead of ESM.

[brycefranzen]

I'm having this same issue with next.js as well.

[cyjo9603]

I fixed it to this code

const nextConfig = {
  ...
  transpilePackages: ['@locator/runtime'],
}