Module not found: Error: Can't resolve '@auth/extension/AuthHandler'

Question

I define the path in a public typescript lib config file tsconfig.json like this:

"paths": {
      "@net/*":["net/*"],
      "@auth/*":["auth/*"],
    } 

and import the typescript in public lib like this:

import { AuthHandler } from "@auth/extension/AuthHandler";

when I using the public lib in my project, shows error when compile:

ERROR in ./node_modules/js-wheel/dist/src/net/rest/ResponseHandler.js 2:0-58
Module not found: Error: Can't resolve '@auth/extension/AuthHandler' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/dist/src/net/rest'
resolve '@auth/extension/AuthHandler' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/dist/src/net/rest'
  Parsed request is a module
  using description file: /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/package.json (relative path: ./dist/src/net/rest)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/dist/src/net/rest/node_modules doesn't exist or is not a directory
      /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/dist/src/net/node_modules doesn't exist or is not a directory
      /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/dist/src/node_modules doesn't exist or is not a directory
      /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/dist/node_modules doesn't exist or is not a directory
      looking for modules in /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/node_modules
        /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/node_modules/@auth/extension doesn't exist
      /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules
        /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/@auth/extension doesn't exist
      /Users/xiaoqiangjiang/source/reddwarf/frontend/node_modules doesn't exist or is not a directory
      /Users/xiaoqiangjiang/source/reddwarf/node_modules doesn't exist or is not a directory
      /Users/xiaoqiangjiang/source/node_modules doesn't exist or is not a directory
      /Users/xiaoqiangjiang/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/background/biz/handler/TransHandler.ts 6:0-73 23:12-43
 @ ./src/background/index.ts 2:0-111 9:8-23 12:8-32 15:8-19

webpack 5.68.0 compiled with 2 errors in 2172 ms

why did this error happen? what should I do to fix it?

Answer 1

Recently I am facing the similar problem. Check your AuthHandler from current project, it is replaced to the relative path or not? If the path still like @auth/extension/AuthHandler, you should transfer the path when build your typescript code to javascript, I would recommend the ttypescript. the path may look like this:

import AuthHandler from "../../auth/extension/AuthHandler";