Merge pull request #688 from nextcloud-libraries/feat/require-vue-loader

feat!: require explicit `vue-loader@legacy` for Vue 2, remove hidden install

Author: ShGKme

README.md

@@ -34,23 +34,10 @@ module.exports = webpackConfig
 
 ## Note on Vue 2 support
 
-This package supports both **Vue 2** and **Vue 3** by installing legacy `vue-loader` for Vue 2 in a `postinstall` script.
-
-In Vue 2 it may result in different `vue-loader` version in the `package-lock.json` and `node_modules`.
-
-### Troubleshooting in Vue 2 apps
-
-In case of `npm error code ENOTEMPTY` - remove `node_modules` and try again:
-
-```sh
-# In case of "npm error code ENOTEMPTY" in Vue 2
-rm -rf node_modules
-```
-
-To avoid any errors and have explicitly specified `vue-loader` - install it as dependency:
+This package supports both **Vue 2** and **Vue 3**.
+While **Vue 3** is supported by default, **Vue 2** requires an explicit legacy `vue-loader` installation:
 
 ```sh
-# Install legacy vue-loader for Vue 2
 npm i -D vue-loader@legacy
 ```
 

REUSE.toml

@@ -12,7 +12,7 @@ SPDX-FileCopyrightText = "2019 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
 
 [[annotations]]
-path = ["test-apps/vue2/package-lock.json", "test-apps/vue2/package.json", "test-apps/vue3/package-lock.json", "test-apps/vue3/package.json"]
+path = ["test-apps/vue2/package-lock.json", "test-apps/vue2/package.json", "test-apps/vue2--wrong-vue-loader/package-lock.json", "test-apps/vue2--wrong-vue-loader/package.json", "test-apps/vue3/package-lock.json", "test-apps/vue3/package.json"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2025 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"

scripts/postinstall.js

@@ -1,10 +1,9 @@
-/**
+/*!
  * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-const { execSync } = require('node:child_process')
-const { loadModule, getVueVersion } = require('../utils.js')
+const { getPackageVersion, getVueVersion } = require('../utils.js')
 const packageJson = require('../package.json')
 
 const isCompatible = (installed, expected) => expected.match(/\d+/)[0] === installed.match(/\d+/)[0]
@@ -13,24 +12,45 @@ const [vueLoaderForVue2, vueLoaderForVue3] = packageJson.peerDependencies['vue-l
 
 try {
 	const vueVersion = getVueVersion()
-	console.info(`[@nextcloud/webpack-vue-config | postinstall] Found Vue@${vueVersion}`)
-
-	const vueLoaderVersion = vueVersion === 2 ? vueLoaderForVue2 : vueLoaderForVue3
-
-	const installedVueLoader = loadModule('vue-loader/package.json').version
-	if (installedVueLoader && isCompatible(installedVueLoader, vueLoaderVersion)) {
-		console.info(`[@nextcloud/webpack-vue-config | postinstall] Found compatible vue-loader@${installedVueLoader}`)
+	const requiredVueLoaderVersion = vueVersion === 2 ? vueLoaderForVue2 : vueLoaderForVue3
+	console.info(`[@nextcloud/webpack-vue-config] Found Vue@${vueVersion}, requires vue-loader@${requiredVueLoaderVersion}`)
+
+	const vueLoaderVersion = getPackageVersion('vue-loader')
+	if (!vueLoaderVersion) {
+		// Likely an installation not in an npm environment (like nixpkgs)
+		// Skip the check. In case of incompatibility, the compilation will fail later anyway
+		console.warn(`[@nextcloud/webpack-vue-config] vue-loader is not installed. This is unexpected, skipping compatibility check.`)
 		process.exit(0)
-	} else if (installedVueLoader) {
-		console.info(`[@nextcloud/webpack-vue-config | postinstall] Found incompatible vue-loader@${installedVueLoader}. Expected ${vueLoaderVersion}`)
 	}
-	
-	console.info(`[@nextcloud/webpack-vue-config | postinstall] Installing vue-loader@${vueLoaderVersion}`)
+	console.info(`[@nextcloud/webpack-vue-config] Found vue-loader@${vueLoaderVersion}`)
 
-	execSync(`npm install --no-save vue-loader@${vueLoaderVersion}`, { stdio: 'inherit', cwd: process.env.INIT_CWD })
+	if (isCompatible(vueLoaderVersion, requiredVueLoaderVersion)) {
+		console.info(`[@nextcloud/webpack-vue-config] Installed vue-loader@${vueLoaderVersion} is compatible with Vue@${vueVersion}`)
+		process.exit(0)
+	}
 
-	console.info(`[@nextcloud/webpack-vue-config | postinstall] vue-loader${vueLoaderVersion} installed`)
-} catch (error) {
-	console.error(error.message)
+	console.error([
+		'',
+		'🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻🔻',
+		'',
+		'  @nextcloud/webpack-vue-config',
+		'',
+		`  You have "vue-loader@${vueLoaderVersion}" installed incompatible with "Vue ${vueVersion}".`,
+		`  You must have "vue-loader@${requiredVueLoaderVersion}" installed.`,
+		'',
+		'  You can install it via:',
+		'',
+		`  npm install --save-dev vue-loader${vueVersion === 2 ? '@legacy' : ''}`,
+		'',
+		'🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺🔺',
+		'',
+	].join('\n'))
 	process.exit(1)
+} catch (e) {
+	// The purpose of the script is to warn in a simple way about an incompatible vue-loader version
+	// If something goes wrong, just skip the check
+	// (for example, nixpkgs or other unusual setups might run postinstall when dependencies are not installed as expected by npm)
+	// In case of incompatibility, an error will be raised when using the package anyway, just less directly - with compilation errors
+	console.warn('[@nextcloud/webpack-vue-config] Error during postinstall check:', e)
+	process.exit(0)
 }

test-apps/vue2--wrong-vue-loader/babel.config.js

@@ -0,0 +1,7 @@
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+const babelConfig = require('@nextcloud/babel-config')
+
+module.exports = babelConfig