Typescript cannot find module defined in paths

Question

I have a typescript application that has paths for absolute imports. My tsconfig looks like this:

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "utils*": ["src/utils*"],
        "operations*": ["src/operations*"],
        "actions*": ["src/actions*"],
        "components*": ["src/components*"],
        "constants*": ["src/constants*"],
      },
      "outDir": "dist",
      "module": "esnext",
      "target": "esnext",
      "moduleResolution": "node",
      "noEmit": true,
      "lib": ["es2017", "dom"],
      "noUnusedLocals": true,
      "sourceMap": true,
      "skipLibCheck": true,
      "allowJs": true,
      "jsx": "preserve",
      "noUnusedParameters": true,
      "preserveConstEnums": true,
      "strict": true,
      "allowSyntheticDefaultImports": true,
      "noImplicitAny": true,
    },
    "exclude": [
      "node_modules",
      "dist",
    ],
    "include": [
      "./src/**/*"
    ],
    "files": [
      "./typings/index.d.ts"
    ]
  }

and I'm trying to use imports like so:

import { AppStateType } from 'actions/app';

however I get cannot find module 'actions/app'

I followed this answer but it didn't seem to work.

What am I doing wrong here?

score 1 · Answer 1 · answered Oct 25 '19 at 04:45

The pattern for paths is kind of picky.

Try this:

"paths": {
    "utils/*": ["src/utils/*"],
    "operations/*": ["src/operations/*"],
    "actions/*": ["src/actions/*"],
    "components/*": ["src/components/*"],
    "constants/*": ["src/constants/*"],
},

Note the addition of a slash.

Since you have baseUrl set I think that should work, but if not the next step might be to specify the full relative path (relative to the tsconfig file):

"paths": {
    "utils/*": ["./src/utils/*"],
    "operations/*": ["./src/operations/*"],
    "actions/*": ["./src/actions/*"],
    "components/*": ["./src/components/*"],
    "constants/*": ["./src/constants/*"],
},

That will satisfy the TypeScript compiler, but if you're using Webpack or Parcel you may get complaints about them not being able to find the files even though TypeScript compiles it fine. In that case you need to set aliases for your bundler. It would look a bit like this:

Webpack

// webpack.config.js or similar
// ...
  resolve: {
    extensions: [".js", ".jsx"], // import without .js, .jsx, .json extensions
    alias: {
      "utils": path.resolve(__dirname, "src/utils/*"),
      "operations": path.resolve(__dirname, "src/operations/*"),
      "actions": path.resolve(__dirname, "src/actions/*"),
      "components": path.resolve(__dirname, "src/components/*"),
      "constants": path.resolve(__dirname, "src/constants/*")
    }
  },

Parcel

// package.json
// ...
  "alias": {
    "utils": "./src/utils/*",
    "operations": "./src/operations/*",
    "actions": "./src/actions/*",
    "components": "./src/components/*",
    "constants": "./src/constants/*"
  }

Typescript cannot find module defined in paths

1 Answers1