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

cliffordfajardo · 2024-04-02T19:42:49Z

Description

Currently upgrading from remix on esbuild to vite and getting export errors.

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

The text was updated successfully, but these errors were encountered:

kiliman · 2024-04-02T20:15:22Z

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 · 2024-04-02T20:26:54Z

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>
  );
}

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 · 2024-04-02T20:50:10Z

Have you wiped node_modules?

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

kb12abz · 2024-04-04T12:18:05Z

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 · 2024-04-04T14:24:33Z

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 · 2024-04-05T23:16:24Z

@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.

cliffordfajardo · 2024-04-05T23:19:21Z

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 · 2024-04-05T23:20:50Z

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

cliffordfajardo added the bug:unverified label Apr 2, 2024

brophdawg11 added package:dev vite labels Apr 3, 2024

cliffordfajardo changed the title ~~Uncaught SyntaxError: The requested module '/app/root.tsx? does not provide an export named 'Layout' (at root.tsx:19:9)~~ Uncaught SyntaxError: The requested module '/app/root.tsx? does not provide an export named 'Layout' (at root.tsx) Apr 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

cliffordfajardo commented Apr 2, 2024 •

edited

kiliman commented Apr 2, 2024 •

edited

cliffordfajardo commented Apr 2, 2024 •

edited

kiliman commented Apr 2, 2024

kb12abz commented Apr 4, 2024 •

edited

kiliman commented Apr 4, 2024

cliffordfajardo commented Apr 5, 2024 •

edited

cliffordfajardo commented Apr 5, 2024

pcattori commented Apr 5, 2024

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

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

Comments

cliffordfajardo commented Apr 2, 2024 • edited

Description

Expected Behavior

Actual Behavior

Reproduction

System Info

Used Package Manager

kiliman commented Apr 2, 2024 • edited

cliffordfajardo commented Apr 2, 2024 • edited

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

Using vite-plugin-inspect

kiliman commented Apr 2, 2024

kb12abz commented Apr 4, 2024 • edited

kiliman commented Apr 4, 2024

cliffordfajardo commented Apr 5, 2024 • edited

cliffordfajardo commented Apr 5, 2024

pcattori commented Apr 5, 2024

cliffordfajardo commented Apr 2, 2024 •

edited

kiliman commented Apr 2, 2024 •

edited

cliffordfajardo commented Apr 2, 2024 •

edited

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

kb12abz commented Apr 4, 2024 •

edited

cliffordfajardo commented Apr 5, 2024 •

edited