Hey @Amir Ben Ari
Could you please provide the steps you took to create this code? Did you use npx create-miro-app or any of our app examples? Or did you use any other Miro packages to start you code development?
We created a miro app using npx create-miro-app and selecting React WEB_SDK] with typescript option. We’ve then updated the React and TypeScript libs/dependencies.
Our package.json:
{
"name": "REDACTED",
"version": "0.1.0",
"license": "MIT",
"engines": {
"node": ">=22.9"
},
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "vitest --run",
"test:watch": "vitest",
"lint": "eslint ./src/**/*",
"prepare": "husky",
"format": "prettier --write ./src/**/*.{ts,tsx}"
},
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^6.1.3",
"@mui/material": "^6.1.2",
"mirotone": "5",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"lint-staged": {
"src/**/*.{ts,tsx}": "
"npm run format",
"npm run lint"
]
},
"devDependencies": {
"@eslint/js": "^9.12.0",
"@mirohq/websdk-types": "latest",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.1",
"@types/node": "^18.19.54",
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.2",
"eslint": "^9.12.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-check-file": "^2.8.0",
"eslint-plugin-react": "^7.37.1",
"globals": "^15.11.0",
"husky": "^9.1.6",
"jsdom": "^25.0.1",
"lint-staged": "^15.2.10",
"prettier": "^3.3.3",
"typescript": "4.9.5",
"typescript-eslint": "^8.8.1",
"vite": "^5.4.8",
"vitest": "^2.1.2"
},
"optionalDependencies": {
"@rollup/rollup-linux-x64-gnu": "4.6.1"
}
}
Hi @Amir Ben Ari
I believe the issue is that you are trying to use value, but @mirohq/websdk-types
currently exposes only types and not runtime values.
Fix is simple: do not use the enum (again, because it is a type of enum and not the enum itself, I mean value)
So instead of ShapeType.Square
it should just be "square"
.
Hope this helps. Let me know if this fixes your issue!
Thank you, good to know that’s the source of the problem.
We’ve done something similars, created our own type with strings as values.
import { EventModelType, ShapeType } from "@Models";
export const SHAPE_TYPES: Record<EventModelType, ShapeType> = {
Event: "rectangle",
Command: "round_rectangle",
ReadModel: "parallelogram",
Processor: "rectangle",
GivenWhenThen: "rectangle",
} as const;
await miro.board.createShape({
style: {
fillColor: SHAPE_FILL_COLOROeventModel],
color: SHAPE_TEXT_COLOROeventModel],
fontSize: DROPPED_SHAPE_DEFAULT_FONTSIZE,
},
shape: SHAPE_TYPESYeventModel],
x,
y,
content: modelName,
width: DROPPED_SHAPE_WIDTH,
height: DROPPED_SHAPE_HEIGHT,
});
No problem @Amir Ben Ari! We will try to make this a bit more clear in the documentation.
Please let me know if you have any more questions. Hope this solved your issue.