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

[viveleroi]

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

[srmagura]

Can you submit a runnable minimal repro?

[viveleroi]

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

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

[srmagura]

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.

[viveleroi]

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

[viveleroi]

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.

[srmagura]

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.

[viveleroi]

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.

[viveleroi]

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

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

[srmagura]

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

[viveleroi]

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"

[srmagura]

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

[srmagura]

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.