Skip to main content
Answered

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

  • October 29, 2024
  • 5 replies
  • 389 views
A
Forum|alt.badge.img+1

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. [plugin 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 🙏

 

Best answer by Horea Porutiu

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! 

View original
Was it helpful?

5 replies

Horea Porutiu
Mironeer
Forum|alt.badge.img+1

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? 

 

Eca
1 person likes this
  • Eca
    Eca
A
Forum|alt.badge.img+1
  • Amir Ben Ari
  • Author
  • Beginner
  • 2 replies
  • October 29, 2024

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"
  	}
}

 

Eca
1 person likes this
  • Eca
    Eca
Horea Porutiu
Mironeer
Forum|alt.badge.img+1
  • Horea Porutiu
  • Mironeer
  • 172 replies
  • Answer
  • October 29, 2024

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! 

Eca
A
2 people like this
  • Eca
    Eca
  • A
    Amir Ben Ari
A
Forum|alt.badge.img+1
  • Amir Ben Ari
  • Author
  • Beginner
  • 2 replies
  • October 30, 2024

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_COLOR[eventModel],
				color: SHAPE_TEXT_COLOR[eventModel],
				fontSize: DROPPED_SHAPE_DEFAULT_FONTSIZE,
			},
			shape: SHAPE_TYPES[eventModel],
			x,
			y,
			content: modelName,
			width: DROPPED_SHAPE_WIDTH,
			height: DROPPED_SHAPE_HEIGHT,
		});

 

Eca
1 person likes this
  • Eca
    Eca
Horea Porutiu
Mironeer
Forum|alt.badge.img+1

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. 

Eca
ElvaMiro
2 people like this
  • Eca
    Eca
  • ElvaMiro
    ElvaMiro

Reply


Behind the Canvas: Powering Innovation in Miro

Terms & Conditions