ERROR in ./node_modules/@esri/calcite-components/dist/custom-elements/index.mjs 1:0-147

I already add this to my package.json dist/custom-elements/index.mjs": "dist/custom-elements/index.js why i am having this error (below). did i miss something?

{
  "name": "@map/react-app",
  "private": true,
  "scripts": {
    "start": "webpack serve",
    "start:standalone": "webpack serve --port 9003 --env standalone",
    "build": "concurrently yarn:build:*",
    "build:webpack": "webpack --mode=production",
    "analyze": "webpack --mode=production --env analyze",
    "lint": "eslint src --ext js",
    "format": "prettier --write .",
    "check-format": "prettier --check .",
    "test": "cross-env BABEL_ENV=test jest",
    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
    "prepare": "husky install",
    "coverage": "cross-env BABEL_ENV=test jest --coverage"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/eslint-parser": "^7.15.0",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@babel/runtime": "^7.15.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "babel-jest": "^27.0.6",
    "concurrently": "^6.2.1",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-important-stuff": "^3.0.0",
    "eslint-plugin-prettier": "^3.4.1",
    "husky": "^7.0.4",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.0.6",
    "jest-cli": "^27.0.6",
    "prettier": "^2.3.2",
    "pretty-quick": "^3.1.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-config-single-spa-react": "^4.0.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "@arcgis/core": "^4.21.2",
    "@material-ui/styles": "^4.11.4",
    "@mui/styles": "^5.2.2",
    "@reach/router": "^1.3.4",
    "@stencil/core": "^2.11.0",
    "browserify": "^17.0.0",
    "dotenv": "^10.0.0",
    "dotenv-webpack": "^7.0.3",
    "path-browserify": "^1.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "single-spa-react": "^4.3.1",
    "web-vitals": "^2.1.2"
  },
  "lint-staged": {
    "*.{js,jsx}": "pretty-quick --staged && eslint --fix"
  },
  "browser": {
    "dist/custom-elements/index.mjs": "dist/custom-elements/index.js" // I'll already add this to may package.json, why i am having this error?
  }
}

error

ERROR in
./node_modules/@esri/calcite-components/dist/custom-elements/index.mjs
1:0-147

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Module not found: Error: Can’t resolve ‘@stencil/core/internal/client’
in
‘C:\Users\Ronald\Desktop\Map\app-react\node_modules@esri\calcite-components\dist\custom-elements’
Did you mean ‘index.js’? BREAKING CHANGE: The request
‘@stencil/core/internal/client’ failed to resolve only because it was
resolved as fully specified (probably because the origin is strict
EcmaScript Module, e. g. a module with javascript mimetype, a ‘.mjs’
file, or a ‘.js’ file where the package.json contains ‘"type":
"module"’). The extension in the request is mandatory for it to be
fully specified. Add the extension to the request.

>Solution :

The best solutions on this is in your webpack.config.js add this code

module:{
      rules:[
        {
          test: /\.m?js/,
          resolve: {
              fullySpecified: false
          }
        }
      ]
},

and removed the browser in your package.json