Typescript: baseUrl doesn't work when importing from subfolder?

Question

I have a file located in src/components/SvgIcon/SvgIcon.stories.tsx. Inside it, I try to import like this:

src/components/SvgIcon/SvgIcon.stories.tsx

import { SVG_ICON_SIZES, SVG_ICON_COLORS } from 'constants/properties';

However, it keeps complaining with this error: Cannot find module 'constants/properties' or its corresponding type declarations.

There's nothing special going on in my properties.ts file:

src/constants/properties.ts

export enum SVG_ICON_SIZES {
  SMALL = 'small',
  MEDIUM = 'medium',
  LARGE = 'large',
  XL = 'xl',
}

export enum SVG_ICON_COLORS {
  PRIMARY = 'primary',
  SECONDARY = 'secondary',
  DISABLED = 'disabled',
  NEGATIVE = 'negative',
  WARNING = 'warning',
  POSITIVE = 'positive',
  INTERACTIVE = 'interactive',
  LIGHT = 'light',
}

This is what my tsconfig.json looks like:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "src",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "declarationDir": "dist",
    "emitDeclarationOnly": true,
    "strict": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "types": ["jest"],
    "typeRoots": ["src/types", "node_modules/@types"]
  },
  "include": ["src"],
  "exclude": ["node_modules", "src/**/*.stories.tsx"]
}

In my less nested file, everything works as expected:

src/components/Menu.tsx

Why is it not working in the subfolder?

bigpotato · Accepted Answer · 2021-11-30 22:14:10Z

1

Figured it out. It was because I had this in my exclude in tsconfig.json:

"exclude": ["node_modules", "src/**/*.stories.tsx"]

Updated it to

"exclude": ["node_modules"]

and now it works

answered Nov 30, 2021 at 22:14

bigpotato

27.7k63 gold badges196 silver badges362 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3067684 · Accepted Answer · 2021-11-30 22:10:56Z

0

Without knowing your file/directory structure, have you tried?

import { SVG_ICON_SIZES, SVG_ICON_COLORS } from './constants/properties';

Or stopping and restarting your project.

I've got one project that randomly refuses to pick up on newly created files - fixing it is not in my top 20 things to do

answered Nov 30, 2021 at 22:10

user3067684

1,2682 gold badges13 silver badges28 bronze badges

1 Comment

bigpotato Over a year ago

Hey @user, I figured it out just 2 seconds ago. It was because I have .stories.tsx excluded in my tsconfig.json

Collectives™ on Stack Overflow

Typescript: baseUrl doesn't work when importing from subfolder?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related