scania-digital-design-system/sdds

SDDS not working with Vue3/Vite

Closed this issue · 1 comments

magnuslundin commented

Describe the bug
When using Vite (https://vitejs.dev) as bundler for a Vue3 project will SDDS generate errors which stops rendering of the page.

ReferenceError: require is not defined
at @scania_components.js:1726
at async initializeComponent (@scania_components.js:1421) undefined
consoleError @ index-5cfef938.js:1713
index-5cfef938.js:1366 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined
at initializeComponent (@scania_components.js:1424)

The same code works fine in a Vue3 project using Vue CLI.

To Reproduce

  1. Generate a shell project in Vue3 using Vite (Instructions at https://vitejs.dev)
  2. Follow basic instructions for adding SDDS.
  3. Add a component and some HTML.
  4. Run and check the console

Demo project can be found here: https://gitlab.scania.com/sssmzb/sdds-vue3-vite (internal)

Expected behavior
SDDS in combination with Vue3 should be possible to bundle with Vite.

Screenshots
If applicable, add screenshots to help explain your problem.

Version of SDDS
"@scania/components": "^1.4.2",
"@scania/theme-light": "^2.1.0",

Framework and version
"vue": "^3.0.5"
"vite": "^2.1.5"

Repo link
https://gitlab.scania.com/sssmzb/sdds-vue3-vite

Desktop information:
Chrome 89

AB#744

mJarsater commented

Will be solved with the release of @scania/tegel.