Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
antoinejaussoin opened this issue Oct 16, 2021 · 2 comments
Closed

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

antoinejaussoin opened this issue Oct 16, 2021 · 2 comments
Labels
bug Something isn't working
Milestone
4.3.1

Comments

@antoinejaussoin
Copy link

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).

Retrospected_-_Free_Online_Retrospectives

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.
@antoinejaussoin antoinejaussoin added the bug Something isn't working label Oct 16, 2021
darrachequesne added a commit to socketio/socket.io-client that referenced this issue Oct 16, 2021
@darrachequesne
fix: restore the default export (bis)
6780f29 
The previous commit, while successfully restoring support for:

```js
const socket = require("socket.io-client")(...);
```

breaks for some other cases:

- socketio/socket.io#4128
- #1509

According to [1], we should use `export = `, but this is not supported
by module "esnext":

> Export assignment cannot be used when targeting ECMAScript modules

So we'll go for this ugly workaround, at least until we remove the
default export in the next major release.

[1]: https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require
@darrachequesne
Copy link
Member

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

@antoinejaussoin
Copy link
Author

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.

@darrachequesne darrachequesne added this to the 4.3.1 milestone Oct 18, 2021
sunrise30 added a commit to sunrise30/socket.io-client that referenced this issue Jan 8, 2022
@sunrise30
fix: restore the default export (bis)
13bc5fb 
The previous commit, while successfully restoring support for:

```js
const socket = require("socket.io-client")(...);
```

breaks for some other cases:

- socketio/socket.io#4128
- socketio/socket.io-client#1509

According to [1], we should use `export = `, but this is not supported
by module "esnext":

> Export assignment cannot be used when targeting ECMAScript modules

So we'll go for this ugly workaround, at least until we remove the
default export in the next major release.

[1]: https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
4.3.1
Development

No branches or pull requests
2 participants
@antoinejaussoin @darrachequesne