Blockquote
I used vite to boostrap my react app with ("@tanstack/react-table": "^8.9.2") for my table. Locally everything works fine but can't say thesame for production as it throws a blank screen.
The following error occurs in production.
Uncaught TypeError: Cannot read properties of null (reading 'useState')
at e.useState (chunk-ASRYAZ7L.js:290:24)
at OJ (@tanstack_react-table.js:3349:28)
at j$e (PartListTable.tsx:96:17)
at wC (chunk-BMTCLU35.js:4050:11)
at H3 (chunk-BMTCLU35.js:7186:15)
at B3 (chunk-BMTCLU35.js:6853:15)
at Eee (chunk-BMTCLU35.js:6846:9)
at my (chunk-BMTCLU35.js:6829:11)
at GC (chunk-BMTCLU35.js:6545:11)
at M3 (chunk-BMTCLU35.js:6606:32)
vite.connfig.ts:
/// <reference types="vitest" />
/// <reference types="vite/client" />
import react from "@vitejs/plugin-react-swc";
import { defineConfig, UserConfig } from "vite";
import { InlineConfig } from "vitest";
type Config = UserConfig & {
test: InlineConfig;
};
// https://vitejs.dev/config/
const config:Config = {
plugins: [react()],
test: {
globals: true,
environment: "jsdom",
setupFiles: ['src/setupTest.ts'],
mockReset: true,
},
build: {
outDir: "dist",
sourcemap: true,
commonjsOptions: {
include: [],
},
rollupOptions: {
output: {
globals: {
react: "react",
"react-dom": "ReactDOM",
"react/jsx-runtime": "react/jsx-runtime",
},
},
},
},
optimizeDeps: {
disabled: false,
},
server: {
port: 3000,
strictPort: true,
open: false,
},
resolve: {
alias: {
"./runtimeConfig": "./runtimeConfig.browser",
},
},
};
export default defineConfig(config)
tsConfig file:
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"@hooks/*": ["src/redux/hooks/*"],
"@components/*": ["src/components/*"],
"@customredux/*": ["src/redux/*"],
"@customtypes/*": ["src/types/*"]
},
/* Linting */
// "noUnusedLocals": true,
// "noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"types": ["vitest/globals"]
},
"include": ["src", "./setupTest.ts", "vite.config.ts"],
"references": [{ "path": "./tsconfig.node.json" }],
"exclude": ["node_modules", "dist"]
}
Package.json
{
"type": "module",
"scripts": {
"dev": "vite",
"update": "git pull origin develop",
"build": "tsc && vite build",
"build:docker": "docker system prune -f && docker-compose -f docker-compose.yml up --build",
"preview": "vite preview --host",
"test:clear": "vitest --clearCache",
"test": "nyc --reporter=text-summary --reporter=html --include='src/**' --all vitest run --coverage",
"test:coverage": "nyc --reporter=text-summary --reporter=html --include='src/**' --all vitest run --coverage && nyc check-coverage --statements 70 --branches 70 --functions 70 --lines 70",
"lint": "eslint --ext .js,.ts,.jsx,.tsx --fix",
"postinstall": "husky install",
"commit": "git-cz",
"release": "standard-version"
},
"dependencies": {
"@amcharts/amcharts5": "^5.3.9",
"@chakra-ui/react": "^2.5.2",
"@choc-ui/chakra-autocomplete": "^5.1.5",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.4",
"@mui/styles": "^5.13.2",
"@mui/system": "^5.13.2",
"@orama/orama": "^1.0.0-beta.13",
"@reduxjs/toolkit": "^1.9.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "14.4.3",
"@tanstack/react-table": "^8.9.2",
"@types/js-cookie": "^3.0.3",
"@types/react-lottie": "^1.2.6",
"async-mutex": "^0.4.0",
"axios": "^1.3.4",
"formik": "^2.2.9",
"framer-motion": "^10.8.5",
"i18next": "^22.4.13",
"js-cookie": "^3.0.5",
"jsdom": "^22.1.0",
"jwt-decode": "^3.1.2",
"lottie-react": "^2.4.0",
"notistack": "^3.0.1",
"nyc": "^15.1.0",
"react": "^18.2.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-i18next": "^12.2.0",
"react-icons": "^4.8.0",
"react-paginate": "^8.2.0",
"react-redux": "^8.0.5",
"react-resizable": "^3.0.5",
"react-router-dom": "^6.10.0",
"redux": "^4.2.1",
"redux-persist": "^6.0.0",
"yup": "^1.1.0"
},
"devDependencies": {
"@commitlint/cli": "^17.4.4",
"@commitlint/config-conventional": "^17.4.4",
"@commitlint/types": "^17.4.4",
"@types/node": "^18.15.5",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.56.0",
"@typescript-eslint/parser": "^5.56.0",
"@vitejs/plugin-react": "^4.0.0",
"@vitejs/plugin-react-swc": "^3.3.1",
"@vitest/coverage-c8": "^0.31.1",
"autoprefixer": "^10.4.14",
"commitlint": "^17.4.4",
"eslint": "^8.36.0",
"eslint-cli": "^1.1.1",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-json": "^3.1.0",
"eslint-plugin-prettier": "^4.2.1",
"framer-motion": "^10.8.5",
"happy-dom": "^9.20.3",
"husky": "^8.0.3",
"i18next": "^22.4.13",
"jsdom": "^22.1.0",
"json-server": "^0.17.3",
"lodash": "^4.17.21",
"notistack": "^3.0.1",
"nyc": "^15.1.0",
"postcss": "^8.4.21",
"pre-commit": "^1.2.2",
"prettier": "^2.8.4",
"standard-version": "^9.5.0",
"tailwindcss": "^3.3.1",
"typescript": "^4.9.5",
"vite": "^4.2.0",
"vite-plugin-eslint": "^1.8.1",
"vitest": "^0.31.1"
},
"engines": {
"node": "=16.x"
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
}
Been on this for more than 5 hours surfing the internet and implementing suggested solutions like changing the project config, adding a rollupOptions and more but that seems not to be a fix for this issue or maybe I am doing it wrong.
Will gladly appreciate a helping hand.
-- Solved ----
Am back with a fix for this issue.
Seems this issue has something to do with the project setup. I figured that for some reason the useReactTable hook is unable to access the useState hook hence the error during initialization.
I had to create a similar implementation of the hook manually and then use the custom manual hook I created instead of the one offered by the library.
Hope this helps!
