v4.3.1 introduced a regression: 'TypeError: Attempted to assign to readonly property.'

[antoinejaussoin]

Describe the bug

Without changing anything else, migrating from v4.2.0 to v4.3.1 introduces a bug when running Socket IO.

The tech stack is Create-React-App (latest) + TypeScript (latest).

Full stack trace:

TypeError: Attempted to assign to readonly property.
(anonymous function)
node_modules/socket.io-client/build/esm/index.js:47
  44 |     connect: lookup,
  45 | });
  46 | if (typeof module !== "undefined") {
> 47 |     module.exports = lookup;
  48 | }
  49 | /**
  50 |  * Protocol version.
View compiled
../node_modules/socket.io-client/build/esm/index.js
http://localhost:3000/static/js/vendors~main.chunk.js:414369:34
__webpack_require__
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:11445:37
__webpack_require__
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
checkDeferredModules
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:45
  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | 
View compiled
webpackJsonpCallback
/Users/antoine/dev/retro-board/frontend/webpack/bootstrap:32
  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;
View compiled
global code
http://localhost:3000/static/js/main.chunk.js:1:101

To Reproduce

Take a Create-React-App project with TypeScript, and update to the latest version of Socket.io-client.

Expected behavior

Upgrading shouldn't throw exceptions.

Platform:

• Device: Apple Mini M1
• OS: Mac OS

Additional context

Again, I have isolated the problem to this specific update: it works perfectly fine with v4.2.0, and breaks when only socket.io-client is updated to v4.3.1.

The frontend I've discovered that problem on is https://github.com/antoinejaussoin/retro-board/blob/develop/frontend/package.json#L66.

[darrachequesne]

This should be fixed in version 4.3.2, could you please check?

[antoinejaussoin]

This should be fixed in version 4.3.2, could you please check?

Just checked, it's working like a charm 🎉

Thanks for your quick response.