Module not found: Error: Can't resolve 'uuid' in

February 24, 2022

I add the uuid like this in the typescript project:

yarn add @types/uuid

after run this command, I checked the package.json and the uuid version is "@types/uuid": "^8.3.4".then import the uuid in my project:

import { v4 as uuid } from 'uuid';

using the uuid like this:

do_api_post: async <T>(url: string, data: any, accessToken: string): Promise<T> => {
        return fetch(url, {
            method: 'POST',
            headers: {
                'Content-type': 'application/json',
                'x-access-token': accessToken,
                'x-request-id': uuid()
            },
            body: JSON.stringify(data),
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(response.statusText)
                }
                return response.json() as Promise<T>
            })
    },

but when I invoke this function in the project, shows error message:

ERROR in ./node_modules/js-wheel/dist/src/net/rest/RequestHandler.js 43:0-34
Module not found: Error: Can't resolve 'uuid' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/dist/src/net/rest'
resolve 'uuid' 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
        single file module
          using description file: /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/package.json (relative path: ./node_modules/uuid)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/node_modules/uuid doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/node_modules/uuid.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/node_modules/uuid.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/node_modules/uuid.js doesn't exist
        /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/js-wheel/node_modules/uuid 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
        single file module
          using description file: /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/package.json (relative path: ./node_modules/uuid)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/uuid doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/uuid.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/uuid.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/uuid.js doesn't exist
        /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/uuid 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-75 22:4-23 35:4-23
 @ ./src/background/index.ts 2:0-111 9:8-23 12:8-32 15:8-19

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