Hello everyone, I wanted to try to run the client and server locally. I follow

WARNING in ./node_modules/timeago.js/esm/utils/dom.js,about eyucoder/chatgpt-pro

Comments (39)

lele344 commented on July 17, 2024 1

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

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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.

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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'

from chatgpt-pro.

lele344 commented on July 17, 2024

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 [email protected]: 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 [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser npm WARN deprecated [email protected]: Use your platform's native performance.now() and performance.timeOrigin. npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead npm WARN deprecated [email protected]: 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

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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

> [email protected] 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'

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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=""

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

you are very kind

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

EyuCoder commented on July 17, 2024

Did you set REACT_APP_BASE_URL in react .env?

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

EyuCoder commented on July 17, 2024

you have to also add port

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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.

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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.

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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.

from chatgpt-pro.

EyuCoder commented on July 17, 2024

thats a firebase error. it uses popup for login

from chatgpt-pro.

rossman22590 commented on July 17, 2024

i solved it but having issue with vercel on front end

from chatgpt-pro.

EyuCoder commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

EyuCoder commented on July 17, 2024

show me the server

from chatgpt-pro.

lele344 commented on July 17, 2024

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

from chatgpt-pro.

lele344 commented on July 17, 2024

from chatgpt-pro.

rossman22590 commented on July 17, 2024

local or live?

from chatgpt-pro.

lele344 commented on July 17, 2024

local or live?

All local, client and server on the same machine

from chatgpt-pro.

WARNING in ./node_modules/timeago.js/esm/utils/dom.js about chatgpt-pro HOT 39 CLOSED

Comments (39)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent