[plugin:remix-remix-react-proxy] Identifier 'rdtStylesheet' has already been declared. #86

vedbhanushal1 · 2024-01-02T13:18:54Z

vedbhanushal1
Jan 2, 2024

Error - [plugin:remix-remix-react-proxy] Identifier 'rdtStylesheet' has already been declared.

@AlemTuzlak
root.tsx for reference

import type {
  MetaFunction,
  LinksFunction,
  LoaderFunctionArgs,
} from '@remix-run/node'

import { json } from '@remix-run/node'
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from '@remix-run/react'
import '~/tailwind.css'
import rdtStylesheet from 'remix-development-tools/index.css'
import SvgSprite from '~/components/icons/svgSprite'

export const meta: MetaFunction = () => [{ title: 'test' }]

export const links: LinksFunction = () => [
  { rel: 'manifest', href: '/manifest.json' },
  { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
  { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
  // export the stylesheet in development only
  ...(process.env.NODE_ENV === 'development'
    ? [{ rel: 'style', href: rdtStylesheet }]
    : []),
]

export async function loader({ request }: LoaderFunctionArgs) {
  return json({demo:'test'
  })
}

export function App() {
  const data = useLoaderData<typeof loader>()
  return (
    <html className="h-full">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <LiveReload />
        <Scripts />
        <SvgSprite />
      </body>
    </html>
  )
}
// export default withDevTools(App)

let AppExport1 = App
// This imports the dev tools only if you're in development
if (process.env.NODE_ENV === 'development') {
  const { withDevTools } = await import('remix-development-tools')
  AppExport1 = withDevTools(AppExport1)
}

export default AppExport1

so I renamed rdtStylesheet to rdtStylesheet1

import rdtStylesheet1 from 'remix-development-tools/index.css'

export const meta: MetaFunction = () => [{ title: 'test' }]

export const links: LinksFunction = () => [
  { rel: 'manifest', href: '/manifest.json' },
  { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
  { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
  // export the stylesheet in development only
  ...(process.env.NODE_ENV === 'development'
    ? [{ rel: 'style', href: rdtStylesheet1 }]
    : []),
]

and got this Error - Loading module from “app/root.tsx” was blocked because of a disallowed MIME type (“”)

I am getting this error in my browser console
Loading module from “http://localhost:8002/app/root.tsx” was blocked because of a disallowed MIME type (“”).

Answered by AlemTuzlak

Jan 2, 2024

With Vite you don't need to do any modifications to your root.tsx file. You just need to add the vite plugin and it will work, you can revert all of this in your root.tsx and it will work.

View full answer

AlemTuzlak · 2024-01-02T18:41:08Z

AlemTuzlak
Jan 2, 2024
Maintainer

With Vite you don't need to do any modifications to your root.tsx file. You just need to add the vite plugin and it will work, you can revert all of this in your root.tsx and it will work.

1 reply

vedbhanushal1 Jan 3, 2024
Author

thanks @AlemTuzlak show your video of remix dev tools and all set.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[plugin:remix-remix-react-proxy] Identifier 'rdtStylesheet' has already been declared. #86

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

[plugin:remix-remix-react-proxy] Identifier 'rdtStylesheet' has already been declared. #86

vedbhanushal1 Jan 2, 2024

Error - [plugin:remix-remix-react-proxy] Identifier 'rdtStylesheet' has already been declared.

so I renamed rdtStylesheet to rdtStylesheet1

Replies: 1 comment · 1 reply

AlemTuzlak Jan 2, 2024 Maintainer

vedbhanushal1 Jan 3, 2024 Author

vedbhanushal1
Jan 2, 2024

Replies: 1 comment 1 reply

AlemTuzlak
Jan 2, 2024
Maintainer

vedbhanushal1 Jan 3, 2024
Author