[Bug] Chatbot web React + Node + Gemini não roda no VPS Windows | Gemini e Node.js: integrando sua aplicação com a API do Google

O Código da Jaqueline Oliveira no curso React - Node - Gemini, no momento de rodar o start para o servidor localhost:3000, funciona perfeitamente no meu PC local, mas ao transferir todo código para o meu servidor VPS Windows, no momento de tentar rodar o npm run start vem o erro abaixo.

Se puderem ajudar a resolver agradeço... me parece que o problema está no package.json, porém mesmo mudando o comando pra npm run dev dá o mesmo erro.

> chat-app@0.1.0 dev
> vite --port 3000


  VITE v5.4.6  ready in 1705 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
Error:   Failed to scan for dependencies from entries:
  C:/Users/Administrator/Documents/CHATBOT-ART-BRAZIL (react+node+gemini)/client-react/index.html

  X [ERROR] The JSX syntax extension is not currently enabled

    src/App.js:251:4:
      251 │     <center>
          ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.


X [ERROR] The JSX syntax extension is not currently enabled

    src/components/ConversationDisplayArea.js:9:4:
      9 │     <div className="chat-area">
        ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.


X [ERROR] The JSX syntax extension is not currently enabled

    src/components/Header.js:5:4:
      5 │     <div className="chat-header">
        ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.


X [ERROR] The JSX syntax extension is not currently enabled

    src/components/MessageInput.js:26:4:
      26 │     <div className="message-input">
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.


X [ERROR] The JSX syntax extension is not currently enabled

    src/index.js:9:2:
      9 │   <React.StrictMode>
        ╵   ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.


    at failureErrorWithLog (C:\Users\Administrator\Documents\CHATBOT-ART-BRAZIL (react+node+gemini)\client-react\node_modules\esbuild\lib\main.js:1472:15)
    at C:\Users\Administrator\Documents\CHATBOT-ART-BRAZIL (react+node+gemini)\client-react\node_modules\esbuild\lib\main.js:945:25
    at runOnEndCallbacks (C:\Users\Administrator\Documents\CHATBOT-ART-BRAZIL (react+node+gemini)\client-react\node_modules\esbuild\lib\main.js:1315:45)
    at buildResponseToResult (C:\Users\Administrator\Documents\CHATBOT-ART-BRAZIL (react+node+gemini)\client-react\node_modules\esbuild\lib\main.js:943:7)
    at C:\Users\Administrator\Documents\CHATBOT-ART-BRAZIL (react+node+gemini)\client-react\node_modules\esbuild\lib\main.js:955:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (C:\Users\Administrator\Documents\CHATBOT-ART-BRAZIL (react+node+gemini)\client-react\node_modules\esbuild\lib\main.js:954:54)
    at handleRequest (C:\Users\Administrator\Documents\CHATBOT-ART-BRAZIL (react+node+gemini)\client-react\node_modules\esbuild\lib\main.js:647:17)
    at handleIncomingPacket (C:\Users\Administrator\Documents\CHATBOT-ART-BRAZIL (react+node+gemini)\client-react\node_modules\esbuild\lib\main.js:672:7)
    at Socket.readFromStdout (C:\Users\Administrator\Documents\CHATBOT-ART-BRAZIL (react+node+gemini)\client-react\node_modules\esbuild\lib\main.js:600:7)

Oi, Paulo! Como vai?

O problema ocorre porque o Vite não está reconhecendo JSX corretamente no seu VPS. Vamos corrigir isso com alguns ajustes rápidos.

✅ Como resolver?

👉 Renomeie seus arquivos de .js para .jsx

No diretório src, renomeie arquivos que contenham JSX:
- App.js → App.jsx
- index.js → index.jsx
- Outros componentes que utilizem JSX

👉 Atualize o package.json para garantir compatibilidade

Adicione a seguinte configuração para que o esbuild entenda JSX corretamente:


"esbuild": {
  "loader": {
    ".js": "jsx"
  }
}

👉 Adicione o plugin do React no vite.config.js

Se esse plugin não estiver no seu projeto, adicione:


import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

👉 Reinstale as dependências

Remova e reinstale os pacotes para garantir que tudo está correto:


rm -rf node_modules package-lock.json
npm install

👉 Execute o projeto corretamente

Tente rodar com:


npm run dev

Após essas alterações, tente novamente e veja se o erro persiste.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✅