Can't import the named export 'Component' from non EcmaScript module

[mantassadauskas]

Project with version 9.5.0 fails to build, throws error:
./node_modules/react-intersection-observer/index.mjs
Can't import the named export 'Component' from non EcmaScript module (only default export is available)

Used only in one place, imported like that:
import { InView, useInView } from "react-intersection-observer";

Package JSON if it helps:
"dependencies": {
"@babel/core": "^7.21.8",
"@cypress/react": "^7.0.3",
"@cypress/webpack-dev-server": "^3.4.1",
"@cypress/webpack-preprocessor": "^5.17.1",
"@date-io/core": "^2.13.1",
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.5.0",
"@mui/lab": "^5.0.0-alpha.76",
"@mui/material": "^5.11.1",
"@mui/styles": "^5.11.1",
"@mui/system": "^5.11.1",
"@mui/x-data-grid-pro": "^5.17.18",
"@mui/x-date-pickers-pro": "^5.0.11",
"@mui/x-license-pro": "^5.17.12",
"@zerollup/ts-transform-paths": "^1.7.18",
"awesome-debounce-promise": "^2.1.0",
"axios": "^1.1.3",
"axios-auth-refresh": "^2.2.7",
"babel-plugin-styled-components": "^1.13.3",
"customize-cra": "^1.0.0",
"cypress": "^12.11.0",
"dayjs": "^1.11.3",
"dotenv": "^16.0.3",
"eslint-plugin-flowtype": "^3.13.0",
"html-webpack-plugin": "^5.5.1",
"i18next": "^20.6.1",
"i18next-browser-languagedetector": "^6.1.3",
"i18next-xhr-backend": "^3.2.2",
"jimp": "^0.16.1",
"js-yaml": "^4.1.0",
"jss": "^9.8.7",
"material-table": "^1.69.0",
"mobx": "^5.15.6",
"mobx-react": "^6.3.1",
"mobx-react-lite": "^2.2.2",
"nan": "^2.15.0",
"node-sass": "npm:sass",
"react": "^17.0.2",
"react-app-rewire-mobx": "^1.0.9",
"react-cropper": "^2.1.8",
"react-data-table-component": "^6.11.8",
"react-dom": "^17.0.2",
"react-ga4": "^1.4.1",
"react-i18next": "^11.15.3",
"react-intersection-observer": "^9.4.0",
"react-is": "^18.0.0",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-scroll": "^1.8.4",
"react-select": "^3.1.0",
"react-text-truncate": "^0.16.0",
"styled-components": "^5.3.3",
"swagger-ui-react": "4.13.0",
"ttypescript": "^1.5.13",
"typescript": "^4.8.3",
"uuid": "^8.3.0",
"xlsx": "^0.17.5"
},
"scripts": {
"start": "react-app-rewired start --no-cache PORT=3002",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app eject",
"lint": "eslint -c .eslintrc src//*.{js,jsx,ts,tsx} src//**/*.{js,jsx,ts,tsx}",
"prepare": "cd .. && husky install frontend/.husky",
"create-hook": "husky add .husky/pre-commit "node frontend/src/autoOrderTranslations.ts && npx pretty-quick --staged"",
"testDev": "cypress open --env configFile=dev",
"testProd": "cypress open --env configFile=prod",
"autotest": "cypress run"
},
"eslintConfig": {
"extends": "react-app"
},
"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/preset-env": "^7.18.10",
"@babel/preset-react": "^7.18.6",
"@material-ui/core": "^4.0.1",
"@types/jest": "^28.1.6",
"@types/node": "^18.0.6",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.38.0",
"@typescript-eslint/parser": "^5.38.0",
"eslint-config-prettier": "^8.5.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"husky": "^8.0.1",
"prettier": "2.1.2",
"prettier-eslint": "^11.0.0",
"pretty-quick": "^3.1.3",
"react-app-rewired": "^2.2.1",
"tsconfig-paths": "^4.0.0"
}

Version 9.4.0 does not have this problem.

[thebuilder]

Sorry about that. It's impossible to ship something with NPM that just works for everyone.
I think this might be related to your Webpack setup not handling .mjs files. Not sure how react-app-rewired works.
https://stackoverflow.com/a/69343125

[thebuilder]

See also reactioncommerce/reaction-component-library#399 (comment)

[thebuilder]

Give version 9.5.1 a try - Should fix it.

[mantassadauskas]

It works now, thank you :)