Use pure ES modules

[ehmicky]

See background at https://github.com/netlify/team-dev/issues/36

Once #450 is done and released, we should use pure ES modules and make a major release.

This is more than just switching from CommonJS to import/export. See this list for other changes which might be involved. This should be broken in many PRs, as much as possible, to lower the risk. Also, non-breaking changes (such as adding file extensions in imports, or loading JSON files differently) should be done before the breaking changes (such as using import/export statements).

At the moment, framework-info is only used by:

• build-info: so support for pure ES modules should be added first there: Use pure ES modules build-info#181
• netlify-cli: same thing for Netlify CLI: Use pure ES modules cli#3514
• netlify-react-ui: will this be a problem when importing this module from netlify-react-ui? Do we bundle code to make ES modules work in netlify-react-ui? Or maybe we now only support browsers with ES modules support? @nasivuela Do you know what the situation is?

[nasivuela]

netlify-react-ui: will this be a problem when importing this module from netlify-react-ui? Do we bundle code to make ES modules work in netlify-react-ui? Or maybe we now only support browsers with ES modules support? @nasivuela Do you know what the situation is?

We do bundle the code with webpack + esbuild. framework-info is relatively big, we split it from the main bundle and download it after the main bundle.
I do not know how it will behave with an only ESM package but I can see this sentence My repos are not the place to ask ESM/TypeScript/Webpack/Jest/ts-node/CRA support questions. in sindresorhus' guide 😅 Let me ask on the FE guild.

[erezrokah]

framework-info uses the designated package.json browser field:

framework-info/package.json

Line 6 in 95b9819

"browser": "./dist/index.js",

and uses browserslist to target

framework-info/package.json

Line 115 in 95b9819

"browserslist": [

I think Webpack uses the browser field for web based targets.

Based on #152, I believe we do support quite old browsers in the UI app

[nasivuela]

To be clear, I'm not contemplating using ESM directly on the browser at the moment, just wondering if our current setup will bundle an ESM package.

[ehmicky]

The following items are left, in order:

• 6.1.0 changed the way JSON files were imported. build-info and Netlify CLI have successfully upgraded to 6.1.0, but we should also upgrade it in netlify-react-ui.
• chore!: use pure ES modules #577 is a WIP to add pure ES modules. I have released a release candidate on npm which I've been trying to use in netlify-react-ui (https://github.com/netlify/netlify-react-ui/pull/9862). I've discovered 8 different issues, some rather complex, related to doing so. I have filed https://github.com/netlify/netlify-react-ui/issues/9869 to organize those issues, which are currently blocking that PR. I might be able to do some of those, but others will require some help from our front-end folks.
• Remove some of the tests of this repository which are now irrelevant (https://github.com/netlify/framework-info/pull/577/files#r763497854)
• Try to remove the Webpack bundle altogether. I believe this should work, but we need to make a release candidate and try it with netlify-react-ui. It would be good to do it as a follow-up step, separate from the ones above. Note this is only the Webpack bundle published to npm (npm run build:browser:core and webpack.config.core.js), not the Webpack bundle used for the "Vanilla test site" (npm run build:browser:site-react and webpack.config.site.js, which should be removed by https://github.com/netlify/framework-info/pull/577/files#r763497854)

[ehmicky]

Done!