I used yarn add github:username/custom-module
to add a custom module to my project. The module and its contents appears in my node_modules
folder, but I'm unable to import anything from it.
I import it into my file like using import { Component } from "custom-module";
, but TypeScript returns, "Module not found: Error: Can't resolve 'custom-module' in 'filepath...'".
My project's package.json
:
{
"name": "project-name",
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@dnd-kit/core": "^4.0.2",
"@dnd-kit/sortable": "^5.1.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/express": "^4.17.13",
"@types/lodash": "^4.14.176",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.2",
"@types/styled-components": "^5.1.15",
"@types/ws": "^8.2.2",
"eslint-plugin-react-hooks": "^4.3.0",
"esm": "^3.2.25",
"express": "^4.17.2",
"mobx": "^6.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-quick-reactions": "github:username/custom-module",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.0",
"styled-components": "^5.2.3",
"typescript": "^4.4.4",
"web-vitals": "^1.0.1",
"ws": "^8.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"serve": "node -r esm src/backend/server.ts"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:8080",
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.9.1",
"@typescript-eslint/parser": "^5.9.1",
"eslint-plugin-react": "^7.28.0"
}
}
And the package.json
from the module:
{
"name": "custom-module",
"version": "0.1.0",
"private": false,
"description": "A description.",
"license": "MIT",
"keywords": [
"react",
"react-component",
],
"homepage": "https://github.com/username/custom-module#readme",
"bugs": {
"url": "https://github.com/username/custom-module/issues"
},
"repository": "github:username/custom-module",
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/react": "^17.0.39",
"typescript": "^4.5.5"
}
}
CodePudding user response:
As Phil suggested in this comment, the custom-module
package.json
did not contain main
, files
, or directories
. I had to import directly from "custom-module/file/path/Component"
.