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

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.

CodePudding user response：

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