0

So I have an Astro project with integrations with vue, svelte, react, and tailwindcss.

And I suddenly got the errors:Failed to load resource: net::ERR_CONNECTION_RESET, Failed to load resource: net::ERR_CONNECTION_REFUSED, And another Failed to load resource: net::ERR_CONNECTION_REFUSED. Here is the code below.

index.astro:

---
import Layout from "../layouts/Layout.astro";
import Navbar from '../components/React/Navbar'
---

<style>

</style>

<Layout>
    <Navbar />
</Layout>

Navbar.jsx:

import React from 'react'
import { BrowserRouter, Routes, Link} from 'react-router-dom'
import Home from './Home'
import About from './About'
import Blogs from './Blogs'

const Navbar = () => {
  return (
    <>
        <BrowserRouter>
            <Routes>
                <Link to='/'>
                    <p>Home</p>
                    <Home />
                </Link>
                <Link to='/about'>
                  <p>About</p>
                  <About />
                </Link>
            </Routes>
        </BrowserRouter>
    </>
  )
}

export default Navbar

And About.jsx , Blog.jsx , and Home.jsx have the following code:

import React from 'react'

const Component = () => {
  return (
    <>
        
    </>
  )
}

export default Component

Is there any way to fix this?

ΔβΙΧΚαΓ K
  • 57
  • 6
  • Note about the title React(Next.js) : Next.js is a framework that uses React the same way Astro does, so Astro does not have any dependencies to Next.js. Or is this question within the scope of porting an existing React(Next.js) application to Astro, then title is clear. – wassfila Dec 20 '22 at 11:04

1 Answers1

1

Errors fix

I reproduced your example and I fixed two errors

  • from Navbar.jsx remove unused import Blogs from './Blogs' which is wrong filename given you mentioned the files is Blog.jsx without 's'
  • second error is error document is not defined fixed with this update to index.astro adding the client:only directive to ensure Astro server build step does not try to execute a component that uses the browser 'document' API
---
import Layout from "../layouts/Layout.astro";
import Navbar from '../components/React/Navbar'
---

<style>

</style>

<Layout>
    <Navbar client:only/>
</Layout>

Note 1 : After fixing these two errors I could successfully build without reproducing any net::ERR_CONNECTION_REFUSED error.

how to move forward

As you can notice it is not possible to reproduce an exact error due to the multiplicity of the environment factors :

  • package.json and mainly version of Astro used
  • usage of npm, yarn, or pnpm
  • corresponding lock file
  • astro.config.mjs
  • used node version

... and basically everything which makes every environment different. Sharing a git repo is a good step forward, sharing a VM (StackBliz, Codesandbox, Gitpod) can also help reduce variability even further.

solution suggestion

In order to speedup questions resolutions, it is always appreciated when the example that reproduces the error is minimal, and most of the time, when creating such minimal example, the error just disappears.

see also : https://github.com/withastro/astro/tree/main/examples

wassfila
  • 1,173
  • 8
  • 18