chore: Start upgrading CRA to latest.

[cjpillsbury]

adding PR for exploratory work on different build tool acrobatics

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
elements-demo-create-react-app	✅ Ready (Inspect)	Visit Preview	May 4, 2022 at 6:01PM (UTC)
elements-demo-nextjs	✅ Ready (Inspect)	Visit Preview	May 4, 2022 at 6:01PM (UTC)
elements-demo-svelte-kit	✅ Ready (Inspect)	Visit Preview	May 4, 2022 at 6:01PM (UTC)
elements-demo-vanilla	✅ Ready (Inspect)	Visit Preview	May 4, 2022 at 6:01PM (UTC)
elements-demo-vue	✅ Ready (Inspect)	Visit Preview	May 4, 2022 at 6:01PM (UTC)

[codecov]

Codecov Report

Merging #210 (8a98b24) into main (8e0826a) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main     #210   +/-   ##
=======================================
  Coverage   81.42%   81.42%           
=======================================
  Files          37       37           
  Lines        3989     3989           
  Branches      132      132           
=======================================
  Hits         3248     3248           
  Misses        734      734           
  Partials        7        7           

[gkatsev]

Looking at webpack's bundle and this doesn't seem right 😅

/***/ "../../packages/playback-core/dist/index.cjs":
/*!***************************************************!*\
  !*** ../../packages/playback-core/dist/index.cjs ***!
  \***************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

"use strict";
module.exports = __webpack_require__.p + "static/media/index.dceebc1c266d5806e2b4.cjs";

/***/ }),

It looks like static/media/index.dceebc1c266d5806e2b4.cjs contains the file as expected but it isn't loading it for some reason and instead just returning that playback-core exports a single default string that's /static/media/index.dceebc1c266d5806e2b4.cjs

[gkatsev]

It seems like it doesn't know about .cjs filetypes and is treating it as an external resource.

[gkatsev]

Also, running into an issue where media-chrome is imported in cjs-land but it's esm-only right now.

[gkatsev]

Yup, CRA doesn't like cjs files facebook/create-react-app#12352

[gkatsev]

Made a PR against this branch which has some fixes that get things working: cjpillsbury#3

It brings in #204, renamed the commonjs build files to .cjs.js, adds esm builds to the react projects. This makes the web-component files work, but the react projects are still broken with the following error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

[gkatsev]

Superseded by #225