socketio
npm run build fails when socket-io-client library is imported in newly created react app
I am new to react so its possible that I am doing something obviously wrong. Just point me in the right direction if that's the case.
Describe the bug
I started using socket-io client library in a react app and everything seems to be fine but when I try to build it using npm run build it fails with the following error:
Run npm run build --if-present
> hello-react@0.[1](https://github.com/wickywaka/hello-react/actions/runs/3077212422/jobs/4971914709#step:5:1).0 build
> react-scripts build
Creating an optimized production build...
(node:1703) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:1703) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'find' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'head' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'set' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'test' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'to' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency
(node:1703) Warning: Accessing non-existent property 'which' of module exports inside circular dependency
Failed to compile.
static/js/main.6e31763a.js from UglifyJs
SyntaxError: Name expected [./~/engine.io-client/build/cjs/util.js:[5](https://github.com/wickywaka/hello-react/actions/runs/3077212422/jobs/4971914709#step:5:6),0]
Error: Process completed with exit code 1.
To Reproduce I reproduced this error in this repository and also have a look at the failing GitHub actions workflow: https://github.com/wickywaka/hello-react https://github.com/wickywaka/hello-react/actions/runs/3077212422/jobs/4971914709
Socket.IO client version: ^4.5.1
Client
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import io from "socket.io-client";
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Expected behavior npm run build will not throw an error and the app should work as it does in debug mode (npm start)
Hi! I think that's because you rely on a very old version of uglifyJS, which does not support the ES6 syntax:
└─┬ [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
└── [email protected]
Could you please try to upgrade it?
Thanks for the comment. I will try to update it but I guess that is a problem coming from npm creat-react-app. Will update here.
On Mon, Sep 19, 2022, 09:14 Damien Arrachequesne @.***> wrote:
Hi! I think that's because you rely on a very old version of uglifyJS, which does not support the ES6 syntax:
└─┬ @.***
├─┬ @.***
│ └─┬ @.***
│ └── @.***
├─┬ @.***
│ └─┬ @.***
│ └─┬ @.***
│ └─┬ @.***
│ └─┬ @.***
│ └── @.*** deduped
└─┬ @.***
└── ***@***.***Could you please try to upgrade it?
— Reply to this email directly, view it on GitHub https://github.com/socketio/socket.io-client/issues/1553#issuecomment-1250651070, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABVDYA6BKJYNWQFGHLW5ZDDV7AHEZANCNFSM6AAAAAAQPN7TMY . You are receiving this because you authored the thread.Message ID: @.***>
Thanks. Somehow I had a very old version of react-scripts. 6 years old to be precise. I have no idea how did it ended up in the package.json.