Fix module entry point by migrating to vite for ESM building

.eslintrc.js

@@ -14,4 +14,11 @@ module.exports = {
 	plugins: [
 		'cypress',
 	],
+	parserOptions: {
+		babelOptions: {
+			plugins: [
+				'@babel/plugin-syntax-import-assertions',
+			],
+		},
+	},
 }

resources/translations.js → build/translations.js

@@ -19,15 +19,19 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-const { join, basename } = require('path')
-const fs = require('fs/promises')
-const gettextParser = require('gettext-parser')
 
 // https://github.com/alexanderwallin/node-gettext#usage
 // https://github.com/alexanderwallin/node-gettext#load-and-add-translations-from-mo-or-po-files
 const parseFile = async (fileName) => {
+	// We need to import dependencies dynamically to support this module to be imported by vite and to be required by Cypress
+	// If we use require, vite will fail with 'Dynamic require of "path" is not supported'
+	// If we convert it to an ES module, webpack and vite are fine but Cypress will fail because it can not handle ES imports in Typescript configs in commonjs packages
+	const { basename } = await import('path')
+	const { readFile } = await import('fs/promises')
+	const gettextParser = await import('gettext-parser')
+
 	const locale = basename(fileName).slice(0, -'.pot'.length)
-	const po = await fs.readFile(fileName)
+	const po = await readFile(fileName)
 
 	const json = gettextParser.po.parse(po)
 
@@ -56,7 +60,9 @@ const parseFile = async (fileName) => {
 }
 
 const loadTranslations = async (baseDir) => {
-	const files = await fs.readdir(baseDir)
+	const { join } = await import('path')
+	const { readdir } = await import('fs/promises')
+	const files = await readdir(baseDir)
 
 	const promises = files
 		.filter(name => name !== 'messages.pot' && name.endsWith('.pot'))

build/usernameToColor-export.js

@@ -1,7 +1,7 @@
 const snapshot = require('./../src/functions/usernameToColor/__snapshots__/usernameToColor.spec.js.snap')
 const result = {}
 Object.keys(snapshot).map((key) => {
-		const uid = key.replace('usernameToColor ', '').replace(' has the proper color 1', '')
-		result[uid] = JSON.parse(snapshot[key])
+	const uid = key.replace('usernameToColor ', '').replace(' has the proper color 1', '')
+	result[uid] = JSON.parse(snapshot[key])
 })
 console.log(JSON.stringify(result))

cypress.config.ts

@@ -1,14 +1,15 @@
 import { defineConfig } from 'cypress'
-import { DefinePlugin } from 'webpack'
-import getCompareSnapshotsPlugin  from 'cypress-visual-regression/dist/plugin'
+import webpack from 'webpack'
+import getCompareSnapshotsPlugin from 'cypress-visual-regression/dist/plugin.js'
 import path from 'path'
 import webpackConfig from '@nextcloud/webpack-vue-config'
-import webpackRules from '@nextcloud/webpack-vue-config/rules'
+import webpackRules from '@nextcloud/webpack-vue-config/rules.js'
 
-import { loadTranslations } from './resources/translations'
+import { loadTranslations } from './build/translations.js'
 
-const SCOPE_VERSION = Date.now()
-webpackRules.RULE_SCSS.use.push({
+const SCOPE_VERSION = Date.now();
+
+(webpackRules.RULE_SCSS.use as webpack.RuleSetUse[]).push({
 	loader: 'sass-loader',
 	options: {
 		additionalData: `@use 'sass:math'; $scope_version:${SCOPE_VERSION}; @import 'variables'; @import 'material-icons';`,
@@ -72,7 +73,7 @@ export default defineConfig({
 			bundler: 'webpack',
 			webpackConfig: async () => {
 				const translations = await loadTranslations(path.resolve(__dirname, './l10n'))
-				webpackConfig.plugins.push(new DefinePlugin({
+				webpackConfig.plugins.push(new webpack.DefinePlugin({
 					PRODUCTION: false,
 					SCOPE_VERSION,
 					TRANSLATIONS: JSON.stringify(translations),

cypress/visual/NcAppSidebar/NcAppSidebar-compact.cy.js

@@ -19,6 +19,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import BuildAppSidebarTest from './NcAppSidebarMixin'
+import BuildAppSidebarTest from './NcAppSidebarMixin.js'
 
 BuildAppSidebarTest(true)

cypress/visual/NcAppSidebar/NcAppSidebar.cy.js

@@ -19,6 +19,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import BuildAppSidebarTest from './NcAppSidebarMixin'
+import BuildAppSidebarTest from './NcAppSidebarMixin.js'
 
 BuildAppSidebarTest(false)