Blitz: Relative imports are broken when used in pages

[flybayer]

What is the problem?

Relative imports like import x from '../../x' are broken when used inside pages.

This is because we compile pages to a different structure but aren't updating the file path.

Workaround

Always import from the project root, so import x from 'app/components/x'

Implementation

During the build step, maybe we can just transform the relative import into an absolute import from the project root?

[MrLeebo]

@flybayer Won't transforming the path at build time mean that the imports still won't work during unit tests? Or do tests perform the same build steps?

[ryardley]

During the build step, maybe we can just transform the relative import into an absolute import from the project root?

Great idea

[ryardley]

@flybayer Won't transforming the path at build time mean that the imports still won't work during unit tests? Or do tests perform the same build steps?

You probably won't be able to unit test pages that use relative imports as RPC won't be available. I am not sure pages are a good candidate for unit testing anyway. There might be exceptions but other parts of the system don't need building so should work ok with relative imports.

[flybayer]

Relative imports would still work for unit tests since blitz doesn't do any compiling during this.

Relative imports only break when blitz compiler puts the pages in a different directory structure inside .blitz/caches/

[mbrookson]

@flybayer Think I've found an issue related to this.

It seems like the relative import fix above doesn't seem to work for css files.

The file app/styles/styles.css exists. However, in app/pages/_app.tsx I can't seem to import the css with a relative path.

• import app/styles/styles.css - Works ✅
• import ../styles/styles.css - Doesn't work ❌

Tested the same thing for the sibling theme.ts file and that works both ways.

• import { theme } from app/styles/theme - Works ✅
• import { theme } from ../styles/theme - Also works ✅

[flybayer]

@mbrookson can you test this again in 0.16.3? (just released) I think #733 probably fixed that.

[mbrookson]

@flybayer It is indeed fixed in 0.16.3 🎉