Home > OS >  UI looks different from the deployed website
UI looks different from the deployed website

Time:01-12

I'm a beginner front-end developer. I recently cloned a github repo for an opensource (sorry can't provide link) and ran it using docker. When I load the UI on localhost only some of the features on the deployed website showed up, but when I used developer tools on chrome there's no error and nothing in the console. When I clicked on the linked displayed on the homepage I the following error popped up for a few seconds and checking the console again I saw the following errors

route-loader.js?361d:91 GET http://localhost:3000/_next/static/chunks/pages/[slug].js net::ERR_ABORTED 404 (Not Found)
eval @ route-loader.js:113
appendScript @ route-loader.js:96
maybeExecuteScript @ route-loader.js:210
eval @ route-loader.js:267
Promise.then (async)
eval @ route-loader.js:264
withFuture @ route-loader.js:47
loadRoute @ route-loader.js:263
loadPage @ page-loader.js:126
_callee5$ @ router.js:1381
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
fetchComponent @ router.js:1411
_callee3$ @ router.js:1098
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
getRouteInfo @ router.js:1166
_callee$ @ router.js:791
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
change @ router.js:921
push @ router.js:533
instance.<computed> @ router.js:167
linkClicked @ link.js:67
onClick @ link.js:233
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
eval @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22391
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22408
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
route-loader.js:104 Uncaught (in promise) Error: Failed to load script: /_next/static/chunks/pages/[slug].js
    at HTMLScriptElement.script.onerror (route-loader.js:104:36)
script.onerror @ route-loader.js:104
error (async)
eval @ route-loader.js:103
appendScript @ route-loader.js:96
maybeExecuteScript @ route-loader.js:210
eval @ route-loader.js:267
Promise.then (async)
eval @ route-loader.js:264
withFuture @ route-loader.js:47
loadRoute @ route-loader.js:263
loadPage @ page-loader.js:126
_callee5$ @ router.js:1381
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
fetchComponent @ router.js:1411
_callee3$ @ router.js:1098
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
getRouteInfo @ router.js:1166
_callee$ @ router.js:791
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
change @ router.js:921
push @ router.js:533
instance.<computed> @ router.js:167
linkClicked @ link.js:67
onClick @ link.js:233
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
eval @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22391
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22408
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
Navigated to http://localhost:3000/bush-point

Sorry if this is vague but what could be the problem? I'm happy to provide more info as long as it doesn't give away what the opensource repo is. Or, any debugging advice is appreciated!

EDIT: I followed the directory _next/static/chunks/pages and didn't see a [slug].js file: my directory

EDIT2: My page looks like this when it should look like this

CodePudding user response:

It looks like you have named one of your pages/ files as [slug].js (or at least that's what its evaluating to - see [slug]

If not, post the contents of your pages directory.

Solve: Rename the file or remove the corresponding files and re-run the build.

  •  Tags:  
  • Related