WARNING in ./node_modules/timeago.js/esm/utils/dom.js

[lele344]

Hello everyone,
I wanted to try to run the client and server locally.
I followed the guide in the readme but when I launch the server I get errors:

[0] WARNING in ./node_modules/timeago.js/esm/utils/dom.js
[0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
[0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts'
[0]
[0] webpack compiled with 8 warnings
[1] [ioredis] Unhandled error event: Error: connect ECONNREFUSED 127.0.0.1:6379
[1]     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16)
[1] [ioredis] Unhandled error event: Error: connect ECONNREFUSED 127.0.0.1:6379
[1]     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16)
[1] [ioredis] Unhandled error event: Error: connect ECONNREFUSED 127.0.0.1:6379
[1]     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16)
[1] [ioredis] Unhandled error event: Error: connect ECONNREFUSED 127.0.0.1:6379
[1]     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16)

I checked the folder:

Directory di C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js

27/01/2023  15:56    <DIR>          .
27/01/2023  15:59    <DIR>          ..
27/01/2023  15:56    <DIR>          dist
27/01/2023  15:56    <DIR>          esm
27/01/2023  15:56    <DIR>          lib
26/10/1985  09:15             1.073 LICENSE
26/10/1985  09:15             3.005 package.json
26/10/1985  09:15             5.082 README.md

And in fact there is no src folder.
Also it gives me connection refused error on port 6379 but I don't have anything else occupying the port and I'm on local, so I guess I don't need to do a nat on router (in any case I tried it anyway before bothering you but didn't solve it).

Can anyone help me figure out where I'm going wrong?
thanks in advance

[EyuCoder]

the error you are facing is not related to timeago.js. even though that library has some issues. i have used redis db for a simple ratelimiter middleware.
what you can do is disable the rate limiter middlewhere by commenting out the following lines from server

app.use('/davinci', rateLimitMiddleware)
app.use('/dalle', rateLimitMiddleware)

also in the response body change limit: res.body.limit to just any number.

[lele344]

Thank you for your reply EyuCoder.
I changed the code into server.js and add the // before the the app.use for the two lines.
I tried to set the line limit: res.body.limit with limit: 1000 but I don't know if it's the right way.
I tried to restart the server into dev mode but I receive a lot of error message:

[0] Compiled with warnings. [0] [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\format.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\format.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\index.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\register.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\register.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts' [0] [0] Search for the keywords to learn more about each warning. [0] To ignore, add // eslint-disable-next-line to the line before. [0] [1] [ioredis] Unhandled error event: Error: connect ECONNREFUSED 127.0.0.1:6379 [1] at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) [0] WARNING in ./node_modules/timeago.js/esm/format.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\format.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\format.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/index.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\index.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/lang/en_US.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/lang/zh_CN.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/realtime.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/register.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\register.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\register.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/utils/date.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/utils/dom.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts' [0] [0] webpack compiled with 8 warnings [1] [ioredis] Unhandled error event: Error: connect ECONNREFUSED 127.0.0.1:6379 [1] at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) [...] [1] [ioredis] Unhandled error event: Error: connect ECONNREFUSED 127.0.0.1:6379

[lele344]

Hi all,
I tried to install it on ubuntu 22.04 on WSL mode because I thought it might be a windows problem but I get the same errors.
I tried deleting everything and starting over but I get the same errors.
I've searched the internet, even retrieved the SRC files of timeago.js and put them in the path where the code looks for it, but I haven't solved it.

Always the same issues:
[0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\format.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\format.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\index.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\register.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\register.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts' [0] [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts' [0] [0] Search for the keywords to learn more about each warning. [0] To ignore, add // eslint-disable-next-line to the line before. [0] [0] WARNING in ./node_modules/timeago.js/esm/format.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\format.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\format.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/index.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\index.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/lang/en_US.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/lang/zh_CN.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/realtime.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/register.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\register.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\register.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/utils/date.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts' [0] [0] WARNING in ./node_modules/timeago.js/esm/utils/dom.js [0] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): [0] Failed to parse source map from 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\test\myenv\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts'

[lele344]

ah, sorry, also tried with a virtualenv, the same.
In all installation I receive warming on client npm install:
(myenv) C:\Users\gabri\test\myenv\chatgpt-clone>cd client && npm i npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin. npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

with 7 high severity vulnerabilities.

and no issue on npm install in server:

added 112 packages, and audited 113 packages in 1s

12 packages are looking for funding
  run npm fund for details

found 0 vulnerabilities

[EyuCoder]

Go to client folder and delete node modules folder and run npm install in that folder. Ignore the warning

[lele344]

Thank you EyuCoder for your reply and for your time.
I followed your advice, deleted the indicated folder and re-launched the installation, unfortunately nothing changed.

I will add one more thing that I have never reported before, that the browser opens with the title "ChatGPT Clone" but the page is completely blank.

C:\Users\gabri\chatgpt-clone\client>npm start dev

> react-template@1.0.1 start
> react-scripts start "dev"

(node:20424) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:20424) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled with warnings.

Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\format.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\format.ts'

Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\index.ts'

Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts'

Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts'

Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts'

Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\register.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\register.ts'

Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts'

Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/timeago.js/esm/format.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\format.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\format.ts'

WARNING in ./node_modules/timeago.js/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\index.ts'

WARNING in ./node_modules/timeago.js/esm/lang/en_US.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\en_US.ts'

WARNING in ./node_modules/timeago.js/esm/lang/zh_CN.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\lang\zh_CN.ts'

WARNING in ./node_modules/timeago.js/esm/realtime.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\realtime.ts'

WARNING in ./node_modules/timeago.js/esm/register.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\register.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\register.ts'

WARNING in ./node_modules/timeago.js/esm/utils/date.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\date.ts'

WARNING in ./node_modules/timeago.js/esm/utils/dom.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\gabri\chatgpt-clone\client\node_modules\timeago.js\src\utils\dom.ts'

webpack compiled with 8 warnings'

[EyuCoder]

when the screen is blank you should always go to chrome dev console tab

[EyuCoder]

these errors are just warning so the right error will be found there

[lele344]

2assert.ts:136 Uncaught (in promise) FirebaseError: Firebase: Error (auth/auth-domain-config-required). at createErrorInternal (assert.ts:136:1) at _assert (assert.ts:167:1) at getIframeUrl (iframe.ts:55:1) at _openIframe (iframe.ts:85:1) at async BrowserPopupRedirectResolver.initAndGetManager (popup_redirect.ts:126:1)

and:

WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed: 
WebSocketClient	@	WebSocketClient.js:16
initSocket	@	socket.js:24
(anonymous)	@	socket.js:48

On .env file into client folder, I've only set the first line:

REACT_APP_API_KEY="my openAI api key"
REACT_APP_AUTH_DOMAIN=""
REACT_APP_PROJECT_ID=""
REACT_APP_STORAGE_BUCKET=""
REACT_APP_MESSAGING_SENDER_ID=""
REACT_APP_APP_ID=""
REACT_APP_MEASUREMENT_ID=""
REACT_APP_BASE_URL=""

[lele344]

but I don't want to use firebase (which I don't know), I thought the script would work just locally.

[EyuCoder]

in that case i will just create a new branch with firebase and redis removed

[lele344]

you are very kind

[EyuCoder]

i have added the new branch and also changed the library causing too much warning. you can read the instruction on the readme here

[lele344]

Thank you EyuCoder,
now the react-template load on my browser but when I try to insert text into the chatgpt, i see the message "thinking...." but no response from openai.
I checked the devtools and I see these errors:

react-dom.development.js:29840 Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
ChatView.js:63          POST http://localhost:3000/davinci 404 (Not Found)
sendMessage @ ChatView.js:63
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
VM78:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
await (async)
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430

[EyuCoder]

i think you should first learn the basics of react and node first to make your life easier. also go to server and run the server there. in client run the client with npm start also in the server run the server with npm start. also make sure to insert openai key in the server env file

[lele344]

hello,
you are absolutely right, I lack the basics, but I just wanted to start with an interesting project like yours and then delve into how it works and possibly adapt it to my needs.

i followed your guide:

git clone https://github.com/EyuCoder/chatgpt-clone
cd chatgpt-clone
cd chatgpt-clone
cd server
copy .env.sample .env
edit the .env file ad insert the openai api into the variable OPENAI_API_KEY inside the "" like: `OPENAI_API_KEY = "sr-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"`
cd ...
cd client
copy .env.sample .env
cd ...
cd client && npm i
cd ...
cd server && npm i
cd ...
git checkout local_setup
cd client
npm run dev

I tried to start the server and the client separately but same issue:

Request URL: http://localhost:3000/davinci
Request Method: POST
Status Code: 404 Not Found
Remote Address: 127.0.0.1:3000
Referrer Policy: strict-origin-when-cross-origin

on preview tab:
Cannot POST /davinci

on console tab

sendMessage	@	ChatView.js:63
callCallback	@	react-dom.development.js:4164
invokeGuardedCallbackDev	@	react-dom.development.js:4213
invokeGuardedCallback	@	react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError	@	react-dom.development.js:4291
executeDispatch	@	react-dom.development.js:9041
processDispatchQueueItemsInOrder	@	react-dom.development.js:9073
processDispatchQueue	@	react-dom.development.js:9086
dispatchEventsForPlugins	@	react-dom.development.js:9097
(anonymous)	@	react-dom.development.js:9288
batchedUpdates$1	@	react-dom.development.js:26140
batchedUpdates	@	react-dom.development.js:3991
dispatchEventForPluginEventSystem	@	react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay	@	react-dom.development.js:6465
dispatchEvent	@	react-dom.development.js:6457
dispatchDiscreteEvent	@	react-dom.development.js:6430

[EyuCoder]

make sure you run them on different port. example - react on 3000 and node on 3001

[lele344]

no, isn't this the issue.
I tried to change the react port on 5500 editing the package.json and changing the line
"start": "react-scripts start",
with
"start": "SET PORT=5500 && react-scripts start",

and the port is changed:

Compiled successfully!

You can now view react-template in the browser.

  Local:            http://localhost:5500
  On Your Network:  http://x.x.x.x:5500

I think the error isn't on port but on these two lines:
https://ibb.co/CVvBpKb

[EyuCoder]

Did you set REACT_APP_BASE_URL in react .env?

[lele344]

I tried to set it with:
REACT_APP_BASE_URL="127.0.0.1"

[EyuCoder]

you have to also add port

[EyuCoder]

in this format REACT_APP_BASE_URL="http://localhost:3001/"

[lele344]

make it with the right port, same issue.
my .env file on client folder:

REACT_APP_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
REACT_APP_AUTH_DOMAIN=""
REACT_APP_PROJECT_ID=""
REACT_APP_STORAGE_BUCKET=""
REACT_APP_MESSAGING_SENDER_ID=""
REACT_APP_APP_ID=""
REACT_APP_MEASUREMENT_ID=""
REACT_APP_BASE_URL="http://localhost:5500/"


Compiled successfully!

You can now view react-template in the browser.

on console, after the "npm start dev"

  Local:            http://localhost:5500
  On Your Network:  http://10.5.0.2:5500

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

If I try to open the 10.5.0.2:5500 the browser cannot find the address, with localhost:5500 yes but I receive always the same error message:

NB: I display the error after I press the SEND key.

[EyuCoder]

1. Openai key is needed on the server not from client side. The client side is for firebase. Just leave it blank.
2. Post your ChatView.js code here

[lele344]

ok sorry for the mistake on client side for the API, just tried a lot of time with different configuration.
But without API on client, same result.

Following the ChatView.js

import React, { useState, useRef, useEffect, useContext } from 'react'
import ChatMessage from './ChatMessage'
import { ChatContext } from '../context/chatContext'
import Thinking from './Thinking'

/**
 * A chat view component that displays a list of messages and a form for sending new messages.
 */
const ChatView = () => {
  const messagesEndRef = useRef()
  const inputRef = useRef()
  const [formValue, setFormValue] = useState('')
  const [thinking, setThinking] = useState(false)
  const options = ['ChatGPT', 'DALL·E']
  const [selected, setSelected] = useState(options[0])
  const [messages, addMessage] = useContext(ChatContext)

  /**
   * Scrolls the chat area to the bottom.
   */
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

  /**
   * Adds a new message to the chat.
   *
   * @param {string} newValue - The text of the new message.
   * @param {boolean} [ai=false] - Whether the message was sent by an AI or the user.
   */
  const updateMessage = (newValue, ai = false, selected) => {
    const id = Date.now() + Math.floor(Math.random() * 1000000)
    const newMsg = {
      id: id,
      createdAt: Date.now(),
      text: newValue,
      ai: ai,
      selected: `${selected}`
    }

    addMessage(newMsg)
  }

  /**
   * Sends our prompt to our API and get response to our request from openai.
   *
   * @param {Event} e - The submit event of the form.
   */
  const sendMessage = async (e) => {
    e.preventDefault()

    const newMsg = formValue
    const aiModel = selected

    const BASE_URL = process.env.REACT_APP_BASE_URL
    const PATH = aiModel === options[0] ? 'davinci' : 'dalle'
    const POST_URL = BASE_URL + PATH

    setThinking(true)
    setFormValue('')
    updateMessage(newMsg, false, aiModel)

    const response = await fetch(POST_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: newMsg,
      })
    })

    const data = await response.json()

    console.log(response.status)
    if (response.ok) {
      // The request was successful
      data.bot && updateMessage(data.bot, true, aiModel)
    } else if (response.status === 429) {
      setThinking(false)
    } else {
      // The request failed
      window.alert(`openAI is returning an error: ${response.status + response.statusText} 
      please try again later`)
      console.log(`Request failed with status code ${response.status}`)
      setThinking(false)
    }

    setThinking(false)
  }

  /**
   * Scrolls the chat area to the bottom when the messages array is updated.
   */
  useEffect(() => {
    scrollToBottom()
  }, [messages, thinking])

  /**
   * Focuses the TextArea input to when the component is first rendered.
   */
  useEffect(() => {
    inputRef.current.focus()
  }, [])

  return (
    <div className="chatview">
      <main className='chatview__chatarea'>

        {messages.map((message, index) => (
          <ChatMessage key={index} message={{ ...message }} />
        ))}

        {thinking && <Thinking />}

        <span ref={messagesEndRef}></span>
      </main>
      <form className='form' onSubmit={sendMessage}>
        <select value={selected} onChange={(e) => setSelected(e.target.value)} className="dropdown" >
          <option>{options[0]}</option>
          <option>{options[1]}</option>
        </select>
        <textarea ref={inputRef} className='chatview__textarea-message' value={formValue} onChange={(e) => setFormValue(e.target.value)} />
        <button type="submit" className='chatview__btn-send' disabled={!formValue}>Send</button>
      </form>
    </div>
  )
}

export default ChatView

[EyuCoder]

then its probably from your setup. i cant help you with that. maybe try running both server and client on the same machine. and use npm run dev to run both right from client folder.

[lele344]

I am running both client and server on the same pc, and launch npm run dev from the /client folder as specified.
I did not make any changes to the files apart from the two .env files (client and server) following the directions you provided.
I don't want to take up any more of your time, I'll try to see for myself if I can figure it out by doing further tests.
Although I'm convinced that the error is on that "unexpected token < ...." as shown in the figure, but as I said I cloned your repo, without making any changes to the files other than the two configuration files.
Thanks for your time

[lele344]

by the way, I also tried the demo site you put in the readme, and that also goes in error:

https://chatgpt.eyucoder.com/

I think the problem is in the code.

[EyuCoder]

thats a firebase error. it uses popup for login

[rossman22590]

i solved it but having issue with vercel on front end

[EyuCoder]

i have updated the .env format for local_setup btw. make sure yours also match's that format

[lele344]

Hi, thank you but same issue

I am using both client and server on the same computer, and I am not using online services.
I am using a client with Windows 11 build 22h2.
NPM version 9.4.0

[lele344]

I run the script from client folder with:
npm start dev

[EyuCoder]

show me the server

[lele344]

sorry, but I didn't understand the request.
what do you want me to share?
thank you

[lele344]

[lele344]

Wait..., of all the tests we had done, I had set the react port from the configuration to 5500.
Since then I have always followed your directions to run npm start dev from client so that both server and client start together.
when you reloaded the two .env.samples, I went and put the default ports back and now that you asked me to show me the server, since with "npm start dev" on port 3001 it didn't show anything, I started two separate instances of client and server.
With two separate instances it works, launching client and server together does not, just re-test now.

first shell:

cd server
npm start

second shell

cd client
npm start

WORKS!!!

one shell:

cd client
npm start dev

doesn't works

Thanks for the help, really

[rossman22590]

local or live?

[lele344]

local or live?

All local, client and server on the same machine