Use absolute path when import

[arlyxiao]

For example

Use

import {useInstantCheckout} from 'components/CartProvider';

instead

import {useInstantCheckout} from '../CartProvider';

[frandiox]

You can do this out of the box starting from your root:

import {useInstantCheckout} from '/src/components/CartProvider';

If that's not enough, then you can add a custom alias in your vite.config.js that builds on top of it:

  resolve: {
    alias: [{find: /^components\/(.*)/, replacement: '/src/components/$1'}],
  },

// import {useInstantCheckout} from 'components/CartProvider';

Or a more general alias:

resolve: {
    alias: [{find: /^~\/(.*)/, replacement: '/src/$1'}],
  },

// import {useInstantCheckout} from '~/components/CartProvider';
// import styles from '~/styles/xyz.module.css';

However, using aliases will break some default features in your editor, such as linking to other files or typings. If you need that, you'd need to add the same alias in a tsconfig.json or jsconfig.json file, depending if you are using TS or JS:

{
    "compilerOptions": {
        "paths": {
            "~/*": ["./src/*"]
        }
    }
}

[MyArgan]

That's odd. I'm on a fresh v1.2.0 install using the demo TS skeleton.

[MyArgan]

@frandiox No other tips/hints to make it work?

[frandiox]

Try passing optimizeBoundaries: false to the Hydrogen plugin in vite.config.js. I think that should fix it for now.

[MyArgan]

@frandiox It works! Thanks, great temporary solution. But should I open an issue or something or is there already one pending?

[frandiox]

It would be useful if you can provide a small repro in https://hydrogen.new or similar in a new Github Issue.
We have some kind of file resolution logic in place that largely works, but it might fail for certain situations. By submitting an issue, we'll try to cover your situation and make it more robust 👍