[Typescript] Absolute paths point to page directory when dynamically importing file

[marcopixel]

Not sure if this is the right place, but i'll assumed it's an issue with the way Next.js transforms the tsconfig.json paths to webpack aliases.

So my issue is that i'm unable to map my paths if it's used inside a dynamic import. When i'm doing it inside a dynamic import, it will resolve it into the relative folder of the page/function on where it's used.

As an example, here's my current setup:

Repo: https://github.com/marcopixel/absolute-import-repro

pages/games/[id].tsx

export const getStaticProps: GetStaticProps = async ({ params }) => {
  // import data based on game id
  const data = await require(`~games/${params.id}/data.json`);

  return {
    props: {
      gameData: data,
    },
  };
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "~games/*": ["./games/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

This will produce the following error:

Module not found: Can't resolve '~games' in 'D:\absolute-import-repro\pages\games'

If i either use the example with the root folder as shown inside the docs like this

const data = await require(`games/${params.id}/data.json`);

or as a complete static import but with the correct alias

const data = await require(`~games/test1/data.json`);

it will just work fine, so i'm thinking there's some sort of error when converting the paths to webpack aliases.

Any help would be appreciated, even if it's only a small issue 👍