fix(macro/vite): cjs import in vite macro

[Aslemammad]

Resolves #512
This is a trial to fix the cjs import issue with converting the normal import to node cjs compatible import!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
valtio	✅ Ready (Inspect)	Visit Preview	Aug 13, 2022 at 6:21AM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d3e844f:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
React Parcel	Configuration

[dai-shi]

btw, do you want to support vite 3?

[Aslemammad]

@dai-shi Is there any problem with Vite 3, let me know if you see any issue there.

[dai-shi]

I'm not sure if there's a real issue, but we stick with v2.8.6,

valtio/package.json

Line 198 in 7c85c14

"vite": "2.8.6"

because we need a patch.

[Aslemammad]

@dai-shi I don't think there's a real problem there, let's keep it as is!

[dai-shi]

LGTM
Do we wait for a response in #512?

[Aslemammad]

@dai-shi I believe we should do, it'd be better!

[beaugunderson]

progress, but now fails on the import from slemammad-vite-plugin-macro:

import { defineMacro, createMacroPlugin, defineMacroProvider } from 'aslemammad-vite-plugin-macro';
         ^^^^^^^^^^^
SyntaxError: Named export 'defineMacro' not found. The requested module 'aslemammad-vite-plugin-macro' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'aslemammad-vite-plugin-macro';
const { defineMacro, createMacroPlugin, defineMacroProvider } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
    at async loadConfigFromBundledFile (file:///Users/beau/p/test/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:62986:21)
    at async loadConfigFromFile (file:///Users/beau/p/test/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:62872:28)
    at async resolveConfig (file:///Users/beau/p/test/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:62486:28)
    at async createServer (file:///Users/beau/p/test/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:59089:20)
    at async CAC.<anonymous> (file:///Users/beau/p/test/node_modules/vite/dist/node/cli.js:699:24)

to test this I used this build:

yarn add valtio@https://pkg.csb.dev/pmndrs/valtio/commit/1a0d5e66/valtio/_pkg.tgz

[Aslemammad]

@beaugunderson Feel free to try it now!

[beaugunderson]

hmm, still no go:

$ vite
failed to load config from /Users/beau/p/test/vite.config.ts
error when starting dev server:
TypeError: plugin.defineMacro is not a function
    at file:///Users/beau/p/test/node_modules/valtio/esm/macro/vite.mjs:6:28
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
    at async loadConfigFromBundledFile (file:///Users/beau/p/test/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:62986:21)
    at async loadConfigFromFile (file:///Users/beau/p/test/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:62872:28)
    at async resolveConfig (file:///Users/beau/p/test/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:62486:28)
    at async createServer (file:///Users/beau/p/test/node_modules/vite/dist/node/chunks/dep-5cb728cb.js:59089:20)
    at async CAC.<anonymous> (file:///Users/beau/p/test/node_modules/vite/dist/node/cli.js:699:24)

[Aslemammad]

@beaugunderson Could you share your node version?

[beaugunderson]

@Aslemammad yes, it's v18.7.0, using vite 3.0.5

[beaugunderson]

just tried via nvm with 14, 15, 16, 17, all fail with the same issue

[beaugunderson]

here is a minimal codesandbox that shows the failure:

https://codesandbox.io/s/vite-react-ts-forked-gm49m0?file=/package.json

I appreciate your work on getting this fixed btw!

[Aslemammad]

@beaugunderson Thank you mate, I'm trying to fix it! hope I can deliver it soon!

[beaugunderson]

this might actually be a little better; vite links to stackblitz for their various templates; this is the react-ts template with the only change being following the README steps from valtio to add the patch, boots right to the failure:

https://stackblitz.com/edit/vitejs-vite-qsaxht

[beaugunderson]

note that in the react-ts template "type": "module" is in package.json, which I think is what's causing the issue... just not sure the right way to fix :)

[Aslemammad]

@beaugunderson It now works on my system with your repro, feel free to try it out.