Grommet fails to run with snowpack

I have a pretty simple application with Grommet, Styled Components and Snowpack installed But when I start the app I’m getting the following message:

I tried to install a different version of styled-components (above 5.1) but it also doesn’t work. Snowpack with styled-components alone seems to work fine though.

Expected Behavior

The application should launch without any issues.

Actual Behavior

I get a Uncaught TypeError: (0 , _styledComponents.default) is not a function error message

URL, screen shot, or Codepen exhibiting the issue

Codesandbox: https://codesandbox.io/s/grommet-snowpack-repro-o3zks

Your Environment

• Grommet version: 2.16.2
• Browser Name and version: Microsoft Edge 87
• Operating System and version (desktop or mobile): Desktop Windows 10

[garrettlr]

@ShimiSun give me an hour or two and I’ll find a few github posts that helped, but here’s my process:

1. Start up any, react + snowpack app - a simple “hello world” is enough.
2. Bring in Grommet + dependencies, then import that into your app.
3. At this point, you should see the above error.
4. (the magic) pick any random Grommet component, Comment out the ‘if’ statement from the above snippet, directly import only that file, and it will import properly.

Edit: The github issue in question.. It’s a slightly different error, but with some finagling I’ve managed to get that error to throw rather than the one on this issue, I think by doing the above minus commenting out the if statement. It may also require aliasing ‘styled-components’ to the ESM variant as well.

Edit 2: I took a half hour over the weekend to clone grommet and just delete all the require statements, then aliased ‘grommet’ to that version, and that works as expected within snowpack. I did the same thing with grommet-icons, although rather than cloning that I just ripped out the es6 folder from node_modules.

[jcfilben]

I am looking into this issue, just making a post of my findings so far.

As @garrettlr pointed out, the require statements for the docs are causing a problem because ESM syntax only uses import and export. Import should be used instead of require and mixing both import and require is generally a bad idea. More info in this article: https://kentcdodds.com/blog/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution. However, using import would mean that the docs are always being loaded even when they are not being used. I am looking into how much of an impact this causes and if there are other solutions.

In addition I think there needs to be changes to the grommet-icons library as well. ESM requires there to be a default export and the way styled components is bundled only uses named exports as @woss pointed out. I am looking at the the .babelrc and webpack.config.babel.js files in the grommet-icons repo to try and find what needs to be changed so that the styled components will have a default export after it is bundled.