Failed to load source map (CRA 5.0, React 18)

[microcerebus]

Hi, I'm using impulse with CRA 5.0, and react 18. I was previously getting a strange "Failed to load source map" error which I managed to fix via GENERATE_SOURCEMAP=false, but I'm still getting this error when I <Option+click> a div:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at class-editor.tsx:37:29
    at mountMemo (react-dom.development.js:17225:19)
    at Object.useMemo (react-dom.development.js:17670:16)
    at useMemo3 (react.development.js:1650:21)
    at ClassEditor (class-editor.tsx:37:29)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)

[kirillrogovoy]

Hey,

Thanks for submitting the issue.

Quick first feedback:

I've tried installing CRA with npx create-react-app, both JS and TS templates, and then adding Impulse with npm i -D @impulse.dev/runtime@latest

I would add this to App.js

if (process.env.NODE_ENV === 'development') {
  import('@impulse.dev/runtime').then((impulse) => impulse.run())
}

Nothing else is changed. The React version is 18.2.0, Impulse is 0.3.0.

I would run the app with npm start.

Issues:

1. Reproduced: it takes a long time to compile the app. It seems like CRA is trying to compile impulse.es.mjs (6.3MB) even though it's in node_modules. I'm trying to understand what's going on there because the behavior in e.g. Next.js is different as it would not compile the dependencies in node_modules by default.
2. Reproduced: compiling impulse.es.mjs generates a ton of warnings about not being able to parse the source maps. First, it should not be compiled in the first place (see the issue above). Second, there are signs that there's something wrong with the file paths in the generated source maps. I'll look into that too.
3. Not reproduced: Option+clicking on any element should generate the error that's reported in the original issue message. In my case, Impulse just works without anything bad printed on the console.

Tested on Chrome 105, Brave 104, Firefox 101, Safari 15.6.1.

Few questions on reproducing:

1. What's your browser version?
2. Does it work in Incognito with extensions turned off?
3. Does it work if, instead of installing Impulse via npm, you just install it via the browser's console as described here?

[kirillrogovoy]

Regarding source maps warnings.

It seems like a very popular issue with CRA 5:

• https://github.com/facebook/create-react-app/discussions/11767
• https://github.com/facebook/create-react-app/pull/11752

Also, make sure you understand that using GENERATE_SOURCEMAP=false will make it harder for you to debug your own code. See https://github.com/facebook/create-react-app/discussions/11767#discussioncomment-3374189

Now, I do want to ship the source maps for Impulse, and esbuild seems to include a lot of packages from node_modules into those maps, including dev dependencies. It also includes the actual contents of those files, so the actual debugging experience should be solid despite the CRA warnings.

As far as I can tell, your only two options are:

1. Use GENERATE_SOURCEMAP=false and give up on source maps
2. See those warnings but also have most of the source maps.

[kirillrogovoy]

Regarding the quality of the source maps.

It seems like when there's no GENERATE_SOURCEMAP=false and the source maps are generated, the error stack traces are correct, and clicking on source files shows the correct file and line.

[kirillrogovoy]

Your error must have something to do with the cache Impulse stores in IndexDB to avoid expensive postcss/Tailwind calculations on each run.

I've added a new holistic check in 0.3.1 that might solve the error, but the caching would still not work.

[kirillrogovoy]

Closing for inactivity. Feel free to re-open! 🙌