The requested module '@telekom/scale-components/loader/index.js' is a CommonJS module, which may not support all module.exports as named exports about scale HOT 8 CLOSED

@unmeshdusane20 i added a vitepress config as suggested here vuejs/vitepress#2411 and could then run the docs:build successfully. Have you tried that already?

from scale.

hi @unmeshdusane20 i tried reproducing the issue using our examples/vue-3-boilerplate and adding vitepress and it worked fine, but I am running node 16. When using node 18 a bunch of errors pop up, but they seem to point to vue-cli rather than anything scale specific.

Could you try running your app using node 16 and see if that works?

from scale.

@felix-ico I tried with multiple version of node , please try to add custom theme file in .vitepress -> theme -> index.ts file
and register scale component globally in theme after that we can get this error during VitePress build yarn docs:build

import DefaultTheme from 'vitepress/theme';
import { applyPolyfills, defineCustomElements } from '@telekom/scale-components/loader';
import "@telekom/scale-components/dist/scale-components/scale-components.css";

applyPolyfills().then(() => {
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  defineCustomElements(window);
});

export default {
  ...DefaultTheme,
}

from scale.

I copy pasted your code to the specified location and got no errors on docs:build, could you provide a minimal reproducible example? (btw the latest scale version is beta.142)

from scale.

@felix-ico this is my package.json file, I tried with node version 16.15.0 and 18.12.1

{
"name": "vite-project",
"private": false,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
},
"dependencies": {
"@telekom/scale-components": "^3.0.0-beta.142",
"vue": "^3.3.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"typescript": "^5.0.2",
"vite": "^4.4.5",
"vitepress": "^1.0.0-rc.24",
"vue-tsc": "^1.8.5"
}
}

and tsconfig.json as follows

`{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true

},
"include": ["src//*.ts", "src//.d.ts", "src/**/.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}`

getting this error

vitepress build docs

vitepress v1.0.0-rc.24

✓ building client + server bundles...
build error:
file:///Users/projects/front-end/librarytest/vite-project/docs/.vitepress/.temp/app.js:5
import { applyPolyfills, defineCustomElements } from "@telekom/scale-components/loader/index.js";
^^^^^^^^^^^^^^
SyntaxError: Named export 'applyPolyfills' not found. The requested module '@telekom/scale-components/loader/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@telekom/scale-components/loader/index.js';
const { applyPolyfills, defineCustomElements } = pkg;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
at async build (file:///Users/A112670628/projects/DIH/front-end/librarytest/vite-project/node_modules/vitepress/dist/node/serve-FiwKdDMo.js:52994:24)

from scale.

@unmeshdusane20 I am still unable to reproduce, please have a look at this sample repo https://github.com/felix-ico/scale-vitepress, I tried to match your configuration but am still unable to get the error you reported

from scale.

@felix-ico please see the below repo for your reference and execute npm run docs:build . I tried with Node with 16.20.0 version. In this repo I have created theme to override vitepress default theme under docs -> .vitepress -> theme -> index.ts and added scale component.

https://github.com/unmeshdusane20/vite-test/tree/main/vite-project

from scale.

@unmeshdusane20 i added a vitepress config as suggested here vuejs/vitepress#2411 and could then run the docs:build successfully. Have you tried that already?

@felix-ico Yeah , finally its runs successfully, thanks for your help

from scale.