Merge pull request #4329 from nextcloud/feat/cjs-module-entry-to-vite

package.json

@@ -31,11 +31,11 @@
     "cypress:gui": "TZ=UTC cypress open --component",
     "cypress:update-snapshots": "TZ=UTC cypress run --component --spec cypress/visual/**/*.cy.js --env type=base --config screenshotsFolder=cypress/snapshots/base"
   },
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.cjs"
     },
     "./dist/": "./dist/"
   },
@@ -103,7 +103,7 @@
     "@nextcloud/eslint-config": "^8.3.0-beta.0",
     "@nextcloud/stylelint-config": "^2.3.1",
     "@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#master",
-    "@susnux/nextcloud-vite-config": "^1.0.0-beta.13",
+    "@susnux/nextcloud-vite-config": "^1.0.0-beta.15",
     "@vue/test-utils": "^1.3.0",
     "@vue/tsconfig": "^0.4.0",
     "@vue/vue2-jest": "^29.0.0",

styleguide.config.js

@@ -15,7 +15,7 @@ module.exports = async () => {
 		module: {
 			// Ignore eslint
 			rules: base.module.rules.filter(
-				rule => rule.use !== 'eslint-loader'
+				rule => rule.use !== 'eslint-loader',
 			),
 		},
 	})
@@ -43,6 +43,11 @@ module.exports = async () => {
 					},
 				},
 			},
+			resolve: {
+				alias: {
+					vue: 'vue/dist/vue.js',
+				},
+			},
 		}),
 
 		exampleMode: 'collapse',

vite.config.mts

@@ -66,8 +66,8 @@ export default defineConfig((env) => {
 		},
 		// For backwards compatibility we include the css within the js files
 		inlineCSS: true,
-		// Disable polyfills
-		coreJS: false,
+		// Build CommonJS files for backwards compatibility
+		libraryFormats: ['es', 'cjs'],
 		replace: {
 			PRODUCTION: JSON.stringify(env.mode === 'production'),
 			SCOPE_VERSION,

webpack.config.js

@@ -23,7 +23,6 @@ console.info('This build version hash is', versionHash, '\n')
 
 webpackConfig.entry = {
 	install: path.join(__dirname, 'src', 'install.js'),
-	index: path.join(__dirname, 'src', 'index.js'),
 
 	...globSync('src/components/*/index.js').reduce((acc, item) => {
 		const name = item