Skip to main content

Hey everyone!

I have the following code for a Miro Plugin, built/running on vite:

 

import { EventModelType } from "@Models";

import { ShapeType } from "@mirohq/websdk-types";

 

export const SHAPE_TYPES: Record<EventModelType, ShapeType> = {

Event: ShapeType.Rectangle,

Command: ShapeType.RoundRectangle,

ReadModel: ShapeType.Parallelogram,

Processor: ShapeType.Rectangle,

GivenWhenThen: ShapeType.Rectangle

} as const

 

Problem is, no matter where in my code I try to import @mirohq/websdk-types, I’m getting an error when doing npm start:

/ERROR] Failed to resolve entry for package "@mirohq/websdk-types". The package may have incorrect main/module/exports specified in its package.json. jplugin vite:dep-scan]

  The plugin "vite:dep-scan" was triggered by this import

    src/Constants/ShapeTypes/ShapeTypes.ts:2:26:
      2 │ import { ShapeType } from "@mirohq/websdk-types";
        ╵

 

Googling for it, I found this issue on GitHub. But nothing suggested there resolved the issue.

Any help would be appreciated 🙏

 

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. 


Reply