I just recently try to create new npm package. On my imports, it said module has no exports. I've export my component in index.js inside dist folder.
This is my project structure
- dist
- components
- MyComponent.tsx
- index.js
package.json
My index.js before compile
import MyComponent from "./components/MyComponent";
export {MyComponent}
My package.json
{
"name": "my-test-npm",
"homepage": "https://github.com/ganinw13120/my-test-npm",
"main": "dist/index.js",
"module": "dist/index.js",
"bin": "dist/index.js",
"version": "0.1.13",
"dependencies": {
"@babel/polyfill": "^7.12.1",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.24",
"@types/node": "^12.20.37",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/uuid": "^8.3.3",
"bignumber.js": "^9.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.3.3",
"typescript": "^4.5.3",
"uuid": "^8.3.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
"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": {
"@babel/cli": "^7.16.8",
"@babel/core": "^7.16.7",
"@babel/preset-env": "^7.16.8",
"@types/styled-components": "^5.1.17"
},
"files": [
"dist",
"package.json"
]
}
On my error, it also said Field 'browser' doesn't contain a valid alias configuration then my component path on dist folder. It seem like it cannot find my component in dist folder, which is already included.
I am facing the similar problem recently. I check my project config and your config, you can try to add config in the npm package source code package.json:
"type": "module",
what I am imported the public npm package component I created like this:
import { ResponseHandler } from "js-wheel/dist/index";
and export in the npm package source index.ts like this:
import {ResponseHandler} from "./net/rest/ResponseHandler";
export {
ResponseHandler
}
I take days to fix this problem and finally it works.