{"id":14456,"library":"babel-helper-vue-jsx-merge-props","title":"Vue JSX Prop Merging Helper","description":"babel-helper-vue-jsx-merge-props is an internal Babel helper package designed to facilitate the merging of props when using JSX syntax within Vue.js applications. Specifically, it handles the transformation of JSX spread attributes into the Vue Virtual DOM's `data` object, ensuring correct aggregation of properties, attributes, and event handlers. This package is a dependency of `@vue/babel-preset-jsx` and `@vue/babel-plugin-transform-vue-jsx` (for Vue 2.x) and is not intended for direct consumption by application developers. The current stable version, as specified, is 2.0.3. Its release cadence is tightly coupled with updates to Vue's JSX transformation tools, primarily for Vue 2.x projects. For Vue 3, `@vue/babel-plugin-jsx` handles JSX transformations and prop merging internally, superseding the need for this helper directly.","status":"maintenance","version":"2.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/babel-helper-vue-jsx-merge-props","tags":["javascript","babel","vue","jsx"],"install":[{"cmd":"npm install babel-helper-vue-jsx-merge-props","lang":"bash","label":"npm"},{"cmd":"yarn add babel-helper-vue-jsx-merge-props","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-helper-vue-jsx-merge-props","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for any Babel helper, handles AST manipulation.","package":"@babel/core","optional":false},{"reason":"This package is an internal helper consumed by the Vue JSX Babel preset for Vue 2.x projects.","package":"@vue/babel-preset-jsx","optional":true},{"reason":"This package is an internal helper consumed by the Vue JSX Babel plugin for Vue 2.x projects.","package":"@vue/babel-plugin-transform-vue-jsx","optional":true}],"imports":[{"note":"This package is an internal Babel helper and does not expose a public API for direct import and usage by application code. Previous versions sometimes caused issues when build tools attempted a default import, as it historically lacked one.","wrong":"import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';","symbol":"_mergeJSXProps","correct":"/* This package is not intended for direct import by end-users. It is internally imported by Babel plugins. */"}],"quickstart":{"code":"/*\nThis package is an internal Babel helper and is not directly used in application code.\nInstead, it is a dependency of Babel plugins/presets that enable Vue JSX.\nBelow is an example of how you would configure Babel to enable Vue 2 JSX support,\nwhich implicitly uses this helper for prop merging.\n*/\n\n// babel.config.js\nmodule.exports = {\n  presets: [\n    // For Vue 2.x projects using JSX\n    ['@vue/babel-preset-jsx', { /* options, e.g., 'compositionAPI': true for Vue 2.7 */ }]\n    // For Vue 3.x, use '@vue/babel-plugin-jsx' instead, which has its own merge logic.\n  ]\n};\n\n// MyComponent.vue (example using JSX with prop spreading)\n<script lang=\"jsx\">\nimport Vue from 'vue';\n\nexport default Vue.extend({\n  props: {\n    baseProps: { type: Object, default: () => ({}) },\n    extraClass: { type: String, default: '' },\n  },\n  render() {\n    const mergedProps = { class: `my-component ${this.extraClass}`, ...this.baseProps };\n    return (\n      <div\n        {...mergedProps}\n        onClick={() => console.log('Component clicked with merged props.')}\n      >\n        Hello from JSX Component!\n      </div>\n    );\n  },\n});\n</script>","lang":"javascript","description":"Illustrates Babel configuration for Vue 2 JSX, showing how this helper enables prop spreading within components, without direct code usage."},"warnings":[{"fix":"Ensure you are using `@vue/babel-preset-jsx` or `@vue/babel-plugin-transform-vue-jsx` (for Vue 2) to handle JSX transformations, which will utilize this helper internally.","message":"This package is an internal Babel helper and is not designed for direct consumption by end-user applications. Attempting to directly import or use its exports in your application code is discouraged and may lead to unexpected behavior or build errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For Vue 3 projects, configure Babel to use `@vue/babel-plugin-jsx`. Remove `@vue/babel-preset-jsx` or `@vue/babel-plugin-transform-vue-jsx` and their dependencies if targeting Vue 3.","message":"This helper is specifically for Vue 2.x JSX transformations. For Vue 3.x applications, you should use `@vue/babel-plugin-jsx` instead, as Vue 3's render function and VNode structure are different, requiring a different JSX transformation approach.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Upgrade your project's Babel dependencies to Babel 7+ to ensure compatibility.","message":"This package requires Babel 7.x or higher to function correctly. Using it with older Babel versions (e.g., Babel 6) will result in incompatibility issues and build failures.","severity":"gotcha","affected_versions":"<7.0.0"},{"fix":"Ensure your Babel setup for Vue JSX is correctly configured, ideally using `@vue/babel-preset-jsx`. If manually configuring plugins, verify that the `_mergeJSXProps` helper is referenced correctly (e.g., via `require` or named import if applicable) by the plugin using it, rather than expecting a default export.","message":"Past versions of this package were reported to lack a default export, leading to build errors when tools attempted `import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props'`. While typically handled by the consuming Babel plugin, this could surface as a build issue in specific toolchain configurations.","severity":"gotcha","affected_versions":"<2.0.0"},{"fix":"If using Vue CLI, remove redundant `@vue/babel-preset-jsx` entries in `babel.config.js`. Use `<script lang=\"tsx\">` in SFCs to ensure proper TypeScript parsing for JSX.","message":"When using JSX with TypeScript in Vue CLI, appending `@vue/babel-preset-jsx` to presets may introduce errors due to duplication, as `@vue/cli-plugin-babel/preset` already includes it.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that your Babel configuration (e.g., `babel.config.js`) for Vue JSX is correctly set up using `@vue/babel-preset-jsx` and that your build tools are resolving modules correctly. This package is an internal helper, and direct `import` statements for `_mergeJSXProps` in user code are not expected.","cause":"This error typically indicates that a Babel transformation or build tool is attempting to import `_mergeJSXProps` as a default export, but the package either doesn't provide one or it's being resolved incorrectly. This was a known issue in older setups.","error":"TypeError: _mergeJSXProps is not a function"},{"fix":"Update your Babel configuration to use `@vue/babel-plugin-jsx` for Vue 3 projects. This package and its direct consumers (`@vue/babel-preset-jsx`, `@vue/babel-plugin-transform-vue-jsx`) are not compatible with Vue 3.","cause":"You are attempting to use the Vue 2.x JSX transformation pipeline (which relies on this helper) in a Vue 3 project.","error":"Error: Plugin 'transform-vue-jsx' cannot be used with Vue 3. Please use '@vue/babel-plugin-jsx' instead."},{"fix":"Ensure the package is installed as a dependency (`npm install babel-helper-vue-jsx-merge-props` or `yarn add babel-helper-vue-jsx-merge-props`). If this occurs during a build and you're using `@vue/babel-preset-jsx`, ensure all related Vue JSX Babel packages are correctly installed.","cause":"The package is either not installed, or there's an issue with module resolution in your build environment. If seen during a Babel transformation, it indicates the plugin consuming it cannot locate the helper.","error":"Cannot find module 'babel-helper-vue-jsx-merge-props' or its corresponding type declarations."}],"ecosystem":"npm"}