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

[unmeshdusane20]

Scale Version ^3.0.0-beta.131

Framework and version I am using Vue3 with Vitepress (for documentation)

Current Behavior on running VitePress npm run docs:dev working fine, but on creating build using npm run docs:build its giving error 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;

Expected Behavior In latest version of node its should expect type = module

Code Reproduction A minimal reproduction case of the bug, you may fork one of the available sandboxes as a base:

Scale and Plain HTML Scale and React18 Scale and React18 with Wrapper Package Scale and Angular13 Scale and Vue3

Desktop (please complete the following information):

• OS: iOS
• Node: 18.12.1

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[felix-ico]

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?

[unmeshdusane20]

@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,
}

[felix-ico]

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)

[unmeshdusane20]

@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)

[felix-ico]

@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

[unmeshdusane20]

@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

[felix-ico]

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

[unmeshdusane20]

@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