Skip to content

bug(max): valtio exports from @umijs/max are undefined at runtime #13358

Description

@afc163

What happens?

When valtio: {} is enabled in a Max project, importing Valtio APIs from @umijs/max does not work at browser runtime.

import { proxy } from '@umijs/max';

const state = proxy({ ok: true });

Runtime error observed locally:

TypeError: (0 , __TURBOPACK__imported__module__...src/.umi/exports.ts...proxy) is not a function

The same issue was originally noticed from ant-design-pro issue ant-design/ant-design-pro#11772. I did not rely on that report as the conclusion; I reproduced and narrowed it locally.

Reproduction environment

Project: ant-design/ant-design-pro

Node: v22.22.0
npm: 10.9.4
@umijs/max: 4.6.64
umi: 4.6.64
@umijs/plugins: 4.6.64
@umijs/valtio: 1.0.4
valtio: 1.11.2
bundler: utoopack 1.4.13

Config change:

export default defineConfig({
  // ...
  valtio: {},
});

Temporary startup probe in src/app.tsx:

import { proxy } from '@umijs/max';

const valtioProbe = proxy({ ok: true });

Then run:

npm exec max setup
npm run dev

Open http://localhost:8000 and the app fails before rendering because proxy from @umijs/max is not callable.

Expected behavior

@umijs/max should re-export the Valtio APIs generated by the valtio plugin, so this should work:

import { proxy, useSnapshot } from '@umijs/max';

Investigation notes

@umijs/valtio itself is not the problem.

Both Node ESM and CommonJS probes expose a valid proxy function:

node --input-type=module -e "import * as v from '@umijs/valtio'; console.log(typeof v.proxy, v.proxy({ ok: true }).ok)"
# function true

node -e "const v = require('@umijs/valtio'); console.log(typeof v.proxy, v.proxy({ ok: true }).ok)"
# function true

Direct browser import also works in the same project and bundler setup:

import { proxy } from '@umijs/valtio';

const valtioProbe = proxy({ ok: true });

With that direct import, the dev page renders normally.

The generated temp files also look correct after enabling valtio: {}:

// src/.umi/exports.ts
export { proxy, useSnapshot, snapshot, subscribe, subscribeKey, proxyWithComputed, proxyWithHistory, proxyWithDevtools, proxyMap, proxySet, derive, underive, useProxy, ref, watch } from '/path/to/project/src/.umi/plugin-valtio';
// src/.umi/plugin-valtio/index.ts
export {
  proxy,
  useSnapshot,
  snapshot,
  subscribe,
  subscribeKey,
  proxyWithComputed,
  proxyWithHistory,
  proxyWithDevtools,
  proxyMap,
  proxySet,
  derive,
  underive,
  useProxy,
  ref,
  watch,
} from '/path/to/project/node_modules/@umijs/valtio';

So the failing boundary appears to be the generated @umijs/max/@@/exports barrel path at runtime, not the Valtio package or the user's app code.

I also compared @umijs/plugins@4.6.51 and @umijs/plugins@4.6.64; dist/valtio.js is byte-identical between the two versions, so this does not look like a recent change in the Valtio plugin implementation.

Workaround

Use the plugin package directly:

import { proxy } from '@umijs/valtio';

or import from Valtio directly:

import { proxy } from 'valtio';

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions