Vue 3 migration issues

[saveliy-sviridov]

Hello, I'm migrating an app that's making use of vjsf from vue/nuxt 2 to 3, and I'm having really strange issues with the imports; When I follow the documentation and simply add import Vjsf from '@koumoul/vjsf to my component, I'm getting the following error:

Unknown file extension ".vue" for /node_modules/@koumoul/vjsf/src/components/vjsf.vue
  at __node_internal_captureLargerStackTrace (node:internal/errors:496:5)
  at new NodeError (node:internal/errors:405:5)
  at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:136:11)
  at defaultGetFormat (node:internal/modules/esm/get_format:182:36)
  at defaultLoad (node:internal/modules/esm/load:101:20)
  at ModuleLoader.load (node:internal/modules/esm/loader:416:13)
  at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:287:22)
  at new ModuleJob (node:internal/modules/esm/module_job:63:26)
  at #createModuleJob (node:internal/modules/esm/loader:311:17)
  at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:264:34)
  at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:17)
  at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:21)

I've attempted to circumvent this problem in several ways, such as defining a separate plugin or adding '@koumoul/vsjf' to build.transpile of my nuxt.config.ts, however the only thing I've managed to achieve is get another strange error:

SyntaxError: The requested module '/_nuxt/node_modules/@json-layout/vocabulary/node_modules/ajv-formats/dist/index.js?v=df047a88' does not provide an export named 'default' (at index.mjs:78:15)
Caused by: SyntaxError: The requested module '/_nuxt/node_modules/@json-layout/vocabulary/node_modules/ajv-formats/dist/index.js?v=df047a88' does not provide an export named 'default' (at validate.js:2:8)

Would you happen to have any idea what could be the source of this behavior? I'm a bit at a loss and would greatly appreciate any help or advice.

[albanm]

The first problem I don't know, I never saw that.

For the second error you can try defining optimizeDeps.include as explained in the "CommonJS dependencies" section of the getting started.

[albanm]

It is not always necessary to define this option, and I don't really understand the difference in the projects that require it and those that don't.

[saveliy-sviridov]

Thank for for your response, I've failed to mention that, but I've actually already attempted to add that to my vite configuration, however that results in me getting the following error when I run nuxi build:

 ERROR  Nuxt Build Error: [commonjs--resolver] The "path" argument must be of type string. Received an instance of Array                                             4:33:30 PM

  at new NodeError (node:internal/errors:405:5)
  at validateString (node:internal/validators:162:11)
  at isAbsolute (node:path:1156:5)
  at getMatcherString (node_modules/vite/dist/node/chunks/dep-BcXSligG.js:2704:37)
  at Object.test (node_modules/vite/dist/node/chunks/dep-BcXSligG.js:2724:33)
  at result (node_modules/vite/dist/node/chunks/dep-BcXSligG.js:2745:25)
  at isPossibleCjsId (node_modules/vite/dist/node/chunks/dep-BcXSligG.js:14137:67)
  at Object.resolveId (node_modules/vite/dist/node/chunks/dep-BcXSligG.js:12712:10)
  at async PluginDriver.hookFirstAndGetPlugin (node_modules/rollup/dist/es/shared/node-entry.js:19674:28)
  at async resolveId (node_modules/rollup/dist/es/shared/node-entry.js:18355:26)
  at async ModuleLoader.loadEntryModule (node_modules/rollup/dist/es/shared/node-entry.js:19121:33)
  at async Promise.all (index 0)

[albanm]

This looks like a problem with commonjsOptions, have you tried only with optimizeDeps ?

[saveliy-sviridov]

Yeah, if I only put

import { commonjsDeps } from '@koumoul/vjsf/utils/build.js'
...
vite:  {
    ...
    optimizeDeps: {
      include: commonjsDeps
    }
}

in my nuxt.config.ts, I get the same

SyntaxError: The requested module '/_nuxt/node_modules/@json-layout/vocabulary/node_modules/ajv-formats/dist/index.js?v=df047a88' does not provide an export named 'default' (at index.mjs:78:15)
Caused by: SyntaxError: The requested module '/_nuxt/node_modules/@json-layout/vocabulary/node_modules/ajv-formats/dist/index.js?v=df047a88' does not provide an export named 'default' (at validate.js:2:8)

error

[albanm]

This can be related to dependency nesting. It looks like the module "ajv-formats" is nested inside "@json-layout/vocabulary" in your workspace. Maybe you have some conflicting versions, npm ls ajv-formats can help clarify that.

Also it looks like commonjsOptions now accepts an array of strings while it used to accept arrays of arrays of strings (path parts instead of full paths). You can try to something like "commonjsDepsPaths.map(p => p.join('/'))".

[saveliy-sviridov]

I've checked npm ls but nothing in particular strikes me as unusual in the package versions:

~/IdeaProjects/web/lrm/client$ npm ls ajv-formats
dashboard@1.0.0 /IdeaProjects/web/lrm/client
└─┬ @koumoul/vjsf@3.0.0-beta.32
  └─┬ @json-layout/core@0.27.0
    ├─┬ @json-layout/vocabulary@0.19.0
    │ └── ajv-formats@2.1.1
    └── ajv-formats@2.1.1

I tried mapping commonjsDepsPaths to a string array as you advised, but it doesn't seem to quite work either, I'm getting the following error:

Nuxt Build Error: node_modules/@json-layout/vocabulary/src/validate.js (1:7): "default" is not exported by "node_modules/ajv/dist/2019.js", imported by "node_modules/@json-layout/vocabulary/src/validate.js".
file: /web/lrm/client/node_modules/@json-layout/vocabulary/src/validate.js:1:7

1: import ajvModule from 'ajv/dist/2019.js'
          ^
2: import addFormats from 'ajv-formats'
3: import ajvErrors from 'ajv-errors'

  file: node_modules/@json-layout/vocabulary/src/validate.js:1:7

  1: import ajvModule from 'ajv/dist/2019.js'
  ^
  2: import addFormats from 'ajv-formats'
  3: import ajvErrors from 'ajv-errors'

  at getRollupError (node_modules/rollup/dist/es/shared/parseAst.js:396:41)
  at error (node_modules/rollup/dist/es/shared/parseAst.js:392:42)
  at Module.error (node_modules/rollup/dist/es/shared/node-entry.js:13858:16)
  at Module.traceVariable (node_modules/rollup/dist/es/shared/node-entry.js:14306:29)
  at ModuleScope.findVariable (node_modules/rollup/dist/es/shared/node-entry.js:11984:39)
  at Identifier.bind (node_modules/rollup/dist/es/shared/node-entry.js:6908:40)
  at VariableDeclarator.bind (node_modules/rollup/dist/es/shared/node-entry.js:4775:23)
  at VariableDeclaration.bind (node_modules/rollup/dist/es/shared/node-entry.js:4771:28)
  at Program.bind (node_modules/rollup/dist/es/shared/node-entry.js:4771:28)
  at Module.bindReferences (node_modules/rollup/dist/es/shared/node-entry.js:13839:18)
  at Graph.sortModules (node_modules/rollup/dist/es/shared/node-entry.js:20062:20)
  at Graph.build (node_modules/rollup/dist/es/shared/node-entry.js:19966:14)
  at async node_modules/rollup/dist/es/shared/node-entry.js:20611:13
  at async catchUnfinishedHookActions (node_modules/rollup/dist/es/shared/node-entry.js:20119:16)
  at async rollupInternal (node_modules/rollup/dist/es/shared/node-entry.js:20606:5)
  at async Module.build (node_modules/vite/dist/node/chunks/dep-BcXSligG.js:65664:14)
  at async buildClient (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.C4RKq1mD.mjs:745:5)
  at async bundle (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.C4RKq1mD.mjs:1680:3)
  at async bundle (node_modules/nuxt/dist/index.mjs:5460:5)
  at async Promise.all (index 1)
  at async build (node_modules/nuxt/dist/index.mjs:5332:5)
  at async Object.run (node_modules/nuxi/dist/chunks/build.mjs:94:5)
  at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.6aad497e.mjs:1648:16)
  at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.6aad497e.mjs:1639:11)
  at async runMain$1 (node_modules/nuxi/dist/shared/nuxi.6aad497e.mjs:1777:7)

This seems to me like a nuxt 3-related issue; I've tried initializing an empty nuxt 3 project, only adding vjsf to it, and I'm getting the exact same results as in my current project, which I'm migrating from nuxt 2.

[albanm]

It looks like commonjsDepsPaths is missing some elements, it is a small utility that is not really tested as it is not required in my setups. You could try looking at its content and maybe extend it with missing elements based on the errors you encounter.

Also your npm ls result is weird, in my case I always see ajv-formats stored at the root of node_modules and not duplicated inside json-layout/core and json-layout/vocabulary. Maybe you are using an older version of npm ? I use npm 10.

[albanm]

Also I use vjsf with nuxt 3 without problem in multiple projects with the optimizeDeps option only. A difference in npm version (or the use of another package manager) probably explains the difference.