Import declarations may only appear at top level of a module

đź’» Development app dev
1

Hello all, I have the following .js in my NextCloud app:

import { registerFileAction, FileAction, Node, Permission, View } from '@nextcloud/files'

const nextcloudVersionIsGreaterThanOr28 = parseInt(OC.config.version.split('.')[0]) >= 28

if (nextcloudVersionIsGreaterThanOr28) {
	OCA.Files.fileActions.registerFileAction(new FileAction({
		id: "test",
		displayName: () => t('test', 'Test'),
		default: DefaultType.DEFAULT,
		mime,
		enabled: (nodes) => {
			return nodes.every((node) => node.mime === mime && (node.permissions & Permission.READ))
		},
		iconSvgInline: () => ContactSvg,
		async exec(file) {
			console.log("executing...")
			return true
		},
	}))
} else {
	window.addEventListener('DOMContentLoaded', () => {
		if (OCA.Files && OCA.Files.fileActions) {
			OCA.Files.fileActions.registerAction({
				name: "Test",
				displayName: t('test', 'Test'),
				mime,
				permissions: OC.PERMISSION_READ,
				iconClass: 'icon-contacts-dark',
				actionHandler(fileName, context) {
					console.log("executing...")
				},
			})
			OCA.Files.fileActions.setDefault(mime, name)
			return
		}
		console.error('Unable to register vcf import action')
	})
}

Originally I was only running the “else” case for NextCloud <28, but now I’m trying to update my app (this is a generic proof of concept)

With this new code I get “SyntaxError: import declarations may only appear at top level of a module (line 1)”

Could anyone point me to the error I am making?

2

Are you using webpack/vite to build the app?

Where is this message printed?

4

I am not using webpack or vite to build the app, I am writing the code and moving the app folder in nextcloud/server/apps/name-of-the-app

The message is printend in the browser’s console as soon as the NextCloud filesystem is open.

5

I would assume that you need to provide (and include) the external dependencies (@nextcloud/files in your case). This is typically handled by builders like webpack or vite. Otherwise, you need to provide all dependencies to the browser.

If you use a builder, it will create a JS file that has the included JS codes included in one big file that can be used in the browser directly. It should not be too complex to set that up, you will not need to add Vue (in contrast to the boilerplate code) if you are not using Vue components yourself.