From 27df868ea8991d7588d182d071c24b7aa3cd3f86 Mon Sep 17 00:00:00 2001 From: Lucas Koehler Date: Thu, 16 Apr 2026 10:27:51 +0200 Subject: [PATCH 1/3] vue: add jest testing hints on imports and add exports to package.json - Add documentation on import order for jest (or other) unit tests using CJS transformations - Add explicit `exports` property to vue's package.json to facilitate tools finding the correct bundle Mitigates #2250 --- packages/vue/README.md | 21 +++++++++++++++++++++ packages/vue/package.json | 7 +++++++ 2 files changed, 28 insertions(+) diff --git a/packages/vue/README.md b/packages/vue/README.md index a03c58463e..1f9dba0737 100644 --- a/packages/vue/README.md +++ b/packages/vue/README.md @@ -289,6 +289,27 @@ const myComponent = defineComponent({ The injected `jsonforms` object is not meant to be modified directly. Instead it should be modified via the provided `dispatch` and by changing the props of the `json-forms` component. +### Testing with Jest / Vitest + +When testing custom renderers with Jest or Vitest using CJS transforms, `vue` must be imported **before** `@jsonforms/vue` in your renderer files. +This is due to the CJS bundle eagerly evaluating Vue component definitions at `require()` time, which can cause issues when Jest's module resolution processes imports sequentially. + +```ts +// Correct - import vue before @jsonforms/vue +import { defineComponent } from 'vue'; +import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'; +``` + +```ts +// May cause errors in tests: +// "Property 'controlWrapper' was accessed during render but is not defined on instance" +import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'; +import { defineComponent } from 'vue'; +``` + +This only affects test environments using CJS module transforms. +Browser builds using Webpack, Vite, or other ESM-aware bundlers are not affected. + ## License The JSON Forms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information. diff --git a/packages/vue/package.json b/packages/vue/package.json index e3b1d62e8b..636a0ac7a6 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -34,6 +34,13 @@ "main": "lib/jsonforms-vue.cjs.js", "module": "lib/jsonforms-vue.esm.js", "types": "lib/index.d.ts", + "exports": { + ".": { + "import": "./lib/jsonforms-vue.esm.js", + "require": "./lib/jsonforms-vue.cjs.js", + "types": "./lib/index.d.ts" + } + }, "files": [ "lib/*", "src/*" From fe0d5310a671f11fb95eb6ffc213e5fdecdf90bb Mon Sep 17 00:00:00 2001 From: Lucas Koehler Date: Thu, 16 Apr 2026 17:33:43 +0200 Subject: [PATCH 2/3] remove explicit "exports" from vue package.json again --- packages/vue/package.json | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/vue/package.json b/packages/vue/package.json index 636a0ac7a6..e3b1d62e8b 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -34,13 +34,6 @@ "main": "lib/jsonforms-vue.cjs.js", "module": "lib/jsonforms-vue.esm.js", "types": "lib/index.d.ts", - "exports": { - ".": { - "import": "./lib/jsonforms-vue.esm.js", - "require": "./lib/jsonforms-vue.cjs.js", - "types": "./lib/index.d.ts" - } - }, "files": [ "lib/*", "src/*" From b072bf9caf9b364fbcf46a1a4f16df7d1f355cb4 Mon Sep 17 00:00:00 2001 From: Lucas Koehler Date: Mon, 4 May 2026 13:27:08 +0200 Subject: [PATCH 3/3] review: adapt wording and add note to renderer packages --- packages/vue-vanilla/README.md | 4 ++++ packages/vue-vuetify/README.md | 4 ++++ packages/vue/README.md | 12 ++++++------ 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/vue-vanilla/README.md b/packages/vue-vanilla/README.md index ef704d3b24..6477e9f825 100644 --- a/packages/vue-vanilla/README.md +++ b/packages/vue-vanilla/README.md @@ -194,6 +194,10 @@ Attributes not specified here fall back to either the `defaultStyles` or provide } ``` +### Testing in CJS-transformed environments + +When writing tests for custom renderers in a Jest/Vitest CJS-transformed environment, `vue` should be imported first in your custom renderers. See [Testing with Jest / Vitest](../vue/README.md#testing-with-jest--vitest) in the `@jsonforms/vue` README. + ## License The JSONForms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information. diff --git a/packages/vue-vuetify/README.md b/packages/vue-vuetify/README.md index 5e8e171ee4..e782a711d7 100644 --- a/packages/vue-vuetify/README.md +++ b/packages/vue-vuetify/README.md @@ -174,6 +174,10 @@ provide( ); ``` +## Testing in CJS-transformed environments + +When writing tests for custom renderers in a Jest/Vitest CJS-transformed environment, `vue` should be imported first in your custom renderers. See [Testing with Jest / Vitest](../vue/README.md#testing-with-jest--vitest) in the `@jsonforms/vue` README. + ## License The JSONForms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information. diff --git a/packages/vue/README.md b/packages/vue/README.md index 1f9dba0737..3d97db6593 100644 --- a/packages/vue/README.md +++ b/packages/vue/README.md @@ -291,8 +291,7 @@ Instead it should be modified via the provided `dispatch` and by changing the pr ### Testing with Jest / Vitest -When testing custom renderers with Jest or Vitest using CJS transforms, `vue` must be imported **before** `@jsonforms/vue` in your renderer files. -This is due to the CJS bundle eagerly evaluating Vue component definitions at `require()` time, which can cause issues when Jest's module resolution processes imports sequentially. +When testing custom renderers in a CJS-transformed test environment (Jest, or Vitest configured with CJS transforms), `vue` must be imported **before** `@jsonforms/vue` in your renderer files: ```ts // Correct - import vue before @jsonforms/vue @@ -301,14 +300,15 @@ import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'; ``` ```ts -// May cause errors in tests: -// "Property 'controlWrapper' was accessed during render but is not defined on instance" +// May produce errors such as: +// "Property '' was accessed during render but is not defined on instance" import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'; import { defineComponent } from 'vue'; ``` -This only affects test environments using CJS module transforms. -Browser builds using Webpack, Vite, or other ESM-aware bundlers are not affected. +The reason is that several components shipped by `@jsonforms/vue` (e.g. `JsonForms`, `DispatchRenderer`) call `defineComponent` at module load. When the package is consumed via `require()` and the test runner's CJS transform doesn't hoist imports, `vue` must already be evaluated at that point. Thus, importing `vue` first in renderer and test files is the safest default. + +Browser/dev builds using Webpack, Vite, or other ESM-aware bundlers are not affected. ## License