React usage in codesandbox

[jimthedev]

Hi there. Thanks for creating this. I was wondering if you've seen this. I created a code sandbox here and in index.js there are these lines:

import { defineCustomElements as defineCustomElementsUsingImport } from "split-me";
const {
  defineCustomElements: defineCustomElementsUsingRequire
} = require("split-me");

Sadly it doesn't seem to work as the objects being imported seem to be undefined. What is strange is that locally I created an app and it seems to work ok. Not sure what is going on. If I added in a line to index.html to add a script tag from unpkg then it works just fine.

Just curious if there is something else that might be going on that I am unaware of.

Cheers.

[alesgenova]

Hi Jim!

I checked out the sandbox and everything seems in order from the code point of view.

Might it be an issue with code sandbox itself?
It's showing that the only export of the split-me package is an empty object as default.
I think it's not honoring the "module": "dist/esm/index.js" entry in package.json

Sorry I couldn't be more helpful, let me know if you find a solution

[jimthedev]

Hey there! So I thought so and tried it on stackblitz.io with the same result. So strange.

[alesgenova]

Btw, the same thing (unsurprisingly) happens when using the latest @ionic/core, which is a collection of stencil components

[jimthedev]

hmmmm

[jimthedev]

It must be something with either how stencil is packaging or how codesandbox is consuming those packages.

This fails to run in codesandbox but downloading the project and running locally works just fine.

[jimthedev]

Ok I opened dual issues: one with Codesandbox and one with Stencil:

I found a workaround that is in these issues but I don't understand why it is needed and would prefer to get at the root of the problem.

[alesgenova]

Interesting discussion, especially in the codesandbox issue. Let's see what the stencil devs say.

Thanks for the update!