React 17: export 'useInsertionEffect' (imported as 'e') was not found
When running yarn start on my project I get the following error. I have checked and all preconditions in my package.json are fullfilled. I have added the contents of my package.json underneath the error listing
failed Building development bundle - 24.852s ERROR in ./node_modules/@table-library/react-table-library/Cell-9ed34849.js 9:10466-10486 export 'useInsertionEffect' (imported as 'e') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version) @ ./node_modules/@table-library/react-table-library/compact.js 1:0-53 1:792-793 1:826-827 1:835-836 1:954-955 1:1004-1005 1:1217-1218 1:1247-1248 1:1314-1315 1:1329-1330 1:2054-2055 1:2088-2089 1:2163-2164 1:2167-2168 1:2509-2510 1:2533-2534 1:2575-2576 1:2579-2580 1:2694-2695 1:2739-2740 1:2776-2777 1:3851-3852 1:3912-3913 1:3926-3927 1:3934-3935 1:3947-3948 1:3951-3952 1:3969-3970 1:4083-4084 1:4146-4147 1:4190-4191 1:4194-4195 1:4360-4361 1:4374-4375 1:4428-4429 1:4617-4618 1:4621-4622 1:4845-4846 1:4859-4860 1:4877-4878 1:4881-4882 1:4899-4900 1:4934-4935 1:4938-4939 1:5039-5040 1:5048-5049 1:5085-5086 1:5357-5358 1:5563-5564 1:5664-5665 1:5744-5745 1:5748-5749 1:5823-5824 1:5827-5828 1:5922-5923 @ ./src/components/UICore/organisms/ExtendedStickyTable/ExtendedStickyTable.tsx 38:0-74 126:74-86 @ ./src/components/UICore/organisms/ExtendedStickyTable/index.ts 4:0-38 4:0-38 @ ./src/components/UICore/organisms/index.ts 9:0-38 9:0-38 @ ./src/components/UICore/index.ts 6:0-28 6:0-28 @ ./src/components/StartFrame/StartFrame.tsx 9:0-43 15:53-67 @ ./src/templates/index.tsx 12:0-61 30:48-58 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 31:11-33:5 @ ./.cache/app.js 14:0-52 27:87-31:1 30:29-42 33:27-40 27:0-31:2
{ "name": "test", "private": true, "version": "0.1.0", "license": "0BSD", "scripts": { "build": "gatsby build --prefix-paths", "develop": "gatsby develop", "format": "prettier --write "**/.{js,jsx,ts,tsx,json,md}"", "start": "npm run develop", "serve": "gatsby serve", "clean": "gatsby clean", "fix": "tslint --fix --project . && prettier --write .", "test": "echo "Write tests! -> https://gatsby.dev/unit-testing" && exit 1", "storybook": "BROWSER='Firefox Developer Edition' start-storybook -p 6006 -s public", "build-storybook": "build-storybook -s public" }, "dependencies": { "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", "@iconify/react": "^3.2.1", "@mui/icons-material": "^5.8.0", "@mui/lab": "^5.0.0-alpha.83", "@mui/material": "^5.8.1", "@mui/styled-engine": "^5.8.0", "@mui/styles": "^5.8.0", "@mui/system": "^5.8.1", "@mui/x-data-grid": "^5.11.1", "@reduxjs/toolkit": "^1.8.1", "@table-library/react-table-library": "^3.1.4", "@testing-library/jest-dom": "^5.16.4", "axios": "^0.27.2", "clsx": "^1.1.1", "date-fns": "latest", "dotenv": "^16.0.1", "downshift": "^6.1.7", "express": "^4.18.1", "gatsby": "^4.14.0", "gatsby-plugin-manifest": "^4.14.0", "html-react-parser": "^1.4.12", "http-proxy-middleware": "^2.0.6", "moment": "^2.29.2", "moment-timezone": "^0.5.34", "notistack": "^2.0.5", "react": "17.0.2", "react-device-detect": "^2.2.2", "react-dom": "17.0.2", "react-helmet": "^6.1.0", "react-icons": "^4.3.1", "react-intersection-observer": "^9.1.0", "react-number-format": "^4.9.3", "react-perfect-scrollbar": "^1.5.8", "react-redux": "^8.0.1", "redux": "^4.1.1", "redux-actions": "^2.6.5", "redux-saga": "^1.1.3" }, "devDependencies": { "@babel/core": "^7.17.10", "@storybook/react": "^6.5.0", "@types/express": "^4.17.13", "@types/node": "^17.0.33", "@types/react-helmet": "^6.1.0", "@typescript-eslint/eslint-plugin": "^5.26.0", "@typescript-eslint/parser": "^5.26.0", "eslint": "^8.15.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.30.0", "eslint-plugin-react-hooks": "^4.5.0", "lint-staged": "^12.4.1", "prettier": "^2.6.2", "typescript": "^4.6.4" }, "lint-staged": { ".js": "eslint --cache --fix" } }
Hi @bennoparikh thanks for reporting! I cannot really reproduce this bug. Can you show the implementation of your table? Maybe I can narrow it down to a specific feature.
Hi @rwieruch thanks for your quick reply. It happens at the time of yarn start (just for info, we are using Gatsby). So the error is in ./node_modules/@table-library/react-table-library/Cell-9ed34849.js 9:10466-10486. The funny think, is that when I use yarn build and deploy on Tomcat, there are no problems in the application or the table, however during build it lists the problems with error / warning, but builds successfully. Unfortunetely when I use yarn start, the development applicaton simple does not start due to theses errors.
Just for testing purposes I updated to react 18.1.0 und react-dom 18.1.0 and then everything works fine. We are considering simply to updating to react 18.1.0 to fix this problem. :-).
So, no stress on this problem, but maybe might be helpful why this is happening for other users.
The React version is useful, thanks! There have been many problems with this major update, so maybe I can fix it from within the library. Thanks again for all the information!
Will close this for now, because this is an issue for older React versions.