Uncaught TypeError: Cannot add property lanes, object is not extensible

[ravadisagarrao]

🐛 Bug Report

Below is the error I am getting after upgrading "react-i18next" from v11.18.6 to v12.3.1 Uncaught TypeError: Cannot add property lanes, object is not extensible at markUpdateLaneFromFiberToRoot (react-dom.development.js:21928:1) at scheduleUpdateOnFiber (react-dom.development.js:21837:1) at updateContainer (react-dom.development.js:25482:1) at legacyRenderSubtreeIntoContainer (react-dom.development.js:26037:1) at render (react-dom.development.js:26103:1) at new Toaster (toast.class.tsx:45:1) at ./node_modules/@chakra-ui/toast/dist/esm/toast.class.js (toast.class.tsx:74:1) at options.factory (react refresh:6:1) at webpack_require (bootstrap:24:1) at fn (hot module replacement:62:1)

To Reproduce

Below is the package.json file

{
  "name": "xyz-ui",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "react-scripts test --env=jest-environment-jsdom --watchAll=false --coverage",
    "build-css": "sass src/passport/styles/main.scss:public/styles/passport-tui.css",
    "analysis": "node passport-analytics.js",
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "prepare": "husky install"
  },
  "dependencies": {
    "@chakra-ui/react": "1.6.0",
    "@date-io/date-fns": "1.3.13",
    "@material-ui/core": "4.12.4",
    "@material-ui/pickers": "3.3.10",
    "@mui/icons-material": "5.11.16",
    "@mui/material": "5.12.0",
    "@mui/styles": "5.12.0",
    "@mui/utils": "5.12.0",
    "@mui/x-date-pickers": "^5.0.20",
    "ajv": "8.12.0",
    "ajv-formats": "2.1.1",
    "axios": "0.27.2",
    "buffer": "6.0.3",
    "dayjs": "^1.11.13",
    "dinero.js": "1.9.1",
    "i18next": "22.5.0",
    "moment": "2.29.4",
    "notistack": "2.0.8",
    "prop-types": "15.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-i18next": "12.3.1",
    "react-router-dom": "6.7.0",
    "react-zoom-pan-pinch": "2.3.1",
    "styled-components": "5.3.6"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "11.2.7",
    "eslint-config-prettier": "8.6.0",
    "husky": "8.0.3",
    "jest-environment-jsdom": "27.5.1",
    "lint-staged": "13.2.2",
    "prettier": "2.8.3",
    "react-scripts": "5.0.1",
    "sass": "1.57.1",
    "source-map-explorer": "2.5.3",
    "webpack": "5.81.0",
    "webpack-bundle-analyzer": "4.7.0"
  },

Your Environment

• runtime version: node v20.10.0, chrome browser
• i18next version: 22.5.0
• os: Windows

Can someone please help me on this?

[adrai]

Please provide a minimal reproducible example repository... btw: I don't think this is at all related to i18next, since it is also not existing in the error stack...

[ravadisagarrao]

Hi @adrai,

This is the complete stack trace.

Uncaught TypeError: Cannot add property lanes, object is not extensible at markUpdateLaneFromFiberToRoot (react-dom.development.js:21928:1) at scheduleUpdateOnFiber (react-dom.development.js:21837:1) at updateContainer (react-dom.development.js:25482:1) at legacyRenderSubtreeIntoContainer (react-dom.development.js:26037:1) at render (react-dom.development.js:26103:1) at new Toaster (toast.class.tsx:45:1) at ./node_modules/@chakra-ui/toast/dist/esm/toast.class.js (toast.class.tsx:74:1) at options.factory (react refresh:6:1) at webpack_require (bootstrap:24:1) at fn (hot module replacement:62:1) options.factory @ react refresh:6 webpack_require @ bootstrap:24 fn @ hot module replacement:62 ./node_modules/@mui/styled-engine/GlobalStyles/GlobalStyles.js @ useTheme.js:10 options.factory @ react refresh:6 webpack_require @ bootstrap:24 fn @ hot module replacement:62 ./node_modules/@mui/system/esm/GlobalStyles/GlobalStyles.js @ index.js:35 options.factory @ react refresh:6 webpack_require @ bootstrap:24 fn @ hot module replacement:62 ./node_modules/@mui/material/GlobalStyles/GlobalStyles.js @ useFormControl.js:5 options.factory @ react refresh:6 webpack_require @ bootstrap:24 fn @ hot module replacement:62 ./node_modules/@mui/material/CssBaseline/CssBaseline.js @ buttonClasses.js:7 options.factory @ react refresh:6 webpack_require @ bootstrap:24 fn @ hot module replacement:62 ./src/App.js @ bundle.js:16 options.factory @ react refresh:6 webpack_require @ bootstrap:24 fn @ hot module replacement:62 ./src/index.js @ i18n.js:27 options.factory @ react refresh:6 webpack_require @ bootstrap:24 (anonymous) @ startup:7 (anonymous) @ startup:7

And here is i18n.js file

import i18n from 'i18next'; import { initReactI18next } from 'react-i18next';

const resources = { en: { translation: { hello: 'Hello, World' } }, de: { translation: { hello: 'Hallo, Welt' } } };

i18n .use(initReactI18next) .init({ resources: resources, fallbackLng: 'en', keySeparator: true, interpolation: { escapeValue: false }, debug: false });

export default i18n;

As per above log looks like it is complaining about statement "export default i18n;".

Please let me know if you need any more info.

Thanks, Sagar

[adrai]

i18n.js is your code... still not i18next... and you are just pasting code snippets... I need a minimal reproducible example repository.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.