Problem that i don't understand, just i'm going to put images

[MateoZapata2022]

Describe the bug

The first image is the errors and the second is the code implementation

Reproduction

1. Install Library
2. Put in your Component the same that i found in the guide
3. Go to the Browser
4. Look your console in red :(

System Info

System:
    OS: macOS 12.3.1
    CPU: (10) x64 Apple M1 Pro
    Memory: 34.16 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.19.1 - ~/.nvm/versions/node/v14.19.1/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.10.0 - ~/.nvm/versions/node/v14.19.1/bin/npm
  Browsers:
    Chrome: 103.0.5060.53
    Firefox: 100.0.1
    Safari: 15.4

Used Package Manager

npm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[hasangenc0]

hey @MateoZapata2022, is this a server-side rendered app? also can you share the package&react versions?

[MateoZapata2022]

{ "name": "visual-testing-frontend", "version": "0.1.0", "private": true, "dependencies": { "@smartbear/honeycomb": "^0.0.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.4.1", "@types/node": "^16.11.27", "@types/react": "^18.0.6", "@types/react-dom": "^18.0.2", "@typescript-eslint/eslint-plugin": "^5.29.0", "@typescript-eslint/parser": "^5.29.0", "classnames": "^2.3.1", "eslint-config-airbnb": "^19.0.4", "eslint-config-google": "^0.14.0", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-react": "^7.30.0", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.0.0", "react-dom": "^18.0.0", "react-i18next": "^11.17.2", "react-router-dom": "^6.3.0", "react-scripts": "^2.1.3", "typescript": "^4.6.3", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "prepare": "cd .. && husky install .husky", "lint": "eslint .", "lint:fix": "eslint --fix", "format": "prettier --write './*/.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@commitlint/cli": "^17.0.2", "@commitlint/config-conventional": "^17.0.2", "autoprefixer": "^10.4.4", "eslint": "^7.32.0", "eslint-config-prettier": "8.5.0", "eslint-plugin-prettier": "^4.0.0", "husky": "^8.0.1", "install-peers": "^1.0.4", "lint-staged": "^13.0.2", "postcss": "^8.4.12", "prettier": "2.7.1", "tailwindcss": "^3.0.24" }, "lint-staged": { "*/.{js,jsx,ts,tsx}": [ "npx prettier --write", "npx eslint --fix" ] }, "eslintConfig": { "extends": [ "react-app" ] } }

[MateoZapata2022]

Not bro, its a client-side app ...

[MateoZapata2022]

I have problem with React DOM Version https://reactjs.org/warnings/invalid-hook-call-warning.html

[MateoZapata2022]

I Created other project from scratch, with CRA and show the same error, i have react 18 and this component has the 16 react version. do you believe that is the react version problem?

[hasangenc0]

yes, it only occurs in react version ~18. I will investigate the issue tomorrow.

[MateoZapata2022]

Hey bro, i'm pending about your solutions, your component its great and i need it, i'm make a downgrade to react to 17 but nothing ...

Thanks !!!

[HugoLeBoennec]

Hello, same problem here since i switch to React 18.

[magiqfoxx]

Hey, We seem to be having a similar issue. We are on next.js 12.1.5 (react, react-dom: 18.0.0). Error shows up sporadically but stops once we remove Is there any ETA for the potential fix? Thanks!

[hasangenc0]

@magiqfoxx is it possible to share your project? if it's not please share node&npm versions with @trendyol-js/react-carousel version.

[magiqfoxx]

Unfortunately I can't share the project. I was trying to recreate it but no luck so far. node v16.16.0 (npm v8.11.0) @trendyol-js/react-carousel: ^3.0.0

Our dependencies:

"@carbon/react": "^1.8.0",
"@trendyol-js/react-carousel": "^3.0.0",
"chart.js": "^3.8.2",
"formik": "^2.2.9",
"mongodb": "^4.6.0",
"next": "12.1.5",
"next-auth": "^4.3.4",
"react": "18.0.0",
"react-avatar": "^5.0.1",
"react-chartjs-2": "^4.3.1",
"react-dom": "18.0.0",
"react-toastify": "^9.0.1",
"sass": "^1.50.1",
"styled-components": "^5.3.5",
"swr": "^1.3.0",
"uuid": "^8.3.2",
"yup": "^0.32.11"

Error: `Unhandled Runtime Error

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem. Call Stack resolveDispatcher node_modules/@trendyol-js/react-carousel/node_modules/react/cjs/react.development.js (1465:0) useState node_modules/@trendyol-js/react-carousel/node_modules/react/cjs/react.development.js (1496:0) x node_modules/@trendyol-js/react-carousel/dist/es/index.js (1:5032) renderWithHooks node_modules/react-dom/cjs/react-dom.development.js (16141:0) mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js (20838:0) beginWork node_modules/react-dom/cjs/react-dom.development.js (22342:0) callCallback node_modules/react-dom/cjs/react-dom.development.js (4157:0) invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js (4206:0) invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js (4270:0) beginWork$1 node_modules/react-dom/cjs/react-dom.development.js (27243:0) performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js (26392:0) workLoopSync node_modules/react-dom/cjs/react-dom.development.js (26303:0) renderRootSync node_modules/react-dom/cjs/react-dom.development.js (26271:0) performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js (25924:0) flushSyncCallbacks node_modules/react-dom/cjs/react-dom.development.js (11982:0) flushSync node_modules/react-dom/cjs/react-dom.development.js (26040:0)`

Error goes away when Carousel component is removed.

[MarkAajuLarsen]

Also seeing this issue on React 18.

[vehere-ccuMaksym]

For me the roll back to v2.0.1 solved the issue. It happend with react 18.