Blitz: Dynamic component import doesn't work with relative paths

[eorenstein1]

What is the problem?

When trying to dynamically import a component, I get a build error Module not found: Can't resolve '../components/Component'

Steps to reproduce

1. Create a new blitz 0.18.0 project
2. Create a React component app/components/Component.tsx.
3. Try to import from page app/pages/page.tsx

import { BlitzPage, dynamic } from "blitz"

const Component = dynamic(() => import("../components/Component"), {
  ssr: false,
})

const Page: BlitzPage = () => {
  return (
    <div>
      <Component></Component>
    </div>
  )
}

export default Page

I'm positive the relative path is correct. Any ideas how to fix this?

Environment

Windows 10 | win32-x64 | Node: v14.5.0

blitz: 0.18.0 (global)
blitz: 0.18.0 (local)

Package manager: yarn
System:
OS: Windows 10 10.0.18362
CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
Memory: 1.31 GB / 7.92 GB
Binaries:
Node: 14.5.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.12.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.1 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
npmPackages:
@prisma/cli: 2.5.0 => 2.5.0
@prisma/client: 2.5.0 => 2.5.0
blitz: 0.18.0 => 0.18.0
react: 0.0.0-experimental-33c3af284 => 0.0.0-experimental-33c3af284
react-dom: 0.0.0-experimental-33c3af284 => 0.0.0-experimental-33c3af284
typescript: 3.9.7 => 3.9.7

[merelinguist]

The reason for this is because of the way Blitz compiles into a Next.js app.

Your file structure:

• app/components/Component.tsx
• app/pages/page.tsx

Will be compiled to:

• app/components/Component.tsx
• pages/page.tsx

Therefore your relative import won’t work. The easiest way to fix this is to use an absolute import instead:

const Component = dynamic(() => import("app/components/Component"), {
  ssr: false,
})

[flybayer]

Yeah @eorenstein1, try the absolute path and let us know if that works.

Relative paths should work too, so it definitely sounds like a bug!

(@merelinguist relative paths work normally, but looks like we don't support it for import() yet)

[eorenstein1]

@merelinguist @flybayer The absolute path worked. Thanks!