Error while loading app in Development
Hi,
I get this error frequently in development environment but not in production. and it goes away on page refresh. I have been unable to figure out whats the issue. I dont know if its gadget related to heymantle related. Can you please help me? Thank you
Uncaught TypeError: Cannot read properties of null (reading 'useState')
at Object.useState (buymore--development.gadget.app/node_modules/.vite/deps/chunk-4HAMFFQC.js?v=f55f8b2b:1066:29)
at Re (buymore--development.gadget.app/node_modules/.vite/deps/@heymantle_polaris.js?v=5c6b7a89:498:39)
at renderWithHooks (buymore--development.gadget.app/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=d4bd0e5b:11548:26)
at mountIndeterminateComponent (buymore--development.gadget.app/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=d4bd0e5b:14926:21)
at beginWork (buymore--development.gadget.app/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=d4bd0e5b:15914:22)
at HTMLUnknownElement.callCallback2 (buymore--development.gadget.app/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=d4bd0e5b:3674:22)
at Object.invokeGuardedCallbackDev (buymore--development.gadget.app/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=d4bd0e5b:3699:24)
at invokeGuardedCallback (buymore--development.gadget.app/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=d4bd0e5b:3733:39)
at beginWork$1 (buymore--development.gadget.app/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=d4bd0e5b:19765:15)
at performUnitOfWork (buymore--development.gadget.app/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=d4bd0e5b:19198:20)
useState @ chunk-4HAMFFQC.js?v=f55f8b2b:sourcemap:1066
Re @ @heymantle_polaris.js?v=5c6b7a89:sourcemap:498
renderWithHooks @ react-dom.development.js:15486
mountIndeterminateComponent @ react-dom.development.js:20103
4 Replies
Here is my package.json
Here is my package.json
{
"name": "buymore",
"version": "0.1.0",
"description": "Internal package for Gadget app gadget-remix-shop-spa (Development environment)",
"license": "UNLICENSED",
"private": true,
"scripts": {
"build": "NODE_ENV=production remix vite:build"
},
"dependencies": {
"@gadgetinc/react": "^0.16.7",
"@gadgetinc/react-shopify-app-bridge": "^0.16.4",
"@remix-run/node": "^2.11.2",
"@remix-run/react": "^2.11.2",
"@shopify/app-bridge-react": "4.0.0",
"@shopify/app-bridge": "3.0.0",
"@shopify/polaris": "^13.8.0",
"@shopify/polaris-icons": "^9.3.0",
"react": "^18.2.0",
"react-color": "^2.19.3",
"react-dom": "^18.2.0",
"react-router-dom": "6.15.0",
"shopify-api-node": "^3.12.6",
"@gadget-client/buymore": "link:.gadget/client",
"gadget-server": "link:.gadget/server",
"react-svg": "^16.1.34",
"@heymantle/polaris": "^12"
},
"devDependencies": {
"@remix-run/dev": "^2.11.2",
"@types/node": "^20.12.8",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react-swc": "3.7.0",
"typescript": "^5.4.5",
"vite": "^5.3.5"
}
}
Hello,
That simply seems to be an error with how you’re using useState in the frontend. You should try using an AI tool like ChatGPT to debug the code where you’re using useState
Thanks, its' weird that its only happening in Dev environment.. but will talk to Chatgpt.
Let me know if you need more assistance