Can't import the named export 'Connection' from non EcmaScript module (only default export is available)

[shin101004]

Can't import the named export 'Connection' from non EcmaScript module (only default export is available). All mjs files return same error.

Here is my package.json

{
  "name": "nft-minter",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@alch/alchemy-web3": "^1.0.1",
    "@solana/web3.js": "^1.48.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.27.2",
    "express": "^4.18.1",
    "fs": "^0.0.1-security",
    "prettier": "^2.7.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.5",
    "web-vitals": "^1.0.1",
    "zustand": "^4.0.0-rc.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "CI=false && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prettier": "prettier --write --config ./.prettierrc './src/**/*.{js,jsx}'"
  },
  "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": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/material": "^5.8.4",
    "@solana/wallet-adapter-base": "^0.9.9",
    "@solana/wallet-adapter-react": "^0.15.8",
    "@solana/wallet-adapter-react-ui": "^0.9.10",
    "@solana/wallet-adapter-wallets": "^0.16.8",
    "caver-js": "^1.8.1",
    "dotenv": "^8.6.0",
    "sass": "^1.52.3"
  }
}

I am studying about blockchain dapp. mjs file returns same error about EcmaScript module.

I tried to solve this error by upgrading react-script version to "5.0.1".

If I do this, another package shows error.

Is there any solution about this situation ?

[shin101004]

I reffer https://www.npmjs.com/package/@solana/wallet-adapter-create-react-app-starter. But, it shows error too.

[jordaaash]

This is because you're using "react-scripts": "4.0.3". Start with this starter project, which uses CRA 5 and also react-app-rewired with necessary configuration: https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/create-react-app-starter