diff --git a/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx b/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx index 06e4dfd41c11..a36401e19ba1 100644 --- a/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx +++ b/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx @@ -70,10 +70,15 @@ async function renderRemixProject(project: PersistentModel) { } describe('Remix content', () => { - it('Renders the remix container with actual content', async () => { + it('Renders the remix container with actual content and a cyclic dependency', async () => { const project = createModifiedProject({ [StoryboardFilePath]: `import * as React from 'react' import { RemixScene, Storyboard } from 'utopia-api' + import { Card } from '/app/components/card' + + export function gimmeData() { + return '${DefaultRouteTextContent}' + } export var storyboard = ( @@ -90,6 +95,16 @@ describe('Remix content', () => { ) `, + ['/app/components/card.js']: `import * as React from 'react' + import { gimmeData } from '${StoryboardFilePath}' + + export const Card = (props) => { + const data = gimmeData() + return ( +

{data}

+ ) + } + `, ['/app/root.js']: `import React from 'react' import { Outlet } from '@remix-run/react' @@ -103,9 +118,10 @@ describe('Remix content', () => { } `, ['/app/routes/_index.js']: `import React from 'react' + import { Card } from '/app/components/card' export default function Index() { - return

${DefaultRouteTextContent}

+ return } `, }) diff --git a/editor/src/components/canvas/remix/remix-utils.tsx b/editor/src/components/canvas/remix/remix-utils.tsx index 49462aa8ff28..39d45bb82987 100644 --- a/editor/src/components/canvas/remix/remix-utils.tsx +++ b/editor/src/components/canvas/remix/remix-utils.tsx @@ -255,7 +255,7 @@ function getRemixExportsOfModule( displayNoneInstances: Array, metadataContext: UiJsxCanvasContextData, ) => { - let resolvedFiles: MapLike> = {} + let resolvedFiles: MapLike> = {} let resolvedFileNames: Array = [filename] const requireFn = curriedRequireFn(innerProjectContents) @@ -267,11 +267,12 @@ function getRemixExportsOfModule( } let resolvedFromThisOrigin = resolvedFiles[importOrigin] - const alreadyResolved = resolvedFromThisOrigin.includes(toImport) // We're inside a cyclic dependency, so trigger the below fallback const filePathResolveResult = alreadyResolved + const alreadyResolved = resolvedFromThisOrigin[toImport] !== undefined + const filePathResolveResult = alreadyResolved ? left('Already resolved') : resolve(importOrigin, toImport) - forEachRight(alreadyResolved, (filepath) => resolvedFileNames.push(filepath)) + forEachRight(filePathResolveResult, (filepath) => resolvedFileNames.push(filepath)) const resolvedParseSuccess: Either> = attemptToResolveParsedComponents( resolvedFromThisOrigin, @@ -287,7 +288,7 @@ function getRemixExportsOfModule( metadataContext, NO_OP, false, - alreadyResolved, + filePathResolveResult, null, ) return foldEither(