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(