what's up?
So, I'm facing a difficult problem to debug and solve by myself using the web literature, for some factors that I will mention.
As you may have noticed from the title, the browser console shows a 482 code minification error and a link that would have the proposal to present a more specific error message regarding this code, however, this problem is not what it appears to be.
Starting with the fact that the respective error code reported (482) does not exist.
The error is not thrown in development environment. This means that I must use the "npm build" and "npm start" commands to provide the environment for the error to be launched.
The error also appears to be a minification error, however, even configuring NextJs with the following settings to facilitate debugging I cannot find clues to the source of the problem:
3.1 First with this code settings: File: next.config.js
`/** @type {import('next').NextConfig} */
const nextConfig = {
productionBrowserSourceMaps: true
}
module.exports = nextConfig`
3.2 And after with this code settings: File: next.config.js
`/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config, { dev, isServer }) => {
config.optimization.minimize = false;
return config;
},
}
module.exports = nextConfig`
Disclaimer: I purposely removed the conditional from within that method.
Basically, it is not possible to debug the application by selecting settings that would prevent minification and allow me more detailed debugging in a "production" environment.
What would be the trigger of the error? The error trigger is associated with navigations between the routes of the application using both the Link component of next and the useRouter hook. Which would indicate that it is not exactly a specific syntax problem, but more related to a bug, more like an internal bug of the new update of next and its new AppRouter route systems, however I am not sure.
PROJECT SETTINGS AND VERSION'S (FILE: Package.json)
`{
"name": "or_adv",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@headlessui/react": "^1.7.15",
"@types/node": "20.4.2",
"@types/react": "18.2.15",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.14",
"eslint-config-next": "13.4.10",
"formik": "^2.4.2",
"framer-motion": "^10.13.0",
"next": "13.4.10",
"postcss": "8.4.26",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.10.1",
"sharp": "^0.32.4",
"swiper": "^10.0.4",
"tailwindcss": "3.3.3",
"typescript": "5.1.6",
"yup": "^1.2.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.1.0",
"@typescript-eslint/parser": "^6.1.0",
"eslint": "^8.45.0",
"eslint-config-prettier": "^8.8.0",
"eslint-import-resolver-typescript": "^3.5.5",
"eslint-plugin-import-helpers": "^1.3.1",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-react": "^7.32.2",
"prettier": "^3.0.0"
}
}
`
PROBLEM LOG:
961-cb6e5423dd1caec6.js:190 Error: Minified React error #482; visit https://reactjs.org/docs/error-decoder.html?invariant=482 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at je (bce60fc1-7983d9b8ef62d3d0.js:91:295)
at Mf (bce60fc1-7983d9b8ef62d3d0.js:118:52)
at Object.Nf [as use] (bce60fc1-7983d9b8ef62d3d0.js:118:243)
at push.8110.exports.use (961-cb6e5423dd1caec6.js:5471:523)
at InnerLayoutRouter (961-cb6e5423dd1caec6.js:1480:67)
at zf (bce60fc1-7983d9b8ef62d3d0.js:114:256)
at jk (bce60fc1-7983d9b8ef62d3d0.js:269:338)
at fk (bce60fc1-7983d9b8ef62d3d0.js:255:321)
at ek (bce60fc1-7983d9b8ef62d3d0.js:253:30)
at $e (bce60fc1-7983d9b8ef62d3d0.js:252:312)
push.8334.window.console.error @ 961-cb6e5423dd1caec6.js:190
overrideMethod @ console.js:213
Ig @ bce60fc1-7983d9b8ef62d3d0.js:144
Mg.c.callback @ bce60fc1-7983d9b8ef62d3d0.js:145
be @ bce60fc1-7983d9b8ef62d3d0.js:89
ce @ bce60fc1-7983d9b8ef62d3d0.js:89
Ei @ bce60fc1-7983d9b8ef62d3d0.js:206
Gi @ bce60fc1-7983d9b8ef62d3d0.js:207
Hi @ bce60fc1-7983d9b8ef62d3d0.js:229
Gi @ bce60fc1-7983d9b8ef62d3d0.js:207
Hi @ bce60fc1-7983d9b8ef62d3d0.js:229
Gi @ bce60fc1-7983d9b8ef62d3d0.js:207
Hi @ bce60fc1-7983d9b8ef62d3d0.js:229
Gi @ bce60fc1-7983d9b8ef62d3d0.js:207
Hi @ bce60fc1-7983d9b8ef62d3d0.js:229
Gi @ bce60fc1-7983d9b8ef62d3d0.js:207
Hi @ bce60fc1-7983d9b8ef62d3d0.js:229
Gi @ bce60fc1-7983d9b8ef62d3d0.js:207
Hi @ bce60fc1-7983d9b8ef62d3d0.js:229
Gi @ bce60fc1-7983d9b8ef62d3d0.js:209
Hi @ bce60fc1-7983d9b8ef62d3d0.js:229
Gi @ bce60fc1-7983d9b8ef62d3d0.js:207
lk @ bce60fc1-7983d9b8ef62d3d0.js:263
ef @ bce60fc1-7983d9b8ef62d3d0.js:261
Sj @ bce60fc1-7983d9b8ef62d3d0.js:247
kf @ bce60fc1-7983d9b8ef62d3d0.js:246
J @ 961-cb6e5423dd1caec6.js:5509
R @ 961-cb6e5423dd1caec6.js:5510
Show less
In conclusion, then what would be my doubt, with the million question and the respective million answer how would I solve this problem considering all the above factors ? It seems to me a bug, and if it is the indicated would be to migrate to the Pages route system of the next, or what would be a better way to debug the respective application?
