"Module not found: Can't resolve..." to custom module - TS2307

Question

We've inherited a Next + TypeScript site from another developer and we're trying to create a new component that's based very heavily from one that already exists. I've copied the entire component and sub folders to the same level as the existing one, but if I then change the reference to the cloned folder, I get the "Module not found: Can't resolve" error:

import { MyModule } from '@project-root/shared/foo/bar/old/module';

works, but

import { MyModule } from '@project-root/shared/foo/bar/new/module';

in the same file, doesn't. But the contents of the 'new' folder is directly copied from the 'old' folder.

I've copied the reference to the path to the tsconfig.base.json and restarted but it's not being found:

"@project-root/shared/foo/bar/old/module": [
   "libs/shared/foo/bar/old/module/src/index.ts"
],
"@project-root/shared/foo/bar/new/module'": [
   "libs/shared/foo/bar/new/module/src/index.ts"
],

What's the cause of the issue, and how can it be resolved?

Answer 1

As you suggested here is my answer. The apostrophe at the end of "@project-root/shared/foo/bar/new/module'" is the issue. Also happened to me once, somebody else who had just looked at it found it immediatly...

Answer 2

@DerAnonyme found the issue. You have an extra apostrophe where you shouldn't (at the end of the path string for the new path mapping's key (" module' "))- I'd wager due to a bad copy-paste from the import statement:

"@project-root/shared/foo/bar/new/module'": [
   "libs/shared/foo/bar/new/module/src/index.ts"
],

I could repro getting the same error message.

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@project-root/shared/foo/bar/old/module": ["A.ts"],
      "@project-root/shared/foo/bar/new/module'": ["B.ts"]
    }
  }
}

A.ts and B.ts

export const foo = 0;

index.ts

import { foo as fooA } from "@project-root/shared/foo/bar/old/module"
import { foo as fooB } from "@project-root/shared/foo/bar/new/module"

error (notice how there's no error for line 1 with the no-typo path mapping):

index.ts:2:29 - error TS2307: Cannot find module '@project-root/shared/foo/bar/new/module' or its corresponding type declarations.

2 import { foo as fooB } from "@project-root/shared/foo/bar/new/module"
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

And then, removing the erroneous apostrophe character, the error goes away.