Make Hydrogen to be Emotion JS ready

[DonKoko]

Emotion is a popular css-in-js library that is SSR ready and comes with lots of great features. https://github.com/emotion-js/emotion
EmotionJS is typescript ready so I think that should also be part of the integration.

I have attempted myself to make it work, but due to my very limited knowledge of Vite I have run into some problems.
Here is what we have done so far:

I am using the demo-store-ts starting template and trying to add @emotion/react to my project.

In my package.json I have:

"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",

as well as "@emotion/babel-plugin": "^11.9.2", in my devDependencies

I have added "jsxImportSource": "@emotion/react", to my tsconfig file
as well as I have added the correct plugins to vite.config

react({
  jsxImportSource: '@emotion/react',
  babel: {
    plugins: ['@emotion/babel-plugin'],
  },
}),

I am however facing an issue that i cant get my head around.

[davidhousedev]

It looks like the error you're experiencing is a type resolution issue, possibly because you have moduleResolution: 'node16' in your tsconfig.json file. Try changing this to moduleResolution: 'node' to see if that fixes this particular issue.

That said, using moduleResolution: 'node' is probably going to make other issues arise because of Shopify/hydrogen#1776