fix(build): Handle ESM imports for @babel/template

[Thisen]

This PR (hopefully) fixes ESM imports for @babel/template, when using vite.

Fixes #1251.

[vercel]

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

Name	Status	Preview	Updated
jotai	✅ Ready (Inspect)	Visit Preview	Jun 27, 2022 at 9:21PM (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 efe33b0:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
Next.js	Configuration
Next.js with custom Babel config	Configuration
React with custom Babel config	Configuration

[github-actions]

Size Change: +309 B (0%)

Total Size: 145 kB

Filename	Size	Change
dist/babel/plugin-debug-label.js	893 B	+12 B (+1%)
dist/babel/plugin-react-refresh.js	1.11 kB	+13 B (+1%)
dist/babel/preset.js	1.36 kB	+26 B (+2%)
dist/esm/babel/plugin-debug-label.js	730 B	+19 B (+3%)
dist/esm/babel/plugin-react-refresh.js	944 B	+20 B (+2%)
dist/esm/babel/preset.js	1.18 kB	+29 B (+3%)
dist/system/babel/plugin-debug-label.development.js	835 B	+17 B (+2%)
dist/system/babel/plugin-debug-label.production.js	625 B	+7 B (+1%)
dist/system/babel/plugin-react-refresh.development.js	1.04 kB	+18 B (+2%)
dist/system/babel/plugin-react-refresh.production.js	807 B	+9 B (+1%)
dist/system/babel/preset.development.js	1.28 kB	+33 B (+3%)
dist/system/babel/preset.production.js	1 kB	+12 B (+1%)
dist/umd/babel/plugin-debug-label.development.js	1.05 kB	+19 B (+2%)
dist/umd/babel/plugin-debug-label.production.js	783 B	+7 B (+1%)
dist/umd/babel/plugin-react-refresh.development.js	1.26 kB	+18 B (+1%)
dist/umd/babel/plugin-react-refresh.production.js	939 B	+8 B (+1%)
dist/umd/babel/preset.development.js	1.5 kB	+29 B (+2%)
dist/umd/babel/preset.production.js	1.14 kB	+13 B (+1%)

ℹ️ View Unchanged

Filename	Size
dist/devtools.js	3.85 kB
dist/esm/devtools.js	3.18 kB
dist/esm/immer.js	609 B
dist/esm/index.js	5.11 kB
dist/esm/optics.js	661 B
dist/esm/query.js	1.25 kB
dist/esm/redux.js	251 B
dist/esm/urql.js	1.53 kB
dist/esm/utils.js	5.15 kB
dist/esm/valtio.js	526 B
dist/esm/xstate.js	1.13 kB
dist/esm/zustand.js	284 B
dist/immer.js	726 B
dist/index.js	5.95 kB
dist/optics.js	938 B
dist/query.js	1.36 kB
dist/redux.js	314 B
dist/system/devtools.development.js	3.36 kB
dist/system/devtools.production.js	2.41 kB
dist/system/immer.development.js	733 B
dist/system/immer.production.js	469 B
dist/system/index.development.js	5.33 kB
dist/system/index.production.js	3.08 kB
dist/system/optics.development.js	765 B
dist/system/optics.production.js	455 B
dist/system/query.development.js	1.4 kB
dist/system/query.production.js	963 B
dist/system/redux.development.js	339 B
dist/system/redux.production.js	217 B
dist/system/urql.development.js	1.68 kB
dist/system/urql.production.js	1.18 kB
dist/system/utils.development.js	5.49 kB
dist/system/utils.production.js	3.53 kB
dist/system/valtio.development.js	639 B
dist/system/valtio.production.js	400 B
dist/system/xstate.development.js	1.25 kB
dist/system/xstate.production.js	805 B
dist/system/zustand.development.js	372 B
dist/system/zustand.production.js	235 B
dist/umd/devtools.development.js	3.98 kB
dist/umd/devtools.production.js	2.69 kB
dist/umd/immer.development.js	871 B
dist/umd/immer.production.js	570 B
dist/umd/index.development.js	6.05 kB
dist/umd/index.production.js	3.33 kB
dist/umd/optics.development.js	1.08 kB
dist/umd/optics.production.js	671 B
dist/umd/query.development.js	1.5 kB
dist/umd/query.production.js	1.03 kB
dist/umd/redux.development.js	454 B
dist/umd/redux.production.js	322 B
dist/umd/urql.development.js	1.77 kB
dist/umd/urql.production.js	1.22 kB
dist/umd/utils.development.js	9.61 kB
dist/umd/utils.production.js	6.18 kB
dist/umd/valtio.development.js	722 B
dist/umd/valtio.production.js	500 B
dist/umd/xstate.development.js	1.34 kB
dist/umd/xstate.production.js	852 B
dist/umd/zustand.development.js	479 B
dist/umd/zustand.production.js	334 B
dist/urql.js	1.62 kB
dist/utils.js	9.4 kB
dist/valtio.js	586 B
dist/xstate.js	1.19 kB
dist/zustand.js	344 B

_{compressed-size-action}

[Thisen]

@dai-shi Not sure it works - Try this:
https://stackblitz.com/edit/vitejs-vite-5z9vhf?file=index.html,package.json

Getting the same error.

[dai-shi]

Getting the same error.

Not sure either, but the error message is different.

[plugin:vite:react-babel] /home/projects/vitejs-vite-5z9vhf/src/main.tsx: _babel_template.default is not a function

[Thisen]

Should we merge and try?

[dai-shi]

No, we don't need to merge for a try. Doesn't csb build work? One can install it locally.

[Thisen]

@dai-shi I tried out this PR version with https://github.com/alan-nf/jotai-vite-react-refresh and it works 💪🏼

Ready to merge!

[dai-shi]

The change looks okay.