module has no exports on my new npm package that I publish

Question

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.

Answer 1

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.