Flaws in ESM Build result in failure to build with Vite, Snowpack, etc.

[joshacheson]

Issue: When including @elastic/eui in a project and using vitejs/vite or pikapkg/snowpack to build, a build fails.

Investigation so far: The best way to get a summary of investigation so far into this issue (that may or may not continue) is probably to look at this issue in vitejs/vite.

I'm filing this issue mostly for awareness, and of course don't hold any expectation that anyone investigates this, fixes it, etc. I have moved on to using CRA because the benefits of @elastic/eui outweighed the benefits of vite or snowpack for my use case.

Cheers

[chandlerprall]

Thanks for reporting and cross-referencing! For completeness & transparency, we have #3437 tracking a known class of issues with EUI+CRA in development mode.

[chandlerprall]

Looking through the vite issue linked above, vitejs/vite#280 (comment) has the specific details: EUI itself is ESM compatible (or is theoretically, as we've never proven that and the dynamic icon import may or may not work in a pure browser ESM context), but has cjs-only dependencies - some of which are mentioned in that comment.

[lemcii]

Snowpack seems to somewhat work, with this workaround:

var reactIs = require("react-is")
var lodash = require("lodash")

module.exports = {
  extends: "@snowpack/app-scripts-react",
  scripts: {},
  plugins: [],
  installOptions: {
    rollup: {
      namedExports: {
        "node_modules/@elastic/eui/node_modules/react-is/index.js": Object.keys(reactIs),
        "node_modules/lodash/lodash.js": Object.keys(lodash),
      },
    },
  },
}

However none of the icons want to work, I'm getting this at runtime:

Loading module from “http://localhost:8080/web_modules/@elastic/assets/'%20+%20typeToPathMap[iconType]%20+%20'.js” was blocked because of a disallowed MIME type (“”).
localhost:8080
Loading failed for the module with source “http://localhost:8080/web_modules/@elastic/assets/'%20+%20typeToPathMap[iconType]%20+%20'.js”. localhost:8080:698:1
TypeError: error loading dynamically imported module

[chandlerprall]

@lemcii do you have a repo available with that setup I could test with?

[lemcii]

@chandlerprall sure, here https://github.com/lemcii/snowpack-eui-test

[FredKSchott]

As of the latest Snowpack, namedExports should no longer be required thanks to an internal rollup upgrade.

[lemcii]

Thanks, upgrade the example and removed the namedExports workaround above.

Did have this error:

Uncaught ReferenceError: global is not defined
    web_modules elastic/eui.js:192579

Used a workaround from this issue, imagine this may be "fixed" by Snowpack later.

[FredKSchott]

+1, we should be able to handle global without the need for a node polyfill plugin

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[balthild]

Hello. Why do this issue be closed? It seems the problem has not been fixed in EUI 42.0.0.

[aircjm]

Hello. Why do this issue be closed? It seems the problem has not been fixed in EUI 42.0.0.

+1

[theamanbhargava]

Any workarounds for this?

[balthild]

I workaround it by adding

        <script>
            globalThis.global = globalThis;
        </script>

to somewhere before the main script.