WARNING! This blog post has not been formatted appropriately! The web page was built using my new blog management tool, which does not do any special formatting; everything is treated as plain text, and every line break becomes a new paragraph. Since this post contains large error stacks, it looks horrendous!
On the plus side, I now know the next thing to work on for my blog managent tool :) Now, on with the post...
I had this weird error in my web app this afternoon:
Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
(For a more full error stack, see the end of this post.)
It was frustrating for a good 20 minutes or so. I refactored, stripped things away etc. but could not for the life of me figure out what was happening.
And eventually… I noticed that the file name containing my “LinkTabs” component had no file extension. Doh! I added a .js and I was in business.
Unbelievable how:
a) I could be so foolish to have missed the file extension *
b) something so simple could result in such a bizarre and misleading error in the console!
* In fact there’s a reason why this happened - I normally create a folder for my components, and put the main components in a, index.js file in the folder. This was a really simple test app and I’d just been creating all my files in the root folder. So I’d been somewhat on auto-pilot and created the component filename with what normally I would have as a folder name..
--
And now for that full error stack from browser console:
Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
at /static/media/LinkTabs.30104f55868ca51d9d4c
at div
at http://localhost:3000/static/js/bundle.js:1360:66
at NavTabs (http://localhost:3000/main.099140acb9bd95fed696.hot-update.js:94:76)
at Router (http://localhost:3000/static/js/bundle.js:48333:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:47809:5)
at div
at App
overrideMethod @ react_devtools_backend.js:3973
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
createElement @ react-dom.development.js:8972
createInstance @ react-dom.development.js:10192
completeWork @ react-dom.development.js:19464
completeUnitOfWork @ react-dom.development.js:22815
performUnitOfWork @ react-dom.development.js:22787
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushSync @ react-dom.development.js:22467
scheduleRefresh @ react-dom.development.js:24429
renderer.scheduleRefresh @ react_devtools_backend.js:6402
(anonymous) @ react-refresh-runtime.development.js:304
performReactRefresh @ react-refresh-runtime.development.js:293
(anonymous) @ RefreshUtils.js:74
setTimeout (async)
enqueueUpdate @ RefreshUtils.js:72
executeRuntime @ RefreshUtils.js:232
$ReactRefreshModuleRuntime$ @ Tabs.js:87
./src/Tabs.js @ Tabs.js:87
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
_requireSelf @ hot module replacement:101
apply @ jsonp chunk loading:443
(anonymous) @ hot module replacement:329
internalApply @ hot module replacement:327
(anonymous) @ hot module replacement:268
waitForBlockingPromises @ hot module replacement:221
(anonymous) @ hot module replacement:266
Promise.then (async)
(anonymous) @ hot module replacement:265
Promise.then (async)
(anonymous) @ hot module replacement:244
Promise.then (async)
hotCheck @ hot module replacement:235
check @ dev-server.js:13
(anonymous) @ dev-server.js:55
emit @ events.js:153
reloadApp @ reloadApp.js:46
warnings @ index.js:226
(anonymous) @ socket.js:57
client.onmessage @ WebSocketClient.js:50
react_devtools_backend.js:3973 The above error occurred in the component:
at /static/media/LinkTabs.30104f55868ca51d9d4c
at div
at http://localhost:3000/static/js/bundle.js:1360:66
at NavTabs (http://localhost:3000/main.099140acb9bd95fed696.hot-update.js:94:76)
at Router (http://localhost:3000/static/js/bundle.js:48333:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:47809:5)
at div
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.
overrideMethod @ react_devtools_backend.js:3973
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
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushSync @ react-dom.development.js:22467
scheduleRefresh @ react-dom.development.js:24429
renderer.scheduleRefresh @ react_devtools_backend.js:6402
(anonymous) @ react-refresh-runtime.development.js:304
performReactRefresh @ react-refresh-runtime.development.js:293
(anonymous) @ RefreshUtils.js:74
setTimeout (async)
enqueueUpdate @ RefreshUtils.js:72
executeRuntime @ RefreshUtils.js:232
$ReactRefreshModuleRuntime$ @ Tabs.js:87
./src/Tabs.js @ Tabs.js:87
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
_requireSelf @ hot module replacement:101
apply @ jsonp chunk loading:443
(anonymous) @ hot module replacement:329
internalApply @ hot module replacement:327
(anonymous) @ hot module replacement:268
waitForBlockingPromises @ hot module replacement:221
(anonymous) @ hot module replacement:266
Promise.then (async)
(anonymous) @ hot module replacement:265
Promise.then (async)
(anonymous) @ hot module replacement:244
Promise.then (async)
hotCheck @ hot module replacement:235
check @ dev-server.js:13
(anonymous) @ dev-server.js:55
emit @ events.js:153
reloadApp @ reloadApp.js:46
warnings @ index.js:226
(anonymous) @ socket.js:57
client.onmessage @ WebSocketClient.js:50
react-refresh-runtime.development.js:315 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/LinkTabs.30104f55868ca51d9d4c') is not a valid name.
at createElement (http://localhost:3000/static/js/bundle.js:29660:38)
at createInstance (http://localhost:3000/static/js/bundle.js:30847:24)
at completeWork (http://localhost:3000/static/js/bundle.js:39973:32)
at completeUnitOfWork (http://localhost:3000/static/js/bundle.js:43278:20)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:43250:9)
at workLoopSync (http://localhost:3000/static/js/bundle.js:43176:9)
at renderRootSync (http://localhost:3000/static/js/bundle.js:43142:11)
at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:42759:22)
at http://localhost:3000/static/js/bundle.js:32012:30
at unstable_runWithPriority (http://localhost:3000/static/js/bundle.js:55106:16)
