[BUG] React: Element type is invalid

[nimo23]

Bug Report Quick Checklist

• I am on the latest version of Snowpack & all plugins.
• I use package manager yarn (Fill in: npm, yarn, pnpm, etc).
• I run Snowpack on OS Mac (Fill in: Windows, Mac, Linux, etc).
• I run Snowpack on Node.js v12+

Describe the bug

I get the following error:

To Reproduce

1. Download the following project (was made by template @snowpack/app-template-react-typescript):

snowpack-mui.zip

2. yarn install
3. yarn run
4. See error!

Expected behavior

No error.

[FredKSchott]

sorry, we can't provide React/framework -specific support in our issue tracker. Converting to a discussion in case anyone else is able to help.

Most likely, this is an issue with your code (the error message points to something possibly wrong in ForwardRef(BottomNavigationAction)

[nimo23]

@FredKSchott Unfortunatley, this seems to be indeed a snowpack issue. The same source works in webpack or when using a template from Create React App(npx create-react-app my-app --template typescript). As a proof, I add the project with same source and which works (because it does NOT use snowpack):

webpack-mui.zip

Compare that with the "snowpack-mui.zip" (see above) (which does NOT work).

[nimo23]

Btw, such issues which seems to be a react issue because it shows no clues about that this is a snowpack issue is very irritating to the user.

I struggled a few hours because of thinking that this is a react issue and not a snowpack issue. The same as
#3033 (where I also lost a few hours only to find out that the reason for this issue is indeed snowpack and not the other framework).

sorry, we can't provide React/framework -specific support in our issue tracker

Your statement proofs that even you cannot distinguish if the reason for this issue is snowpack or the other.

How should one know beforehand about were the issue/bug lies without running the source both on snowpack and webpack? And if the user must run it on both (after any issue raises), only to know wether the issue is a snowpack issue, then I really must ask: why should I use snowpack at all?

[FredKSchott]

There's no harm in you opening the issue if you're not sure! My resources are limited, as are those of everyone who works on this project. I can't debug every issue that comes in.

The log message seems to indicate that there is something wrong in your render method, which is why I say that this is an issue with your code and not Snowpack itself. React is clearly getting back a value from your code that it was not expecting.

If you can pinpoint which line/file/step inside of Snowpack the issue is coming from, then that would help us prove that it was a Snowpack issue and could help us more quickly find a root cause.

[nimo23]

I added two projects (one with snowpack and the other with webpack). The render() of App.tsx causes this issue, but I don't know why, because with webpack it works and with snowpack it doesn't. Maybe you can look in the source of App.tsx (in snowpack-mui.zip) to find the reason why snowpack is not working with this code.

[bengavin]

I can verify that this error occurs for me as well, but only if I move past snowpack 3.0.11, using the latest generates this error for me. This -feels- like a bug in more recent versions of snowpack.

[timjb]

I have experienced a similar issue in a project which uses React + Material UI. The error message I got was the following:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of ForwardRef(Tooltip).

In my project, the only imports from "@material-ui/core" are

import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";

I've noticed that if I change the first one to

import { IconButton } from "@material-ui/core";

or the second one to

import { Tooltip } from "@material-ui/core";

and restart the dev server, the error disappears.

Weirdly enough, when I then undo the change to the import, the error does not appear again. It only reappears after I stop the dev server, delete node_modules/.cache/snowpack and start the dev server again.

[timjb]

@nimo23 After looking at your project, I believe that we have encountered the exact same problem. Like I did, you only use path imports in your project as recommended by Material UI to minimize bundle size. I've verified that the same workaround (replace a path import by a top-level import) works in your project.