Remix: Page and local server crashes when switching routes

ren-chon commented 2 years ago

What package has an issue

@mantine/core

Describe the bug

Hello, When I navigate between routes in my project suddenly the page becomes unresponsive and the "Oh, Snap!" prompt shows. I tried again to open the link in a new tab, the link refuses to connect until I restart the server. I did install all the dependencies and followed the installation process in the docs. My other projects still work without problems. just mantine ui has this problem I tried on Chrome browser and brave

My root.tsx

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "remix";
import type { MetaFunction, LinksFunction } from "remix";
import { MantineProvider } from '@mantine/core';
import rtlPlugin from 'stylis-plugin-rtl';
import styles from '~/styles.css';

export const meta: MetaFunction = () => {
  return { title: "New Remix App" };
};

export const links: LinksFunction = () => {
  return [
    { rel: "stylesheet", href: styles }
  ];
};

export default function App() {

  return (
    <html lang="ar" dir="rtl">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <MantineProvider emotionOptions={{ key: 'mantine', stylisPlugins: [rtlPlugin] }}>
          <Outlet />
        </MantineProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

The other routes are just plain mantine components styled with tailwind css

In which browser did the problem occur

chrome and brave

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

rtivital commented 2 years ago

Please provide a repository that replicates this issue.

ren-chon commented 2 years ago

Hi, I was able to solve the problem today. it was my mistake. My route's name was the same name as the "Title" component so they clashed when i imported the component.

mantinedev / mantine