4

I have a public component library call rd-component, when I used this component "rd-component": "^0.1.47" in the new project, the visual studio code show error like this:

Could not find a declaration file for module 'rd-component'. '/Users/John/source/reddwarf/frontend/ppt-web/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/rd-component/dist/rd-component.es.js' implicitly has an 'any' type.
  There are types at '/Users/John/source/reddwarf/frontend/ppt-web/node_modules/rd-component/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'rd-component' library may need to update its package.json or typings.ts(7016)

what should I do to fixed this issue? this is the public rd-component's package.json:

{
    "name": "rd-component",
    "version": "0.1.47",
    "type": "module",
    "description": "Reddwarf public component lib",
    "files": [
        "dist"
    ],
    "main": "./dist/rd-component.umd.js",
    "module": "./dist/rd-component.es.js",
    "types": "./dist/index.d.ts",
    "exports": {
        ".": {
            "import": "./dist/rd-component.es.js",
            "require": "./dist/rd-component.umd.js"
        },
        "./dist/style.css": {
            "import": "./dist/style.css",
            "require": "./dist/style.css"
        }
    },
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "watch": "vite build --watch",
        "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview"
    },
    "devDependencies": {
        "@types/node": "^20.1.0",
        "@types/react": "^18.2.0",
        "@types/redux-logger": "^3.0.9",
        "axios": "^1.3.4",
        "js-wheel": "https://github.com/jiangxiaoqiang/js-wheel.git",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-redux": "^8.0.5",
        "redux": "^4.2.1",
        "redux-logger": "^3.0.6",
        "uuid": "^9.0.0",
        "vite": "^4.3.5"
    },
    "dependencies": {
        "@reduxjs/toolkit": "^1.9.5",
        "@vitejs/plugin-react": "^4.0.0",
        "antd": "^5.4.6",
        "vite-plugin-dts": "^2.3.0"
    }
}

I have already read some answers told that add typings, but it seems the legacy typescript configuration.

1 Answer 1

28

The types field in package.json is no longer used if there is an exports field: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-7.html#packagejson-exports-imports-and-self-referencing

If you need to point to a different location for your type declarations, you can add a "types" import condition.

Therefore you should be good by simply copying your "types": "./dist/index.d.ts" indication within your exports."." declaration:

{
  "exports": {
    ".": {
      // Specify types first
      "types": "./dist/index.d.ts",
      "import": "./dist/rd-component.es.js",
      "require": "./dist/rd-component.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
}
2
  • 2
    you save my time.
    – spark
    May 9, 2023 at 18:04
  • 5
    Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you!
    – chmin.seo
    Oct 26, 2023 at 10:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.