How to share code (interfaces, enums, constants etc.) with other frontend apps?

[MickL]

This might also be a feature request for the docs:

I am having an existing project with a Nuxt app (Vue) and an existing backend API. Both share code (interfaces, enums, constants, Zod schemas) by a shared library. I decided to replace the existing backend with Adonis but I cant import anything from my shared library within Adonisjs. I am getting errors like ERR_UNSUPPORTED_DIR_IMPORT and ERR_PACKAGE_PATH_NOT_EXPORTED.

Until now an import looked like this:

import {ProductResponse, productsQuerySchema} from '@my-project/shared/website';

Which is an index.ts file:

export * from './dtos';
export * from './enums';
export * from './validations';

Both the Nuxt app as my library are ESM modules so I dont understand why I cant simply import it as before. And I dont understand why I need to add .js extension in a TypeScript project and cant import a "folder". This is very frustrating and makes Adonis basically useless for me. But maybe I just need to adapt my tsconfig in some way?

tsconfig.json:

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowJs": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  }
}

package.json

{
   ...
  "type": "module",
  "exports": {
    "./admin": "./src/admin/index.ts",
    "./common": "./src/common/index.ts",
    "./website": "./src/website/index.ts"
  },
  ...
}

[thetutlage]

And I dont understand why I need to add .js extension in a TypeScript project.

This is because that's how the ESM spec implementation works in Node.js. I have pasted a screenshot from the Node.js docs. https://nodejs.org/api/esm.html

Now, you might be aware of the Node.js behavior and wondering why do I have to import a TypeScript file with .js extension. Again, that is enforced by TypeScript and not AdonisJS.

This article does a great job at explaining it. https://www.totaltypescript.com/relative-import-paths-need-explicit-file-extensions-in-ecmascript-imports

[MickL]

But isnt my Nuxt project and my shared library already an ESM project and there no extensions are needed? Maybe it is not ESM, it is module resolution "nodenext"? Can I change the module resolution of Adonis instead, maybe?

Also this module resolutions sound very node specific. What about other runtimes like Bun? The article says Node only knows js extensions but Bun or Deno have full Typescript support integrated.

[thetutlage]

AdonisJS is not a Bun or a Deno framework. We strictly stick to then Node.js platform.

[MickL]

I understand, but wouldnt it make sense to make it more runtime agnostic? Node seems to die sooner or later looking at how amazing Bun and Deno perform, especially with no need to compile TS to JS.

Coming back to the ESM topic: I think there is a misunderstanding in the docs and migration guide because it says "needed for ESM [to have imports with .js extensions]" but actually it is not because of ESM but because of the chosen module resolution. This took me a while to understand.

[MickL]

To answer my own question:

In the shared library tsconfig set target and module to ESNext and module resoltion to NodeNext. Now change all imports/exports to have .js extension.

Now imports work both in Adonis and in the frontend framework (Nuxt in my case).