Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 2 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

Expand Down
2 changes: 1 addition & 1 deletion REUSE.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
56 changes: 38 additions & 18 deletions scripts/postinstall.js
Original file line number Diff line number Diff line change
@@ -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]
Expand All @@ -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)
}
7 changes: 7 additions & 0 deletions test-apps/vue2--wrong-vue-loader/babel.config.js
Original file line number Diff line number Diff line change
@@ -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
Loading