Render fails in NextJS: Element type is invalid: expected a string but got object

Question

Render fails in NextJS: Element type is invalid: expected a string but got object

viveleroi opened this issue 2 years ago · comments

Describe the bug

Trying to use this in a very simple nextjs app. The following error appears in the console:

Check your code at index.js:5.
    at Home
    at main
    at Layout (webpack-internal:///./components/layout.js:16:19)
    at DMS (webpack-internal:///./pages/_app.js:26:16)
    at StyleRegistry (C:\Users\viveleroi\web-projects\dms\node_modules\styled-jsx\dist\index\index.js:671:34)
    at FlushEffectContainer (C:\Users\viveleroi\web-projects\dms\node_modules\next\dist\server\render.js:428:37)
    at AppContainer (C:\Users\viveleroi\web-projects\dms\node_modules\next\dist\server\render.js:443:29)
    at AppContainerWithIsomorphicFiberStructure (C:\Users\viveleroi\web-projects\dms\node_modules\next\dist\server\render.js:474:57)
    at div
    at Body (C:\Users\viveleroi\web-projects\dms\node_modules\next\dist\server\render.js:738:21)
error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

The error goes away when I comment out the <Skeleton /> element.

To Reproduce

Not sure. NextJS 12, React 17.0.2. Here's our homepage code with everything stripped. We do have a layout and app root but I've stripped them down to the absolute min as well.

import React from 'react';
import Skeleton from 'react-loading-skeleton';

export default function Home() {
    return <Skeleton />;
}

Actual Behavior
See above. Error appears, breaks app.

Expected Behavior
Skeletons should appear as usual.

Versions

react-loading-skeleton version: 3.1.0
Browser version: Chrome 102.0.5005.115

Sam Magura · Answer 1 · Mon Jun 27 2022 10:53:27 GMT+0800 (China Standard Time)

Can you submit a runnable minimal repro?

Mike Botsko · Answer 2 · Mon Jun 27 2022 11:21:25 GMT+0800 (China Standard Time)

https://github.com/viveleroi/skeleton-min

clone
yarn
yarn run dev
http://localhost:3000

Sam Magura · Answer 3 · Mon Jun 27 2022 21:13:11 GMT+0800 (China Standard Time)

I was able to fix the issue in your repository by following the Next.js documentation on custom App components.

Still, it is a weird error. My best guess is that Next has some magic around custom App components, and that this is what was causing the issue.

Mike Botsko · Answer 4 · Tue Jun 28 2022 00:36:04 GMT+0800 (China Standard Time)

Hmm, now that I look our application actually does use <Component {...pageProps} /> already. I'll look deeper at the docs and your fix.

Mike Botsko · Answer 5 · Tue Jun 28 2022 04:00:19 GMT+0800 (China Standard Time)

Ok I've pushed a commit that makes this a truer minimum example. The App has the NextJS Component piece and the skeleton was moved to the home page. I didn't import css yet because it doesn't affect this.

The difference between this and your PR is that you have the skeleton in actual App file, which is not where it would be in a real use case.

Also, the PR you made doesn't appear to fix anything on my end. I still get the error.

Sam Magura · Answer 6 · Tue Jun 28 2022 05:03:05 GMT+0800 (China Standard Time)

Thanks for updating the repro, I see what is going on now.

If you add this code to your index.js:

import reactLoadingSkeleton from "react-loading-skeleton";

console.log("reactLoadingSkeleton:", reactLoadingSkeleton);

you'll see that it prints

reactLoadingSkeleton: {
  SkeletonTheme: [Function: SkeletonTheme],
  default: [Function: Skeleton]
}

on the server and

reactLoadingSkeleton: ƒ Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp, ...originalPropsStyleOptions }) {
    var _a, _b, _c;

in the browser. The default import is handled differently between the client and server, so it definitely won't work.

I created a new Next.js project using npx create-next-app and it worked correctly. Then I added "type": "module" to package.json to match your code, and I started getting the same error as you.

Do you know for a fact that Next supports "type": "module"? I was not able to find a definitive answer one way or the other.

Mike Botsko · Answer 7 · Tue Jun 28 2022 05:08:49 GMT+0800 (China Standard Time)

I can look but if it doesn't, I'd be shocked because a) it's so prevalent now and b) we're very far along in this app and this is the first time we've had this come up.

Mike Botsko · Answer 8 · Tue Jun 28 2022 05:15:29 GMT+0800 (China Standard Time)

Yes, it does. In 11.1 it was experimental and went live in 12.

https://nextjs.org/blog/next-11-1

Sam Magura · Answer 9 · Tue Jun 28 2022 07:49:47 GMT+0800 (China Standard Time)

I saw that. It seems to be referring to external modules, not your own code.

Mike Botsko · Answer 10 · Tue Jun 28 2022 08:09:24 GMT+0800 (China Standard Time)

Idk. It seems likely that something in skeleton is related to the error, I just don't know what. All of the other front-end imported modules we have work fine. The first time we ever saw the error was when we added this module.

"@tabler/icons": "^1.68.0",
"date-fns-tz": "^1.3.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.2",
"react-router-dom": "^5.2.0",
"react-toastify": "^9.0.4",
"spinners-react": "^1.0.7",
"vanilla-tilt": "^1.7.0"
"classnames": "^2.3.1",
"formik": "^2.2.9",
"graphql-request": "^4.2.0",
"react-calendar": "^3.4.0",
"swr": "^1.3.0",
"tailwindcss": "^3.0.24",
"yup": "^0.32.11"

Sam Magura · Answer 11 · Tue Jun 28 2022 09:05:37 GMT+0800 (China Standard Time)

Thanks for the additional info. It seems like a bug in Next.js. I reported it to them here: vercel/next.js#38084

Sam Magura · Answer 12 · Fri Sep 02 2022 20:48:50 GMT+0800 (China Standard Time)

Closing since this appears to be a Next.js issue. Sadly, there has not been any activity on the issue I posted in the Next repository.