Absolute import ambiguity?

[adamwathan]

It seems like with a config like this:

// jsconfig.json or tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

...Next always tries to load npm modules first, then falls back to local.

For example, if I have a file at ~/my-project/next/head.js, and I import Head from 'next/head', it pulls in the actual Head component from Next.js, not my own component.

Is there any recommendation for avoiding ambiguity here? I worry I now have to know the names of every single transient dependency in my project to avoid accidentally using a folder name that collides with one of my dependency names.

[laugharn]

I tend to set my jsconfig.json like this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    }
  }
}

So your import would be ~/next/head. The syntax is unix-y and relying on that single alias leaves you with less ambiguity, in my experience.

[Timer]

I'd suggest a structure like this:

{
  "compilerOptions": {
    "baseUrl": "node_modules",
    "paths": {
      "@/*": ["../*"]
    }
  }
}

This prevents any ambiguity, and requires you perform absolute imports as so:

@/components/abc

You'll know immediately if an import is for a npm module or absolute import, also, there's no namespace collisions with this approach.

[adamwathan]

Thanks @Timer, I like that solution!