Merge pull request #734 from umbraco/feature/eslint-rule-for-dynamic-import

src/Umbraco.Web.UI.Client/eslint-local-rules.cjs

@@ -260,31 +260,32 @@ module.exports = {
 			schema: [],
 		},
 		create: (context) => {
+			function correctImport(value) {
+				if (value === '.') {
+					return './index.js';
+				}
+
+				if (
+					value &&
+					value.startsWith('.') &&
+					!value.endsWith('.js') &&
+					!value.endsWith('.css') &&
+					!value.endsWith('.json') &&
+					!value.endsWith('.svg') &&
+					!value.endsWith('.jpg') &&
+					!value.endsWith('.png')
+				) {
+					return (value.endsWith('/') ? value + 'index' : value) + '.js';
+				}
+
+				return null;
+			}
+
 			return {
 				ImportDeclaration: (node) => {
 					const { source } = node;
 					const { value } = source;
 
-					function correctImport(value) {
-						if (value === '.') {
-							return './index.js';
-						}
-
-						if (
-							value.startsWith('.') &&
-							!value.endsWith('.js') &&
-							!value.endsWith('.css') &&
-							!value.endsWith('.json') &&
-							!value.endsWith('.svg') &&
-							!value.endsWith('.jpg') &&
-							!value.endsWith('.png')
-						) {
-							return (value.endsWith('/') ? value + 'index' : value) + '.js';
-						}
-
-						return null;
-					}
-
 					const fixedValue = correctImport(value);
 					if (fixedValue) {
 						context.report({
@@ -294,22 +295,19 @@ module.exports = {
 						});
 					}
 				},
-				/*
-				// TODO: This rule does not work, make it work.
-				CallExpression: (node) => {
-					if (node.callee.name === 'import') {
-						const [source] = node.arguments;
-						const fixedSource = correctImport(source);
-						if (fixedSource) {
-							context.report({
-								node,
-								message: 'Relative imports should use the ".js" file extension.',
-								fix: (fixer) => fixer.replaceText(source, `'${fixedSource}'`),
-							});
-						}
+				ImportExpression: (node) => {
+					const { source } = node;
+					const { value } = source;
+
+					const fixedSource = correctImport(value);
+					if (fixedSource) {
+						context.report({
+							node: source,
+							message: 'Relative imports should use the ".js" file extension.',
+							fix: (fixer) => fixer.replaceText(source, `'${fixedSource}'`),
+						});
 					}
 				},
-				*/
 			};
 		},
 	},

src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts

@@ -1,4 +1,3 @@
-
 import type { UmbAppErrorElement } from './app-error.element.js';
 import { UmbAuthFlow } from './auth/index.js';
 import { UMB_APP, UmbAppContext } from './app.context.js';
@@ -217,7 +216,7 @@ export class UmbAppElement extends UmbLitElement {
 		this._routes = [
 			{
 				path: '**',
-				component: () => import('./app-error.element'),
+				component: () => import('./app-error.element.js'),
 				setup: (component) => {
 					(component as UmbAppErrorElement).errorMessage = errorMsg;
 					(component as UmbAppErrorElement).error = error;

src/Umbraco.Web.UI.Client/src/libs/extension-api/load-extension.function.ts

@@ -8,7 +8,7 @@ export async function loadExtension<T = unknown>(manifest: ManifestWithLoader<T>
 		}
 
 		if (isManifestJSType<T>(manifest) && manifest.js) {
-			return await import(/* @vite-ignore */ manifest.js);
+			return await import(manifest.js);
 		}
 	} catch (err: any) {
 		console.warn('-- Extension failed to load script', manifest, err);

src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-editor/workspace-editor.element.ts

@@ -104,7 +104,7 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 					component: () => {
 						if (manifest.type === 'workspaceViewCollection') {
 							return import(
-								'../workspace-content/views/collection/workspace-view-collection.element'
+								'../workspace-content/views/collection/workspace-view-collection.element.js'
 							) as unknown as Promise<HTMLElement>;
 						}
 						return createExtensionElement(manifest);