grommet: Grommet fails to run with snowpack

@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.

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.

Thank you for doing that @garrettlr ! I’ll be using your fork until this is fixed.