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

[sljer]

[gilbarbara]

Hey @sljer

Without the additional information required in the issue template, there's no way to know what's happening. Please post your setup and versions.

[raveesgohiel9]

Hello, I have the same error. Here are some details

Configuration:

1. MacOS
2. Node - 16.16.0
3. npm 8.19.4
4. react
5. "react-joyride": "^2.7.0"
6. yarn: 1.22.15

How to reproduce

This error happens when I use 'yarn start' to run start development server on localhost.

I updated my node from 14.7.0 to 16.16.0.Getting this error.

[scalebig]

Same error with npm ...

[gilbarbara]

What do you use to bundle your app? Webpack, vite? Which version? Which @types/react, typescript, and node version?

[bdanielmr]

same error when update 2.5.5 to 2.7.0... 2.5.5 work but dontscrolling when step appears position change a fixed and dont scroll when toltip step is showing this my package.json

{
  "name": "web-home",
  "version": "1.3.1",
  "private": false,
  "files": [
    "module"
  ],
  "scripts": {
    "start": "env-cmd -f .env.local react-scripts start",
    "build:module": "rollup -c",
    "lint": "eslint src",
    "test": "react-scripts test",
    "test:coverage": "npm run test -- --coverage --watchAll=false",
    "test:complete": "react-scripts test --watchAll=false --collect-coverage -u",
    "eject": "react-scripts eject",
    "api": "json-server --w api.json --port 3005"
  },
  "dependencies": {
    "@azure/msal-browser": "^2.28.0",
    "@azure/msal-react": "^1.4.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "classnames": "^2.2.6",
    "core-js": "^3.6.5",
    "currency.js": "^2.0.4",
    "date-fns": "^2.16.1",
    "env-cmd": "^10.1.0",
    "html-react-parser": "4.2.2",
    "node-sass": "^4.14.1",
    "normalize-scss": "^7.0.1",
    "prop-types": "^15.7.2",
    "ramda": "^0.27.1",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-datepicker": "^3.4.1",
    "react-dom": "^16.13.1",
    "react-dropzone": "^11.0.2",
    "react-elastic-carousel": "^0.7.5",
    "react-hook-form": "^6.9.2",
    "react-joyride": "2.7.0",
    "react-responsive": "^8.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "react-svg": "^11.2.5",
    "sass": "^1.26.10",
    "styled-components": "^5.1.1",
    "swr": "^0.2.3",
    "yup": "^0.29.3"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie >= 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 1 opera version",
      "ie 11"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.11.6",
    "@babel/core": "^7.12.8",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "@rollup/plugin-alias": "^3.1.1",
    "@rollup/plugin-babel": "^5.2.1",
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-image": "^2.0.5",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "babel-plugin-styled-components": "^1.11.1",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.2",
    "eslint-plugin-react-hooks": "^4.1.2",
    "json-server": "^0.16.1",
    "prettier": "^2.0.5",
    "rollup": "^2.33.2",
    "rollup-plugin-copy": "^3.3.0",
    "rollup-plugin-delete": "^2.0.0",
    "rollup-plugin-multi-input": "^1.1.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^3.1.8",
    "rollup-plugin-terser": "^7.0.2"
  },
  "peerDependencies": {
    "@azure/msal-browser": "^2.28.0",
    "@azure/msal-react": "^1.4.4",
    "classnames": ">=2.2.6",
    "moment": "^2.27.0",
    "prop-types": ">=15.7.2",
    "react": ">=16.13.1",
    "react-dom": ">=16.13.1",
    "react-player": "^2.6.0",
    "react-redux": "^7.2.0",
    "react-responsive": "^8.1.0",
    "react-router-dom": "^5.2.0",
    "react-svg": "^11.0.38",
    "react-tippy": "^1.4.0",
    "react-tooltip": "^4.2.9",
    "styled-components": ">=4.3.2",
    "swr": "^0.2.3"
  },
  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "collectCoverageFrom": [
      "src/modules/**/components/**/*.jsx",
      "src/modules/**/components/**/*.js",
      "src/modules/**/models/*.jsx",
      "src/modules/**/models/*.js",
      "src/modules/**/utils/*.jsx",
      "src/modules/**/utils/*.js"
    ]
  }
}

[gilbarbara]

This is probably caused by a misconfigured webpack config. If you use react-scripts, upgrade to the latest version (5.0.1).

More info here

[bdanielmr]

This is probably caused by a misconfigured webpack config. If you use react-scripts, upgrade to the latest version (5.0.1).

More info here

yeah update react-script solve that problem thnx so much but i have a problem when tour is open dontscroll

but i have a problem when tour is open dontscroll

this Grabación de pantalla 2023-12-05 a la(s) 22.35.21.mov

[raveesgohiel9]

I Installed react-scripts: 5.0.1 but I can still see the error.

[gilbarbara]

@raveesgohiel9 Probably typescript or @types/react version?

[raveesgohiel9]

types

I cannot see @types in package. json. I am not using typescript. Also there was no react-scripts in my package.json. I did add it.

My react version in pakcage.json is "react": "^17.0.2",

However, I found the @types folder in node_modules the react version is 18.2.44

[gilbarbara]

hey @raveesgohiel9

If you weren't using react-scripts before, you don't need to install it. How is your app being bundled? Webpack? Vite? Anyway, take a look at this post

[raveesgohiel9]

hey @raveesgohiel9

If you weren't using react-scripts before, you don't need to install it. How is your app being bundled? Webpack? Vite? Anyway, take a look at this post

I will look at this post. Thank you. Currently removed the code using react-joyride. But will look at this in the future.

[jippy89]

For those of you who are using react-scripts@4.0.1. You can try using react-joyride@^2.5.5. If you're using lesser react-scripts try downgrading version to version. My suggestion is to check out the create-react-app release date, and then match the date with the releases from react-joyride.

Hope it helps!

[gilbarbara]

Actually, upgrading to react-scripts 5.x is a better option. Or even better, migrate to vite. The react-script package is abandoned, so sticking to a deprecated version isn't safe.