Any idea what might be breaking Preact from 1.4.0 onwards?

[birtles]

I haven't updated to the 1.4.x series yet because a lot of my E2E tests started failing as of 1.4.0.

When I dug into them I saw that they were reporting unexpected console errors. I replaced Preact's minified sources with the dev sources and got the following stack:

TypeError: Cannot create property '_attached' on string 'flex max-w-full appearance-none items-center gap-x-1 rounded-3xl outline-none focus:ring-2 border-2 border-transparent bg-white/70 text-yellow-900 focus:ring-yellow-800/50 dark:bg-white/20 dark:text-yellow-200 dark:focus:ring-yellow-700'
    at setProperty (webpack-internal:///./node_modules/.pnpm/preact@10.26.9/node_modules/preact/src/diff/props.js:88:21)
    at diffElementNodes (webpack-internal:///./node_modules/.pnpm/preact@10.26.9/node_modules/preact/src/diff/index.js:532:56)
    at diff (webpack-internal:///./node_modules/.pnpm/preact@10.26.9/node_modules/preact/src/diff/index.js:330:28)
    at diffChildren (webpack-internal:///./node_modules/.pnpm/preact@10.26.9/node_modules/preact/src/diff/children.js:100:60)
    at diff (webpack-internal:///./node_modules/.pnpm/preact@10.26.9/node_modules/preact/src/diff/index.js:271:68)
    at diffChildren (webpack-internal:///./node_modules/.pnpm/preact@10.26.9/node_modules/preact/src/diff/children.js:100:60)
    at diffElementNodes (webpack-internal:///./node_modules/.pnpm/preact@10.26.9/node_modules/preact/src/diff/index.js:551:59)
    at diff (webpack-internal:///./node_modules/.pnpm/preact@10.26.9/node_modules/preact/src/diff/index.js:330:28)
    at diffChildren (webpack-internal:///./node_modules/.pnpm/preact@10.26.9/node_modules/preact/src/diff/children.js:100:60)
    at diffElementNodes (webpack-internal:///./node_modules/.pnpm/preact@10.26.9/node_modules/preact/src/diff/index.js:551:59)
Location: {"url":"webpack-internal:///./src/components/ErrorBoundary.tsx","lineNumber":28,"columnNumber":16}

props.js:88 appears to correspond to this line in the Preact source: https://github.com/preactjs/preact/blob/d21722e9cb3b4ec7235e16e0a1fa6599d4acef26/src/diff/props.js#L85

My guess is something has changed in minification?

I'm posting this as a discussion question because it's probably going to take half a day or more to generate a suitably minimized reproduction of this issue. I was hoping someone might have an idea of where to look?

I didn't see anything obvious in the 1.4.0 release notes.

(Weirdly I don't see the console errors when running the app in the browser although the app is clearly broken in various places when using rspack 1.4.x.)

[chenjiahan]

Could you try disabling the minimizer and see if the error still exists? https://rspack.rs/config/optimization#optimizationminimize

[birtles]

Ok, there's definitely something weird going on. When I build with rspack 1.3.15 I see output like the following:

/*!***********************************!*\
  !*** ./src/components/Dialog.tsx ***!
  \***********************************/
(function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);...(\"dialog\", {\n        id:
props.id,\n        class:
(0,_utils_classes__WEBPACK_IMPORTED_MODULE_6__.classes)('group m-0 size-full
max-h-none max-w-none overflow-y-auto', 'bg-transparent p-0',
'backdrop:bg-gray-500 dark:backdrop:bg-black', ... \n//# sourceURL=webpack-internal:///./src/components/Dialog.tsx\n");
}),

But in 1.4.0, where it has class: above it becomes id: (i.e. there are two id properties).

In another component class has become active.

This doesn't happen everywhere, just sometimes. It's possible this doesn't affect React because generally people use className there.

The issue doesn't reproduce with 1.4.0-rc.0 so that limits the possible changes to this list.

Nothing particularly stands our there though. Perhaps bumping the swc version?

[birtles]

Yep, looks like this is swc-project/swc#10729

[birtles]

(See swc-project/swc#10743 which more closely resembles the situation I faced.)

[birtles]

I believe this is fixed in v29.4.0 so this should already be fixed on trunk by 42f070c. Any chance of triggering a 1.4.3 release?

[chenjiahan]

Thank you for providing the information! As this is a critical artefact issue, we will release a patch version today.

[birtles]

Thank you!

[chenjiahan]

Rspack v1.4.3 is out 😄: https://github.com/web-infra-dev/rspack/releases/tag/v1.4.3

[birtles]

Thank you!