Problem with importing ts files using the loader

[jakub-zebrowski]

If my paths specified in tsconfig are not written with an extension at the end, e.g.

  getFirmwareMockedResponse,
  getFirmwareUrl,
} from '@api-mocks/get-firmware';

Then, this is the error. Is there anything wrong with my setup?

Error: Cannot find module '/Users/***/src/api-mocks/get-firmware' imported from /Users/**/src/tests/hooks/default
Mocks.ts
at finalizeResolution (/Users/***/node_modules/.pnpm/ts-node@10.9.2_@types+node020.10.7-typescript@5.2.2/node_modules/ts-node/dist-raw/node-internal-modul
es-esm-resolve.js: 366:11)
at moduleResolve (/Users/***/node_modules/_pnpm/ts-node@10.9.2_@types+node020.10.7-typescript@5.2.2/node_modules/ts-node/dist-raw/node-internal-modules-es
m-resolve.js: 801:10)
at Object.defaultResolve (/Users/***/node_modules/-pnpm/ts-node@10.9.2_@types+node@20.10.7_typescript@5.2.2/node_modules/ts-node/dist-raw/node-internal-mo dules-esm-resolve.js:912:11)
at /Users/***/node_modules/_pnpm/ts-node@10.9.2_@types+node@20.10.7_typescript@5.2.2/node_modules/ts-node/src/esm.ts:218:35
at entrypointFallback (/Users/***/node_modules/_pnpm/ts-node@10.9.2_@types+node@20.10.7_typescript@5.2.2/node_modules/ts-node/src/esm.ts:168:34)
at /Users/***/node_modules/_pnpm/ts-node@10.9.2_@types+node@20.10.7_typescript@5.2.2/node_modules/ts-node/src/esm.ts: 217:14
at addShortCircuitFlag (/Users/***/node_modules/_ppm/ts-node@10.9.2_@types+node@20.10.7_typescript@5.2.2/node_modules/ts-node/src/esm.ts:409:21) at resolve (/Users/***/node_modules/-pnpm/ts-node@10.9.2_@types+node@20.10.7_typescript@5.2.2/node_modules/ts-node/src/esm.ts:197:12) at file:///Users/***/node_modules/.pnpm/ts-paths-esm-loader@1.4.3_ts-node@10.9.2_@types+node@20.10.7_typescript@5.2.2__tsconfig-paths@4.2.0/node_modules/t
s-paths-esm-loader/resolverFactory. is:16:13
at nextResolve (node:internal/modules/esm/hooks: 864:28)

[luanglopes]

Hello, this package is supposed to be used with node directly, are you trying to use it as a loader on a bundler? Whats is the command you are using?

[jakub-zebrowski]

I am trying to use it with cucumber js and trying to run it with their node command. I found this project because of some cucumber issues and someone stated that it would help.

[luanglopes]

Got it, I don't have much experience with cucumber, could you give more information, like the command you are using, your package.json, maybe a sample folder structure and, if possible, a link to the issue that had the link for this project. With this information I will be able to understand the problem better and try to find a solution.

[jakub-zebrowski]

So I found it here https://github.com/TypeStrong/ts-node/discussions/1450

The command is pnpm cucumber-js

When it comes to package.json

{
  "version": "0.0.1",
  "private": true,
  "packageManager": "pnpm@9.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "dev-test": "VITE_IS_TEST=true vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "playwright": "playwright test",
    "playwright-ui": "playwright test --ui",
    "test": "cucumber-js",
    "test-debug": "PWDEBUG=1 cucumber-js"
  },
  "dependencies": {
    "@azure/msal-browser": "^3.1.0",
    "@azure/msal-react": "^2.0.3",
    "@headlessui/react": "^1.7.17",
    "@headlessui/tailwindcss": "^0.2.0",
    "@hookform/resolvers": "^3.3.1",
    "@nivo/bar": "^0.85.1",
    "@nivo/core": "^0.85.1",
    "@tanstack/react-query": "^5.17.12",
    "@tanstack/react-table": "^8.10.3",
    "axios": "^1.6.5",
    "dotenv": "^16.4.1",
    "i18next": "^23.5.1",
    "i18next-browser-languagedetector": "^7.1.0",
    "i18next-http-backend": "^2.2.2",
    "otpauth": "^9.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-error-boundary": "^4.0.11",
    "react-hook-form": "7.46.2",
    "react-i18next": "^13.2.2",
    "react-movable": "^3.0.4",
    "react-router-dom": "^6.16.0",
    "tailwindcss-animate": "1.0.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@cucumber/cucumber": "^10.6.0",
    "@cucumber/pretty-formatter": "1.0.1",
    "@playwright/test": "^1.41.0",
    "@types/node": "^20.10.7",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.8",
    "@typescript-eslint/eslint-plugin": "^6.7.3",
    "@typescript-eslint/parser": "^6.7.3",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.50.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.4",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "^3.3.3",
    "tsconfig-paths": "^4.2.0",
    "ts-node": "^10.9.2",
    "ts-paths-esm-loader": "^1.4.3",
    "typescript": "^5.2.2",
    "vite": "^5.2.10"
  }
}

It looks like the lib is just forcing me somehow to end the import with an extension where I am not using the extension in the project at all. You can see in my previous post the tsconfing setting with aliases. That is why I have the ts-node with tsconfig-paths

structure -> inside src I have all the folders, like components and tests folder, which is used for the cucumber. Outside src, I have only config files and other recommended things based on normal frontend projects.