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.