Compilation for Vite.js

Hello, I was messing around with Vite.js (with TypeScript & React) and tried to use Recoil, but importing the lib seems broken with Rollup or Vite. I got a Uncaught SyntaxError: import not found: atom in console when I try to use atom.

I’ve just modified the default page by adding to the default Vite/React/TS template (yarn create vite-app --template react-ts)

import { atom } from 'recoil'

// [...]

const state = atom({
  key: 'state',
  default: ''
})

Here is a demo repo : https://github.com/Rykian/vitejs-test-recoil You just have to run a yarn install & yarn dev and go to http://localhost:3000 to see the error.

[mondaychen]

I agree with @JeremyRH. With next release Recoil will come with a ES format build and should thus can work with Vite. Unfortunately I haven’t got time to play with Vite myself (although have been watching Evan You bragging about it for a while). It’s much appreciated if you can try build latest master branch and test with Vite. Otherwise, let’s wait for next release and see if it works.

I’ll investigate and fix this issue if it’s still broken on next release.

[JeremyRH]

For dev builds, Vite uses @rollup/plugin-commonjs which attempts to convert CommonJS to ES modules.

In this case, Vite uses @rollup/plugin-commonjs to transform Recoil’s index.js file. That file does not have “named exports” in the CommonJS style: exports.atom = .... This means named exports in the ES module format are not generated.

Changes are coming that could fix this issue. I’m not familiar enough with Vite to know if it takes advantage of packages that output ES modules.