Mitosis Runbook

Build errors

build resulted in the below warning/log:

Could not replace Identifier with nothing.

<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' className='w-6 h-6' {...props}>

✅ Happens due to props spread. Change it to spreading from specific prop key

build resulted in the below error:

Could not parse file: src/shared/icons/LinkIcon.lite.tsx /Users/aswin/Code/ui/node_modules/gluegun/build/index.js:15 throw up; ^ Error: Could not parse JSX

✅ Happens due to absence of default export. Use export default syntax.

build resulted in the below error:

Could not JSON5 parse object: function copyToClipboard(text: string) { navigator.clipboard.writeText(text); } Could not parse file: src/shared/ClipboardButton/index.lite.tsx /Users/aswin/Code/ui/node_modules/gluegun/build/index.js:15 throw up; ^

SyntaxError: JSON5: invalid character 'u' at 1:2

✅ Happens because the copyToClipboard is defined outside the component. Fix: Move it inside useStore

build resulted in the BABEL_TRANSFORM_ERROR error:

TypeError: unknown: Cannot read properties of undefined (reading 'name') at jsxElementToJson (/Users/aswin/Code/ui/node_modules/@builder.io/mitosis/dist/src/parsers/jsx/element-parser.js:142:65) at jsxElementToJson (/Users/aswin/Code/ui/node_modules/@builder.io/mitosis/dist/src/parsers/jsx/element-parser.js:187:61) at Array.map () at jsxElementToJson (/Users/aswin/Code/ui/node_modules/@builder.io/mitosis/dist/src/parsers/jsx/element-parser.js:251:33) at Array.map () at jsxElementToJson (/Users/aswin/Code/ui/node_modules/@builder.io/mitosis/dist/src/parsers/jsx/element-parser.js:251:33) at Array.map () at jsxElementToJson (/Users/aswin/Code/ui/node_modules/@builder.io/mitosis/dist/src/parsers/jsx/element-parser.js:251:33) at Array.map () at jsxElementToJson (/Users/aswin/Code/ui/node_modules/@builder.io/mitosis/dist/src/parsers/jsx/element-parser.js:158:37) at Array.map () at jsxElementToJson (/Users/aswin/Code/ui/node_modules/@builder.io/mitosis/dist/src/parsers/jsx/element-parser.js:158:37) at Array.map () ..... code: 'BABEL_TRANSFORM_ERROR'

✅ Happens because the syntax quirk, Change syntax from

{(theArrayItem, index) => { return

{theArrayItem}

; }}

to

{(theArrayItem, index) =>

{theArrayItem}

}

If the element is a table and cant fit in a single line use the below syntax

{(item,index) => ( {item.name} {item.id} )}

✅ Can also happen if some computation is done within jsx based on props

Framework specific

Vue2

[vite:vue2] [@vue/compiler-sfc] Unexpected token, expected "," (27:8)

/home/runner/work/ui/ui/vue2/src/shared/Paginate/index.vue 50 | offset.value = _offsetFromBrowserQS; 51 | typeof props.reFetch === 'function' && props.reFetch({ 52 | offset.value: _offsetFromBrowserQS, | ^ 53 | limit: props.itemsPerPage ?? ITEMS_PER_PAGE_DEFAULT 54 | });

✅ Look for variable names that are same as a state key.

Vue3

Error: src/shared/icons/LinkIcon.vue(2,4): error TS2345: Argument of type '{ style?: unknown; class?: unknown; key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ref_for?: boolean | undefined; ref_key?: string | undefined; onVnodeBeforeMount?: VNodeMountHook | VNodeMountHook[] | undefined; ... 9 more ...; stroke: string; }' is not assignable to parameter of type 'SVGAttributes & ReservedProps & Record<string, unknown>'.

Above error occurs with below generated code for vue. The original mitosis source code has (props: SVGProps) and {...props} which then causes the vue generator to drop the type completely.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" v-bind="$props"

✅ : In mitosis source, map the props to a member key, and then spread e.g., props: { svgElmtProps: SVGProps }

Build resulted in the below error for Svelte

✅ Happens because if you have an inline function in the jsx of a .lite.tsx file it should be wrapped in a single line instead of multiple lines Eg:

        onClick={() => {
          state.isSecretShown = !state.isSecretShown;
        }}

The above handler in the jsx of a .lite.tsx file would cause a parser error. Instead it should be something like the one shown below

        onClick={() => state.isSecretShown = !state.isSecretShown;}

Svelte/Vue

Slot usage should be avoided until https://github.com/BuilderIO/mitosis/pull/1106 is pulled in.

Callbacks in JSX

Be wary of naming callback props starting with on . Mitosis will parse it incorrectly into event based function.