Package is written in ESM, but is interpreted as CJS - publint issues

[ondrejsevcik]

The package @microsoft/clarity has a publint issues.

Specifically

• The package does not specify the "type" field. NodeJS may attempt to detect the package type causing a small performance hit. Consider adding "type": "commonjs". (More info)
• /index.js is written in ESM, but is interpreted as CJS. Consider using the .mjs extension, e.g. /index.mjs (More info)
• /src/utils.js is written in ESM, but is interpreted as CJS. Consider using the .mjs extension, e.g. /src/utils.mjs (More info)

It's causing issues in one of my projects in Vite.

[pgcan]

I get the below error after I added Clarity to my vite+reactjs app. Is it related to the issue reported above? Couldn't find a fix for this so far.

Edit: I only get this error with .ts files but not .tsx files. So something that vite does but ts not

failed to load config from ...\vite.config.ts error during build: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '...\node_modules@microsoft\clarity\src\utils' imported from ...\node_modules@microsoft\clarity\index.js     at finalizeResolution (node:internal/modules/esm/resolve:275:11)     at moduleResolve (node:internal/modules/esm/resolve:932:10)     at defaultResolve (node:internal/modules/esm/resolve:1056:11)     at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)     at #cachedDefaultResolve (node:internal/modules/esm/loader:603:25)     at ModuleLoader.resolve (node:internal/modules/esm/loader:586:38)     at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:38)     at ModuleJob._link (node:internal/modules/esm/module_job:135:49)

[pan-jy]

我在 vite+reactjs 应用中添加 Clarity 后出现以下错误。这与上面报告的问题有关吗？目前还没有找到解决方案。

修正：我只在 .ts 文件上遇到此错误，在 .tsx 文件上不会。所以 vite 会遇到，但 .ts 不会。

无法从 ...\vite.config.ts 加载配置 ，构建期间出现错误： 错误 [ERR_MODULE_NOT_FOUND]：找不到从 ...\node_modules@microsoft\clarity\index.js 导入的模块“...\node_modules@microsoft\clarity\src\utils”     在 finalizeResolution（node：internal/modules/esm/resolve：275：11）处     在 moduleResolve（node：internal/modules/esm/resolve：932：10）     处 在 defaultResolve（node：internal/modules/esm/resolve：1056：11）     处 在 ModuleLoader.defaultResolve（node：internal/modules/esm/loader：654：12）     处 在 #cachedDefaultResolve（node：internal/modules/esm/loader：603：25）处     在 ModuleLoader.resolve （节点：内部/模块/esm/loader：586：38）     位于 ModuleLoader.getModuleJobForImport （节点：内部/模块/esm/loader：242：38）     位于 ModuleJob._link （节点：内部/模块/esm/module_job：135：49）

I've also encountered this problem. Have you solved it?

[b00y0h]

encountering the same issue on a nextjs/react app

[KenSCompareCredit]

Encountered this issue in a Next.js app just now (next package is v15.4.1, @microsoft/clarity package is v1.0.0).

Added @microsoft/clarity to the dependencies in the project's package.json, and imported and used it like:

import Clarity from '@microsoft/clarity'

Clarity.init(projectId)

export const clarityTest = (): void => {
  Clarity.setTag('foo', 'bar')
}

This resulted in a runtime error on pages where the clarityTest function was used:

Error: Cannot find module 'path\to\project\node_modules\@microsoft\clarity\src\utils' imported from path\to\project\node_modules\@microsoft\clarity\index.js
  at finalizeResolution (node:internal/modules/esm/resolve:257:11)
  at moduleResolve (node:internal/modules/esm/resolve:913:10)
  at defaultResolve (node:internal/modules/esm/resolve:1037:11)
  at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
  at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
  at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:349:53)
  at new ModuleJobSync (node:internal/modules/esm/module_job:338:34)
  at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:322:11)
  at loadESMFromCJS (node:internal/modules/cjs/loader:1381:24)
  at Module._compile (node:internal/modules/cjs/loader:1503:5)
  at Object..js (node:internal/modules/cjs/loader:1689:10)
  at Module.load (node:internal/modules/cjs/loader:1318:32)
  at Function._load (node:internal/modules/cjs/loader:1128:12)
  at TracingChannel.traceSync (node:diagnostics_channel:315:14)
  at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)

I was able to work around the problem by adding @microsoft/clarity to the transpilePackages array in the Next.js config, e.g.

// In next.config.js
module.exports = {
  transpilePackages: ['@microsoft/clarity'],
}

No more Cannot find module errors from Clarity after that. Would still be great to fix the underlying issue though

[jacobgad]

Having the same problem, using the .tsx extension doesn't solve the problem. Has anyone got a workaround for a vite project?