useProxy macro failing with vite

[naturalethic]

Using:

• vite
• vite-plugin-babel-macros

Source:

import { useProxy } from "valtio/macro"
import { state } from "../state"

const Navigation = () => {
  // const snap = useSnapshot(state)
  useProxy(state)

Error:

1:53:23 PM [vite] Internal server error: (project)/web/site/components/Navigation.tsx: valtio/macro: Cannot read property '0' of undefined Learn more: https://www.npmjs.com/package/valtio
  Plugin: babel-macros
  File: (project)/web/site/components/Navigation.tsx
      at NodePath._getKey ((project)/node_modules/@babel/traverse/lib/path/family.js:296:25)
      at NodePath.get ((project)/node_modules/@babel/traverse/lib/path/family.js:288:17)
      at NodePath._getPattern ((project)/node_modules/@babel/traverse/lib/path/family.js:328:21)
      at NodePath.get ((project)/node_modules/@babel/traverse/lib/path/family.js:290:17)
      at (project)/node_modules/valtio/macro.js:37:114
      at Array.forEach (<anonymous>)
      at macro ((project)/node_modules/valtio/macro.js:33:88)
      at macroWrapper ((project)/node_modules/babel-plugin-macros/dist/index.js:57:12)
      at applyMacros ((project)/node_modules/babel-plugin-macros/dist/index.js:226:14)
      at ImportDeclaration ((project)/node_modules/babel-plugin-macros/dist/index.js:110:28)

[dai-shi]

Thanks for reporting. I never used vite other than quick start, but probably, there are some incompatibilities that we could fix on our end.

@Aslemammad Would you be interested in looking into this?

[dai-shi]

Wait, are we sure if this is vite only issue? @naturalethic Can you try to reproduce the issue with codesandbox?

[naturalethic]

Works fine here: https://codesandbox.io/s/eloquent-herschel-ig44g

I'll try to figure out repro'ing the error on there with vite in the morning.

Edit: I'm not sure I can use vite on codesandbox ?

[dai-shi]

thanks. so, it's vite only issue.
you could use vite on codesandbox container, but you can just share the repro in github or something.

[naturalethic]

I did not mention I'm using Typescript, which may be the issue, rather than vite.

Edit: Typescript is not the issue. I've tried a number of bundlers, and the macro only works with ones that are backed by webpack. I don't really want to become an expert in macros or bundling, but if anyone is interested, for vite at least, you may need to rewrite with https://github.com/typed-macro/typed-macro

[dai-shi]

To sum up, the current useProxy macro is only for babel.
If I get it right, to support esbuild, it will be a completely new feature.

[Aslemammad]

@dai-shi I can work on this, what are the plans/instructions?

[dai-shi]

@Aslemammad I guess you would first need to learn typed-macro (or find some alternatives).