CODEWITHSUNDEEP
reactjstypescriptvisual-studio-code
Victor M
Victor M

Reputation: 759

Visual Studio Code doesn't recognize absolute import in Typescript

Saw a previous unresolved question here: Absolute module path resolution in TypeScript files in Visual Studio Code.

I am having the same problem with "typescript": "^4.5.5". My tsconfig.json file looks like this:

{
    "compilerOptions": {
        "outDir": "./built/",        // path to output directory
        "sourceMap": true,          // allow sourcemap support
        "strictNullChecks": true,   // enable strict null checks as a best practice
        "module": "es6",            // specify module code generation
        "jsx": "react",             // use typescript to transpile jsx to js
        "target": "es5",            // specify ECMAScript target version
        "allowJs": true             // allow a partial TypeScript and JavaScript codebase
        "lib": ["es6", "dom"],
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strict": true,
        "plugins": [{ "name": "typescript-plugin-css-modules" }],
        "baseUrl": "./src/",

    },
    "include": ["src"]
}

as Create React App has suggested. However, I still get the error Cannot find module 'xxx' or its corresponding type declarations, where xxx is some module path relative to src.

Would anyone else know how to resolve this?

Upvotes: 1

Views: 4346

Answers (1)

Matt Carlotta
Matt Carlotta

Reputation: 19772

There are 3 things you'll need to do:

1.) Make sure your basePath points to the root directory of your project (typically ./ or ., but it's up to you as it does affect the option below)

2.) Make sure your aliased paths point to the directories from the basePath option above

3.) When the app is compiled, you'll most likely need to register your aliased paths using tsconfig-paths by bootstrapping your build directory as the basePath.

Side note: I'm not super familiar with the CRA and how it handles compiled assets and aliased imports, so item 3 (and the stuff mentioned below) may not be needed if the imports are transformed to relative imports.

If you’re still running into import issues, then you’ll need to add the aliased directories to Webpack resolve alias rules as well.

Example (in this example config, aliased directories will begin with ~/, but they can be whatever you prefer):

{
  "compilerOptions": {
    ...etc,
    "baseUrl": ".",
    "outDir": "./build",
    "paths": {
      "~/components/*": ["src/components/*"],
      "~/containers/*": ["src/containers/*"],
      ...etc
    }
  },
  "include": ["**/*.ts"],
  "exclude": [".github", "build", "coverage", "node_modules"]
}

Now your imports will be:

import Example from "~/components/Example";`

Before running your application in production, you'll want to create this configuration file to register aliased imports:

production-paths.js

const tsconfigpaths = require("tsconfig-paths");
const { compilerOptions } = require("./tsconfig.json");

tsconfigpaths.register({
  baseUrl: "./build", // this will point to your compiled assets directory
  paths: compilerOptions.paths
});

Then in your package.json's scripts you'll preload the file above before running the server that serves the app (this script will vary depending on how you're serving the compiled assets -- the example below would be typical for an express or http-server server):

package.json

{
  "name": "example",
  "version": "0.0.1",
  ...etc,
  "scripts": {
    ...etc,
    "start:production": "node -r ./production-paths.js build/server.js",
  },
  ...etc
}

Upvotes: 3

Related Questions