mohsin-mw/connectverse

A modern and feature-rich chat application built using React, Supabase, and TypeScript. This project aims to provide an immersive and interactive communication experience similar to Discord, while showcasing the power of these cutting-edge technologies.

👋 About Me

Hey there! I'm a seasoned Full Stack Developer, passionate about crafting exceptional user interfaces and building robust backend solutions. Specializing in Next.js with a knack for diverse backend technologies.

🚀 Expertise

I excel in crafting captivating user interfaces that deliver unparalleled UI/UX experiences. Whether it's single-page applications or complex web solutions, my proficiency ensures the seamless realization of exceptional full-stack projects.

Skills

GitHub Stats

Digital Badges

connectverse's Issues

[Bug]: Mirage.js is not working without React Strict Mode

Issue Type

• Bug Report

Description

At the moment I am using Mirage.js to simulate real API behavior for the application. When I add the route (/api/movies) to the server.ts file and start the server, the application doesn't fetch the required API data. However, when I add strict mode to the main.tsx file, the API starts to work. Upon opening the console, I encounter an error: 'You created a second Pretender instance while there was already one running'. This issue arises because React strict mode runs the code twice, resulting in the creation of two server instances. If I remove strict mode, the application doesn't make any request to the API.

Steps to Reproduce

If you're reporting a bug, provide detailed steps to reproduce the issue.

1. Open the application.
2. Navigate to the "/dashboard".
3. Open the console.

Current Behavior

Getting error from React saying: "Running two Pretender servers at once will lead to unexpected results and will be removed entirely in a future major version". Also getting axios error which says 404 when requesting data from http://localhost:5173/api/movies.

Expected Behavior

With/Without Strict mode, I should be getting all the results from the API at initial render without getting any axios or instances error.

Screenshots

Additional Context

I'm using the application on Firefox 116.0.2.

Possible Solution

It is possible that I am facing this issue because of the way I've set up Mirage.js in the Codebase.

Related Issues

None

Checklist

Adjust the checklist items as needed.

• I have searched existing issues to ensure this is not a duplicate.
• I have provided all necessary information.
• I have tagged appropriate labels to this issue.
• I have assigned this issue to the relevant person.