Compilation error: import React in a vanilla context

[ndrean]

Just sharing things about Valtio/vanilla.

I had a hard time with a compilation error saying that I had to import React.

👎 I imported proxyMap from "valtio/utils"

Do: ✌️

import { proxy } from "valtio/vanilla";
import { proxyMap } from "valtio/vanilla/utils";
                                   ^^^

import { snapshot, subscribe } from "valtio/vanilla";

[overthemike]

Hm - I just tested this myself without any issues. It's even more odd about the requirement for react. Only piece that requires react are the useSnapshot and useQuery hooks. I don't even think the need to require React specifically has been needed since React 17. What version are you running?

The /utils folder has a barrel index file that exports all of the utils. Importing from valtio/vanilla/utils and valtio/vanilla is fine too, btw. It won't hurt anything. But you should be able to do both. Are you doing anything else? Tree-shaking maybe? I've heard that this can sometimes cause issues when barrel files are used (which valtio does do...)

Could you share some more details about how your build compilation / env is set up?

[ndrean]

I only have "valtio": "^2.1.4" and SolidJS
I use pnpm install and then Vite to bundle, with vite-plugin-pwa.

I checked again.

If I use import { proxyMap } from "valtio/utils";, I get:

There was an error during the `VitePWA` build:
  node_modules/.pnpm/[email protected]/node_modules/valtio/esm/react.mjs (2:18): 
"useRef" is not exported by "__vite-optional-peer-dep:react:valtio", 
imported by "node_modules/.pnpm/[email protected]/node_modules/valtio/esm/react.mjs".

file: /Users/nevendrean/code/elixir/solidyjs/assets/node_modules/.pnpm/[email protected]/node_modules/valtio/esm/react.mjs:2:18

1: import { useMemo, useRef, useSyncExternalStore, useCallback, useLayoutEffect, useEffect, useDebugValue } from 'react';
2: import { isChanged, createProxy, affectedToPathList } from 'proxy-compare';
                     ^
3: import { subscribe, snapshot } from 'valtio/vanilla';

The usage is nothing special:

import { proxy } from "valtio/vanilla";
import { proxyMap } from "valtio/vanilla/utils";

const state = proxy({
  selection: proxyMap(),
  flight: {},
  airports: initialAirports(),
  deletionState: {
    isDeleted: false,
    timestamp: null,
    deletedBy: null,
  },
});

[....]
import { snapshot, subscribe } from "valtio/vanilla";

const unsubscribe = subscribe(state.selection, () => {
    if (state.selection.has(props.inputType)) {
      const airport = snapshot(state.selection.get(props.inputType));
      .....

[overthemike]

Ohh - gotcha. You're using SolidJS. The index file for valtio exports the react hooks my default (which is why useSnapshot is imported directly through the valtio package: import { useSnapshot } from 'valtio'. That's why this is happening. Importing it directly from the vanilla directory gets around the react export.

I'll make a note to add something to the docs about import with solid. Thanks for the insight!

[ndrean]

Looking forward to better understand the real issue with your comment in the doc. Thks!

[overthemike]

The issue is that the main export for 'valtio' is this file:
https://github.com/pmndrs/valtio/blob/main/src/index.ts

which is exporting out both the vanilla js and the react modules. When you import directly from 'valtio', those react modules will complain with solid. Import directly through the vanilla directory, however, there aren't any references to react. Does that clear it up a bit?

[ndrean]

Yes, but I don't see why Solid. I could have used anything - except React - and I would have had the same error, wouldn't I?

[overthemike]

Yes, you are correct. I only mentioned solid because that's what you're using. Here's what I'm proposing to put in the docs:

https://github.com/pmndrs/valtio/pull/1089/files

[ndrean]

Cristal clear