I get a blank screen when I deploy my website, any insight on this?

Moondogfrom_Bahamas · September 13, 2022, 8:22am

Warning: React.jsx: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check your code at SmoothScroll.js:14.
at SmoothScroll (http://localhost:3002/react-project-mp/static/js/bundle.js:3951:5)
at Router (http://localhost:3002/react-project-mp/static/js/bundle.js:60466:30)
at BrowserRouter (http://localhost:3002/react-project-mp/static/js/bundle.js:60087:35)
at App
printWarning @ react-jsx-dev-runtime.development.js:117
error @ react-jsx-dev-runtime.development.js:93
jsxWithValidation @ react-jsx-dev-runtime.development.js:1152
SmoothScroll @ SmoothScroll.js:13
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
webpack_require @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-jsx-dev-runtime.development.js:117 Warning: React.jsx: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check your code at SmoothScroll.js:14.
at SmoothScroll (http://localhost:3002/react-project-mp/static/js/bundle.js:3951:5)
at Router (http://localhost:3002/react-project-mp/static/js/bundle.js:60466:30)
at BrowserRouter (http://localhost:3002/react-project-mp/static/js/bundle.js:60087:35)
at App
printWarning @ react-jsx-dev-runtime.development.js:117
error @ react-jsx-dev-runtime.development.js:93
jsxWithValidation @ react-jsx-dev-runtime.development.js:1152
SmoothScroll @ SmoothScroll.js:13
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
webpack_require @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of SmoothScroll.
at createFiberFromTypeAndProps (react-dom.development.js:25058:1)
at createFiberFromElement (react-dom.development.js:25086:1)
at reconcileSingleElement (react-dom.development.js:14052:1)
at reconcileChildFibers (react-dom.development.js:14112:1)
at reconcileChildren (react-dom.development.js:16990:1)
at mountIndeterminateComponent (react-dom.development.js:17890:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
createFiberFromTypeAndProps @ react-dom.development.js:25058
createFiberFromElement @ react-dom.development.js:25086
reconcileSingleElement @ react-dom.development.js:14052
reconcileChildFibers @ react-dom.development.js:14112
reconcileChildren @ react-dom.development.js:16990
mountIndeterminateComponent @ react-dom.development.js:17890
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
webpack_require @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 The above error occurred in the component:

at SmoothScroll (http://localhost:3002/react-project-mp/static/js/bundle.js:3951:5)
at Router (http://localhost:3002/react-project-mp/static/js/bundle.js:60466:30)
at BrowserRouter (http://localhost:3002/react-project-mp/static/js/bundle.js:60087:35)
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
webpack_require @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of SmoothScroll.
at createFiberFromTypeAndProps (react-dom.development.js:25058:1)
at createFiberFromElement (react-dom.development.js:25086:1)
at reconcileSingleElement (react-dom.development.js:14052:1)
at reconcileChildFibers (react-dom.development.js:14112:1)
at reconcileChildren (react-dom.development.js:16990:1)
at mountIndeterminateComponent (react-dom.development.js:17890:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)

coelmay · September 13, 2022, 8:25am

Hi @Moondogfrom_Bahamas

Can you please provide the URL for your site?

Moondogfrom_Bahamas · September 13, 2022, 8:26am

https://lucky-kheer-496e8e.netlify.app/

Moondogfrom_Bahamas · September 13, 2022, 8:27am

I got rid of the old dependencies like you suggested. However, I’ve been stuck trying to implement a new component to replace it.

Moondogfrom_Bahamas · September 13, 2022, 8:28am

https://github.com/MOONDOG97/react-project-mp

coelmay · September 13, 2022, 8:29am

All the paths for assets are prefixed with /react-project-mp/.

You have a homepage key/value in the package.json of the project. Remove the homepage key.

Moondogfrom_Bahamas · September 13, 2022, 8:39am

Yeah I just tried it, what else you think it may be ?

coelmay · September 13, 2022, 8:42am

I still see it in the package.json. You haven’t removed it.

coelmay · September 13, 2022, 9:09am

I cloned your repository locally and see many errors. You might find more assistance in a community focused on React. This community is more focused on Netlify related issues which yours is not.

Topic		Replies	Views
React "Element type is invalid" error, but only on production, and only when I refresh Support remix	2	935	October 18, 2023
Blank website deployment Support deployment	1	176	November 29, 2023
Astro site not building \| error Command failed with exit code 1 Support deployment	4	1737	April 9, 2023
Site is live, but screen is blank (React app) Support deployment	3	365	December 6, 2023
Deploy Qwik Static Site Generation Project Support deployment	3	276	May 13, 2023

I get a blank screen when I deploy my website, any insight on this?

Related topics