Typescript Module not found Can't resolve

Question

I'm building a react + typescript app in which I created a module with interfaces that are used all around my project's classes. My IDE resolves these interfaces fine but webpack always sends the following error. I tried different things but can't get that one to go away.

Any help would be greatly appreciated

ERROR in ./assets/src/Pages/Login.tsx Module not found: Error: Can't resolve 'seeyouftp' in 'var/www/app/assets/src/Pages'
 @ ./assets/src/Pages/Login.tsx 43:18-38
 @ ./assets/src/Config/App.tsx
 @ ./assets/entries/bundle.js

My definition file is here

|— definitions
     |— types.d.ts
|— entries
|— fonts
|— less
|— src

Excerpt of my definition file

declare module 'seeyouftp' {
  interface User {
    admin: boolean;
    roles: string[];
    username: string;
  }

  enum AuthStates {
    success = 'success',
    error = 'error'
  }

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowUnreachableCode": false,
    "baseUrl": "./assets",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": [
      "dom",
      "es2019",
      "esnext"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "outDir": "./dist/",
    "resolveJsonModule": true,
    "skipDefaultLibCheck": true,
    "sourceMap": true,
    "strictPropertyInitialization": false,
    "strictNullChecks": true,
    "target": "es5",
    "typeRoots": [
      "./assets/definitions/types.d.ts",
      "./node_modules/@types"
    ],
    "types": [
      "node"
    ]
  },
  "include": [
    "./assets/src/**/*",
    "./assets/definitions/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

I import the created interfaces like so:

import { Item, PlayableMedia } from 'seeyouftp';

Is seeyouftp npm package or your file? if your file, where is it located? — Tony Nguyen
– Tony Nguyen, Commented Jun 22, 2020 at 12:57
seeyouftp is not an npm package. It's only the name of the module contained in my types.d.tsfile. It's declared like so: declare module 'seeyouftp' — titiyoyo
– titiyoyo, Commented Jun 22, 2020 at 13:07

titiyoyo · Accepted Answer · 2020-06-30 07:55:34Z

25

The error message was actually very misleading, and looks like a typescript bug. It appears that enums can't be exported directly, it seems necessary to use a const to be able to export them correctly.

So I modified my enum declaration like so

declare module 'seeyouftp' {

  // exporting a const instead of 
  export const enum AuthStates {
    success = 'success',
    error = 'error'
  }
}

Everything works now but that error message is very, very bad and time consuming

answered Jun 30, 2020 at 7:55

titiyoyo

9421 gold badge13 silver badges28 bronze badges

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

2 Comments

Mark Over a year ago

Just a random comment to say thank you so much for following up and answering your post. I ran into the same issue and had a hunch enum was the culprit, since it was the only file that wasn't importing properly from my TS project.

gillyspy Over a year ago

i don't think it's a bug as it is still resolvable to a types file but this variation is necessary for my project which exports eslint rules as javascript.

Ivan V. · Accepted Answer · 2020-06-22 10:43:42Z

1

Try to export the declarations, and see if that makes a difference:

declare module 'seeyouftp' {
export  interface User {
    admin: boolean;
    roles: string[];
    username: string;
  }

export  enum AuthStates {
    success = 'success',
    error = 'error'
  }

answered Jun 22, 2020 at 10:43

Ivan V.

8,1692 gold badges39 silver badges56 bronze badges

1 Comment

titiyoyo Over a year ago

I tried exporting every interface in the module but it doesn't work either

Tony Nguyen · Accepted Answer · 2020-06-22 13:16:29Z

1

You need to create seeyouftp (I assum that seeyouftp is your js module name) folder under /definitions and have types.d.ts inside /definitions/seeyouftp like structure below

|— definitions
 |—seeyouftp
  |— index.d.ts
|— entries
|— fonts
|— less
|— src

And update your tsconfig

"typeRoots": [
  "./assets/definitions",
  "./node_modules/@types"
],

edited Jun 22, 2020 at 13:16

answered Jun 22, 2020 at 10:43

Tony Nguyen

3,49814 silver badges20 bronze badges

7 Comments

titiyoyo Over a year ago

when you say 'I assum that seeyouftp is your js module name' do you mean the name field in package.json ?

Tony Nguyen Over a year ago

The name you normally use to import with js. And one more thing need to be updated in tsconfig file. Please check my updated comment and try it.

titiyoyo Over a year ago

I don't know what you mean by "The name you normally use to import with js". I import the types using this kind of import, is it what you mean ? import { Item, PlayableMedia } from 'seeyouftp';

Tony Nguyen Over a year ago

Yes. So I think seeyouftp is correct name. Did you try to update tsconfig?

titiyoyo Over a year ago

Yes, actually my tsconfig was already setup this way

|

Baboo · Accepted Answer · 2020-06-27 21:54:07Z

1

Because it is a webpack issue, you have to update your webpack config. Webpack needs to be told where to find the module seeyouftp:

// webpack.config.js
const path = require('path');

module.exports = {
  //...
  resolve: {
    // Add an alias
    alias: {
      'seeyouftp': path.resolve(__dirname, 'definitions/types.d.ts')
    }
  }
};

For the path to the file types.d.ts I assumed your webpack configuration is located next to the definitions folder.

Here is the associated webpack documentation.

edited Jun 27, 2020 at 21:54

answered Jun 27, 2020 at 19:44

Baboo

4,3184 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

Typescript Module not found Can't resolve

4 Answers 4

2 Comments

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related