v3 alpha: import fails with "Default condition should be last one"

[lukas-mertens]

I am currently testing the newest alpha ^3.0.0-alpha.7. Currently as soon as I import vjsf using:

import Vjsf from "@koumoul/vjsf";
export default defineComponent({
...
  components: {
    Vjsf,
    ...
  },
});

I get a

ERROR in ./src/components/EvModuleInfo.vue?vue&type=script&lang=ts (./node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/babel-loader/lib/index.js!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/EvModuleInfo.vue?vue&type=script&lang=ts) 2:0-33
Module not found: Error: Default condition should be last one
 @ ./src/components/EvModuleInfo.vue?vue&type=script&lang=ts 1:0-467 1:0-467 1:468-924 1:468-924
 @ ./src/components/EvModuleInfo.vue 2:0-63 3:0-58 3:0-58 6:49-55
 @ ./node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/babel-loader/lib/index.js!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/pages/ConfigPage.vue?vue&type=script&lang=ts 4:0-58 9:4-16
 @ ./src/pages/ConfigPage.vue?vue&type=script&lang=ts 1:0-465 1:0-465 1:466-920 1:466-920
 @ ./src/pages/ConfigPage.vue 2:0-61 3:0-56 3:0-56 8:49-55
 @ ./src/router/index.ts 6:0-49 20:15-25
 @ ./src/main.ts 7:0-34 19:8-14

error.

Is it possible that this has something to do with the way the exports are defined in package.json?

[albanm]

I just worked on imports, build integration, etc. You can try again with alpha 11.

I don't know if it is the source of your problem but I added a section about commonjs dependencies in the getting started.

Also I initialized a directory with example applications to validate actual integration in different systems. Depending on your environment you might want to add an example app to help diagnose issues specific to it.

[lukas-mertens]

@albanm Thanks a lot, that's so helpful! I only had time for a quick test today, I will dig into this deeper on Monday. My current situation: I tested adding commonjs to my vite-config as you described. Migrating from vue-cli to vite actually fixed the error in my original issue description, but at the moment I get

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/[email protected][email protected]/node_modules/ajv-formats/dist/formats.js?v=a9f7a9f0' does not provide an export named 'fullFormats' (at validate.js?v=a9f7a9f0:1:10)

in my browser console. I haven't digged deeper into this yet, I will do that next week

[DerMolly]

I just tested the example application you pointed towards and starting it fails with this error message:

> [email protected] dev /Users/molly/Developer/vuetify-jsonschema-form/app-examples/vite-typescript
> vite

Failed to resolve dependency: ajv/dist/2019.js, present in 'optimizeDeps.include'
Failed to resolve dependency: ajv-formats, present in 'optimizeDeps.include'
Failed to resolve dependency: ajv-formats/dist/formats.js, present in 'optimizeDeps.include'
Failed to resolve dependency: ajv-i18n, present in 'optimizeDeps.include'
Failed to resolve dependency: ajv-errors, present in 'optimizeDeps.include'
Failed to resolve dependency: markdown-it, present in 'optimizeDeps.include'
Failed to resolve dependency: debug, present in 'optimizeDeps.include'

  VITE v4.5.2  ready in 363 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h to show help
Error: The following dependencies are imported but could not be resolved:

  @json-layout/core (imported by /Users/molly/Developer/vuetify-jsonschema-form/app-examples/vite-typescript/src/components/compiled/vjsf-person.vue?id=0)
  @vueuse/core (imported by /Users/molly/Developer/vuetify-jsonschema-form/app-examples/vite-typescript/src/components/compiled/vjsf-person.vue?id=0)
  ajv-i18n/localize/en/index.js (imported by /Users/molly/Developer/vuetify-jsonschema-form/app-examples/vite-typescript/src/components/compiled/vjsf-person.vue?id=0)

Are they installed?
    at file:///Users/molly/Developer/vuetify-jsonschema-form/app-examples/vite-typescript/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-52909643.js:45779:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/molly/Developer/vuetify-jsonschema-form/app-examples/vite-typescript/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-52909643.js:45187:38

It seems to that there are still some problems in regards to dependencies / dependency resolution for the alpha?

[albanm]

I pushed a commit upgrading the example app to version 3.0.0-beta.1, it works fine in my environment. But I don't think the upgrade is changing anything in this regard. I see you are using pnpm, maybe that is the reason the dependencies are not found by vite, this example app was setup with npm. You can follow these steps to try to initialize the project with pnpm from the start and see if it changes something.

[DerMolly]

I tested it agian with both pnpm and npm and both seem to work (At least I don't get any errors on startup as before). So this seems to be fixed for the app-example.

[lukas-mertens]

@albanm My main issue is currently that I get

Failed to resolve dependency: ajv/dist/2019.js, present in 'optimizeDeps.include'
Failed to resolve dependency: ajv-formats, present in 'optimizeDeps.include'
Failed to resolve dependency: ajv-formats/dist/formats.js, present in 'optimizeDeps.include'
Failed to resolve dependency: ajv-i18n, present in 'optimizeDeps.include'
Failed to resolve dependency: ajv-errors, present in 'optimizeDeps.include'
Failed to resolve dependency: markdown-it, present in 'optimizeDeps.include'
Failed to resolve dependency: debug, present in 'optimizeDeps.include'

I am using pnpm as well. My vite.config.ts:

import Vue from '@vitejs/plugin-vue';
import Vuetify, {transformAssetUrls} from 'vite-plugin-vuetify';
import {defineConfig} from "vite";
import ViteFonts from 'unplugin-fonts/vite';
import {commonjsDeps} from '@koumoul/vjsf/utils/build.js';
import {fileURLToPath} from "node:url";

export default defineConfig({
    optimizeDeps: {
        include: commonjsDeps,
    },
    build: {
        commonjsOptions: {
            include: commonjsDeps,
        }
    },
    plugins: [
        Vue({
            template: { transformAssetUrls }
        }),
        Vuetify({
            autoImport: true,
        }),
        ViteFonts({
            google: {
                families: [ {
                    name: 'Roboto',
                    styles: 'wght@100;300;400;500;700;900',
                }],
            },
        })
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        },
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    },
    server: {
        port: 8080,
    },
});

Are you sure these should be devDependencies?

pnpm install ajv ajv-formats ajv-i18n ajv-errors markdown-it debug fixed it, but I don't think this is the prober way to do it, right? Probably you should revisit which dependencies are devDependencies and which are normal dependencies, or am I missing something?

[albanm]

Those are not dev dependencies for the library. This project uses npm workspaces, the actual package.json you are interested is in lib/package.json. It references @json-layout/core that has all these dependencies. I suppose there might be a problem with dependency hoisting or something like that.

[albanm]

This is probably the answer https://github.com/vitejs/vite/issues/10047#issuecomment-1580109801

I will try to test this. I hope it is possible to have a configuration that works the same way when dependencies are flattened or nested.

[albanm]

Ok, this is difficult to understand. Now the test app works even without declaring the list of commonjs deps, maybe there is a cache effect but I don't see how as I deleted node_modules/.cache and use "vite --force". I wanted to try something like this:

commonjsDepsPaths = [
  ['@koumoul/vjsf', '@json-layout/core', 'ajv'],
  ['@koumoul/vjsf', '@json-layout/core', 'ajv/dist/2019.js'],
  ['@koumoul/vjsf', '@json-layout/core', 'ajv-formats'],
  ['@koumoul/vjsf', '@json-layout/core', 'ajv-formats/dist/formats.js'],
  ['@koumoul/vjsf', '@json-layout/core', 'ajv-i18n'],
  ['@koumoul/vjsf', '@json-layout/core', 'ajv-errors'],
  ['@koumoul/vjsf', '@json-layout/core', 'markdown-it'],
  ['@koumoul/vjsf', '@json-layout/core', 'debug']
]

optimizeDeps.include = commonjsDepsPaths.map(parts => parts.join(' > '))

Can you try this or something similar @lukas-mertens ?

If a path is wrong maybe you can fix it by checking where the dependency actually is using "npm ls ajv" for example.

[tmatson98]

I've been getting the "Default condition should be last one" error with webpack. According to the Node.js docs the "default" export should always come last:

"default" - the generic fallback that always matches. Can be a CommonJS or ES module file. This condition should always come last.

Webpack enforces this and throws an error if it's not. Switching the order in the package.json files for @koumoul/vjsf and @json-layout so that it always comes last fixes the error for me.

[albanm]

I am not sure I understand the exact change you made. Is it just inverting "types" and "default" keys in the nested exports ?

I should create a small test app with webpack like I did with vite. I would gladly accept a PR of this if someone has a good light project template with webpack+vue+vuetify (see https://github.com/koumoul-dev/vuetify-jsonschema-form/tree/next/app-examples).

[tmatson98]

Yeah, inverting the "types" and "default". So, for example, this:

".":  {
  "import": {
    "default": "./src/index.js",
    "types": "./types/index.d.ts"
  }
},

Becomes this:

".":  {
  "import": {
    "types": "./types/index.d.ts",
    "default": "./src/index.js"
  }
},

[lukas-mertens]

@albanm exactly, this solved the issue for me using webpack as well, but then I switched to vite. Somehow this issue changed topics, I should have opened a new one, but I didn't know, at that point, that the problem was only caused by webpack.

[lukas-mertens]

As this was also discussed in this issue: If someone else is struggling with the mix of commonjs/esm, read my comment here: https://github.com/json-layout/json-layout/issues/1#issuecomment-1959262852