question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Native support for tsconfig's paths resolution

See original GitHub issue

Clear and concise description of the problem

By having Typescript integration in Vite, I kind of assumed all tsconfig features would work out-of-the-box. While migrating from Next.js I discovered that Vite is lacking support for paths resolving. I noticed that many of my friends did that as well, although I would be in favour of adding a full typescript features support.

Suggested solution

Add native support for paths resolutions similar to: https://www.npmjs.com/package/vite-tsconfig-paths

Alternative

Document lack of this feature in Typescript section and recommend using: https://www.npmjs.com/package/vite-tsconfig-paths

Additional context

No response

Validations

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:14
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Mencicommented, Mar 5, 2022

My solution:

import tsconfig from "./tsconfig.json";

const tsconfigPathAliases = Object.fromEntries(
  Object.entries(tsconfig.compilerOptions.paths).map(([key, values]) => {
    let value = values[0];
    if (key.endsWith("/*")) {
      key = key.slice(0, -2);
      value = value.slice(0, -2);
    }

    const nodeModulesPrefix = "node_modules/";
    if (value.startsWith(nodeModulesPrefix)) {
      value = value.replace(nodeModulesPrefix, "");
    } else {
      value = path.join(__dirname, value);
    }

    return [key, value];
  })
);

Works with my tsconfig.json:

// ...
    "paths": {
      "@/*": ["src/*"],
      "semantic-ui-css": ["node_modules/fomantic-ui-css"],
      "mobx-react": ["node_modules/mobx-react-lite"],
      "lodash": ["node_modules/lodash-es"],
      "markdown-it": ["node_modules/@esm-bundle/markdown-it"]
    }
// ...
1reaction
sodateacommented, Feb 10, 2022

TSConfig paths only works for TypeScript / JavaScript modules (semantically). We need the alias for all kinds of resources. So I think it would be confusing to use paths exclusively.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Documentation - Module Resolution - TypeScript
The TypeScript compiler supports the declaration of such mappings using paths property in tsconfig.json files. Here is an example for how to specify...
Read more >
tsconfig paths does not resolve in react native - Stack Overflow
I'm attempting to use TypeScript's paths option in my tsconfig.json file. I've used paths before in my other web applications using React.
Read more >
tsconfig-paths - npm
Typescript by default mimics the Node.js runtime resolution strategy of modules. But it also allows the use of path mapping which allows ...
Read more >
paths and baseUrl | ts-node - TypeStrong · GitHub
You can use ts-node together with tsconfig-paths to load modules according to ... the intended purpose for "paths" in "Additional module resolution flags"....
Read more >
gatsby-plugin-tsconfig-paths
TSConfig Paths plugin for Gatsby Description This plugin will provide support for paths configured in your tsconfig by using . How to…
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found