Uncaught SyntaxError: The requested module '/app/root.tsx? does not provide an export named 'Layout' (at root.tsx)

cliffordfajardo commented 7 months ago

Description

Currently upgrading from remix on esbuild to vite and getting export errors. CleanShot 2024-04-02 at 12 43 57

My root.tsx file:

import { json, LoaderFunctionArgs } from '@remix-run/node';
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react';
import { Toaster } from 'react-hot-toast';
import { Icons } from './icons/Icons';
import { TopNav } from './ui-components/top-nav/TopNav';
import { getUser } from './session.server';
import { getConfigTypes } from './data-access/customizations.server';
import './tailwind.css';

export async function loader ({ request }:LoaderFunctionArgs) {
  return json({ user: await getUser(request), configTypes: await getConfigTypes() });
};

export function Layout({ children }: { children: React.ReactNode }) {
  const data = useLoaderData<typeof loader>();
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="robots" content="noindex" />
        <title>Chameleon</title>

        <Meta />
        <Links />
      </head>
      <body className="tw-bg-warm-gray-200">
        <Icons />
        <Toaster position="bottom-left" />
        <TopNav user={data.user} configTypes={data.configTypes} />
        {/* children will be the root Component, ErrorBoundary, or HydrateFallback */}
        {children}
        <Scripts />
        <ScrollRestoration />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

Expected Behavior

should not warn abot missing export named Layout when Layout is exported from the root.tsx file

Actual Behavior

After upgrading to remix from esbuild to vite I am getting warning errors about root.tsx:

Uncaught SyntaxError: The requested module '/app/root.tsx?t=1712086671427' does not provide an export named 'Layout' (at root.tsx:19:9)

Reproduction

Work in progress, but wanted to post this in case other folks have run into this and get conversation going

System Info

System:
    OS: macOS 14.4.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 8.62 GB / 32.00 GB
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 20.5.0 - ~/.volta/tools/image/node/20.5.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 9.8.0 - ~/.volta/tools/image/node/20.5.0/bin/npm
    bun: 1.0.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 121.0.6167.139
    Chrome Canary: 117.0.5849.2
    Safari: 17.4.1
  npmPackages:
    @remix-run/dev: 2.8.1 => 2.8.1 
    @remix-run/eslint-config: 2.8.1 => 2.8.1 
    @remix-run/express: 2.8.1 => 2.8.1 
    @remix-run/node: 2.8.1 => 2.8.1 
    @remix-run/react: 2.8.1 => 2.8.1 
    @remix-run/testing: 2.8.1 => 2.8.1 
    vite: ^5.1.1 => 5.2.7

Used Package Manager

yarn

kiliman commented 7 months ago

Hmm... seems like something with your project, as my remix-vite-template also exports <Layout> and does not have any issues.

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body suppressHydrationWarning>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

export default function App() {
  return <Outlet />
}

export function ErrorBoundary() {
  return <DefaultErrorBoundary />
}

export function HydrateFallback() {
  return <h1>Loading...</h1>
}

https://github.com/kiliman/remix-vite-template/blob/main/app/root.tsx

cliffordfajardo commented 7 months ago

Even when I revert to not using Layout I get an export error like this, I get an error 🤔 :

// FILE: root.tsx

import { json, LoaderFunctionArgs } from '@remix-run/node';
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react';
import { Toaster } from 'react-hot-toast';
import { Icons } from './icons/Icons';
import { TopNav } from './ui-components/top-nav/TopNav';
import { getUser } from './session.server';
import { getConfigTypes } from './data-access/customizations.server';
import './tailwind.css';

export async function loader ({ request }:LoaderFunctionArgs) {
  return json({ user: await getUser(request), configTypes: await getConfigTypes() });
};

export default function App() {
  const data = useLoaderData<typeof loader>();
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body className="tw-bg-warm-gray-200">
        <Icons />
        <Toaster position="bottom-left" />
        <TopNav user={data.user} configTypes={data.configTypes} />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

CleanShot 2024-04-02 at 13 26 10

Also tried making `root.tsx` super simple and still getting same thing 😢

import { json, LoaderFunctionArgs } from '@remix-run/node';
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react';

export default function App() {
  // const data = useLoaderData<typeof loader>();
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body className="tw-bg-warm-gray-200">
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

Using vite-plugin-inspect

Layout is nowhere to be found, its like its getting removed 🤔

kiliman commented 7 months ago

Have you wiped node_modules?

It might be simpler to create a new app and move the app folder to it.

kb12abz commented 7 months ago

I am also facing a similar issue since migrating to Vite.

Uncaught SyntaxError: The requested module '/app/root.tsx' does not provide an export named 'links' (at root.tsx:245:5)

As suggested above I have wiped node_modules. Issue continues

@cliffordfajardo i have noticed the error seems to go if i remove the use of @babel/preset-env. Just wondered are you using this babel package?

kiliman commented 7 months ago

When filing issues, I think it's helpful if you specify any custom configuration beyond stock Remix. Without an actual repo, troubleshooting these problems is difficult.

Thanks!

cliffordfajardo commented 7 months ago

@cliffordfajardo i have noticed the error seems to go if i remove the use of @babel/preset-env. Just wondered are you using this babel package? - @kb12abz

@kb12abz - yeah I think that may have been it!

I couldn't trace where the error was coming from & I figured that if I was on vite I could probably remove all the old babel dependencies this app was using when it was on remix using esbuild and very old versions of storybook which relied on babel.

CleanShot 2024-04-05 at 16 14 57@2x

cliffordfajardo commented 7 months ago

Its strange though; why did having babel installed effect the remix app runnning on vite? 🤔 CC @pcattori thought my might find this interesting & just put on your radar in case someone in remix discord or elsewhere has similar issue 🔍

pcattori commented 7 months ago

@cliffordfajardo did you have a Babel config file still in the project? That can mess things up

remix-run / remix