Uncaught SyntaxError: ...validate-iri... does not provide an export named 'IriValidationStrategy'

[edmondchuc]

Hi, I can't seem to get crate-builder-component to work in a minimal vue project with vite. I followed the README instructions here https://github.com/describo/crate-builder-component#using-the-component-in-your-app.

The full error in the browser console:

Uncaught SyntaxError: The requested module '/node_modules/validate-iri/index.js?v=b73c8eb8' 
does not provide an export named 'IriValidationStrategy' (at crate-manager.js?v=b73c8eb8:13:23)

Here is the minimum reproducible example: https://github.com/Kurrawong/describo-cbc-mre

I also noticed another project (https://github.com/Arkisto-Platform/describro) that also utilises crate-builder-component and it has a similar error as well.

Uncaught SyntaxError: The requested module '/node_modules/validator/lib/isDate.js?v=32dfbcb5' 
does not provide an export named 'default' (at Date.component.vue:23:8)

In both cases, I'm running Node v18.14.2 and all I did was install and run with vite.

npm i
npm run dev

Please let me know if I'm missing a config setting somewhere. Thanks.

[marcolarosa]

The issue stems from being unable to import the Strict Validation Strategy from the validate iri package @ https://github.com/describo/crate-builder-component/blob/248b97806a8e1d2bf2721bba80fa6ec2282149cc/src/crate-builder/crate-manager.js#L13.

I've just published 0.25.3 without this but your setup still seems to complain about importing lodash deps which you need to figure out.

[marcolarosa]

@edmondchuc

Can you please check the version of vite you are using. I've just upgraded vite in an app of mine that uses this component (from 4.0.4 -> 4.1.4) and the problem seems to have gone away.

[edmondchuc]

@marcolarosa when I ran into the issue, I was already on vite 4.1.4.

[marcolarosa]

I think this is a vite issue but I can't get yours to work and it's now fixed in mine. My vite config https://github.com/describo/collections/blob/master/ui/vite.config.js.

[marcolarosa]

I've asked the vite developers for help: https://github.com/vitejs/vite/issues/12505

[alvinsw]

Yes this is something to do with Vite. I also can't figure it out what causes it. All the import calls that throw the error look legit in the source. And production build works normally. Ie, npm run dev does not work but npm run build works. Use the npm run preview if you don't already have a web server.

[edmondchuc]

This is my workaround running npm run dev locally.

I clone this repo somewhere on my disk. Then I link to it from my project in package.json.

My package.json looks like this:

{
  "name": "app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@describo/crate-builder-component": "file:../crate-builder-component",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7",
    "vite": "^4.1.0"
  }
}

[marcolarosa]

Thanks @alvinsw @edmondchuc

Hopefully the vite devs come back with a fix or reason why it's not working.

[marcolarosa]

Unfortunately we didn't get a solution from the vite dev's but I found a workaround which I've described @ https://github.com/vitejs/vite/issues/12505#issuecomment-1522871822.

If you update to version 0.27.1 it should work now as you would it expect it to. And without any special vite configuration.