Error trying to use Validation - guidance required

ON importing and registering the Validation module as follows:

> import { ValidationHtmlConfiguration } from '@aurelia/validation-html';
> ...
> .register(ValidationHtmlConfiguration)
> ...

I immediately get the following compilation error:

X [ERROR] No matching export in “node_modules/@aurelia/kernel/dist/esm/index.dev.mjs” for import “Metadata”

>     node_modules/@aurelia/validation/dist/esm/rules.js:7:19:
>       7 │ import { Protocol, *Metadata*, DI, toArray } from '@aurelia/kernel';

where Metadata is underliined…
Any help with resolving this error would be appreciated. Thanks.
P.S. ENVIRONMENT:

 "dependencies": {
        "@aurelia/dialog": "^2.0.0-beta.23",
        "@aurelia/router": "latest",
        "@aurelia/validation": "^0.9.0",
        "@aurelia/validation-html": "^0.9.0",
        "@fortawesome/fontawesome-free": "^6.7.2",
        "@popperjs/core": "^2.11.8",
        "@types/feather-icons": "^4.29.4",
        "aurelia": "latest",
        "aurelia-slickgrid": "^8.12.1",
        "bootstrap": "^5.3.3",
        "feather-icons": "^4.29.2",
        "jquery": "^3.7.1",
        "moment": "^2.30.1",
        "nprogress": "^0.2.0",
        "numeral": "^2.0.6",
        "popper.js": "^1.16.1"

Hi @frankalee

Can you share a bit about your build settings? Like, vite vs webpack, perhaps any changes in the default config for these two?

Thanks for the response. I haven’t made any changes to any of the config files and haven’t build anything yet, it’s all still in dev.

Here’s vite.config.ts:

import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills'
import aurelia from '@aurelia/vite-plugin';

export default defineConfig({
  server: {
    open: !process.env.CI,
    port: 9000,
  },
  esbuild: {
    target: 'es2022'
  },
  plugins: [
    aurelia({
      useDev: true,
    }),
    nodePolyfills(),
  ],
});

tsconfig.vite.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
    "types": [
      "node",
      "jsdom"
    ]
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "skipLibCheck": true,
    // "target": "ES2017",
    "target": "ES2022",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "importHelpers": true,
    "sourceMap": true
  },
  "include": [
    "src"
  ],
  "files": [
    "src/resource.d.ts"
  ]
}

package.json:
{
“name”: “mims”,
“description”: “An Aurelia 2 client application.”,
“version”: “0.1.0”,
“repository”: {
“type”: “git”,
“url”: “???”
},
“license”: “UNLICENSED”,
“dependencies”: {
@aurelia/dialog”: “^2.0.0-beta.23”,
@aurelia/router”: “latest”,
@aurelia/validation”: “^0.9.0”,
@aurelia/validation-html”: “^0.9.0”,
@fortawesome/fontawesome-free”: “^6.7.2”,
@popperjs/core”: “^2.11.8”,
@types/feather-icons”: “^4.29.4”,
“aurelia”: “latest”,
“aurelia-slickgrid”: “^8.12.1”,
“bootstrap”: “^5.3.3”,
“feather-icons”: “^4.29.2”,
“jquery”: “^3.7.1”,
“moment”: “^2.30.1”,
“nprogress”: “^0.2.0”,
“numeral”: “^2.0.6”,
“popper.js”: “^1.16.1”
},
“devDependencies”: {
@aurelia/testing”: “latest”,
@aurelia/vite-plugin”: “latest”,
@types/node”: “^22.13.1”,
“eslint”: “^9.19.0”,
“globals”: “^15.14.0”,
“jsdom”: “^26.0.0”,
“stylelint”: “^16.14.1”,
“stylelint-config-standard”: “^37.0.0”,
“tslib”: “^2.8.1”,
“typescript”: “^5.7.3”,
“typescript-eslint”: “^8.23.0”,
“vite”: “^6.0.11”,
“vite-plugin-node-polyfills”: “^0.23.0”,
“vitest”: “^3.0.5”
},
“scripts”: {
“lint:js”: “eslint src test”,
“lint:css”: “stylelint "src/**/*.css"”,
“lint”: “npm run lint:js && npm run lint:css”,
“pretest”: “npm run lint”,
“start”: “vite”,
“build”: “vite build”,
“test”: “vitest”
},
“type”: “module”
}
eslint.config.mjs:

import eslint from "@eslint/js";
import tseslint from 'typescript-eslint';
import tsParser from "@typescript-eslint/parser";
import globals from "globals";

export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ["**/*.ts"],

    languageOptions: {
      globals: {
        ...globals.builtin,
        ...globals.nodeBuiltin,
        ...globals.browser,
        ...globals.node,
      },

      parser: tsParser,
      ecmaVersion: 2019,
      sourceType: "module",
    },
  }
];
1 Like

It seems that you are using different versions of the au2 packages.

Ensure that you are using the same (preferably the latest) version for all the au2 packages.
Happy coding! :v:

1 Like

Thank you for your response. Will check it out. If it fails to solve the issue I’ll just go with zod since I don’t have time to hunt things down now.
Once again - thanks for the response, much appreciated.