Cannot read properties of undefined when use renderToString function

[lermontex]

I'm trying to use Vite + Vue 3 (SSR) + Vuelidate , but I'm getting a component rendering error where there is a useVuelidate function call

TypeError: Cannot read properties of undefined (reading 'default')
    at setup (C:/Projects/website/src/pages/feedback.vue:34:40)
    at _sfc_main.setup (/src/pages/feedback.vue:61:23)
    at callWithErrorHandling (C:\Projects\website\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:157:22)
    at setupStatefulComponent (C:\Projects\website\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7107:29)
    at setupComponent (C:\Projects\website\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7062:11)
    at renderComponentVNode (C:\Projects\website\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:172:17)
    at renderVNode (C:\Projects\website\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:295:22)
    at renderComponentSubTree (C:\Projects\website\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:259:13)
    at renderComponentVNode (C:\Projects\website\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:188:16)
    at Proxy.ssrRenderComponent (C:\Projects\website\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:608:12)

<template>
  <div></div>
</template>

<script>
import { reactive, toRefs } from "vue";
import useVuelidate from "@vuelidate/core";
import { email, helpers, required } from "@vuelidate/validators";

export default {
  setup() {
    const createFeedbackFormState = reactive({
      subject: "",
      email: "",
      content: "",
    });

    const createFeedbackFormValidationRules = {
      subject: {
        required: helpers.withMessage("This field must not be empty", required),
      },
      email: {
        required: helpers.withMessage("This field must not be empty", required),
        email: helpers.withMessage(
          "This field must contain a valid email address",
          email
        ),
      },
      content: {
        required: helpers.withMessage("This field must not be empty", required),
      },
    };

// [/src/pages/feedback.vue:61:23](feedback.vue:34:40) <<<------------------------------
    const createFeedbackFormValidator = useVuelidate(
      createFeedbackFormValidationRules,
      createFeedbackFormState
    );

    return {
      ...toRefs(createFeedbackFormState),
      createFeedbackFormValidator,
    };
  },
};
</script>

A similar error occurs in all components where Vuelidate is used.

[lermontex]

So, I managed to find out some details:

// import useVuelidate from "@vuelidate/core";

Error:
file:///C:/Projects/website/dist/server/assets/feedback-1f6f954c.js:2
import { useVuelidate } from "@vuelidate/core";
         ^^^^^^^^^^^^
SyntaxError: Named export 'useVuelidate' not found. The requested module '@vuelidate/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@vuelidate/core';
const { useVuelidate } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

import vuelidate from "@vuelidate/core";

setup() {
    const { useVuelidate } = vuelidate;

OR
import useVuelidate from "@vuelidate/core";

Error:
 node --trace-warnings ./src/server.js
(node:3640) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. 
[Vue Router warn]: uncaught error during route navigation: 
C:\Projects\website\node_modules\@vuelidate\core\dist\index.esm.js:1
import { isReactive, isReadonly, computed, unref, ref, watch, reactive, isRef, nextTick, inject, provide, getCurrentInstance, onBeforeMount, onBeforeUnmount } from 'vue-demi';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
C:\Projects\website\node_modules\@vuelidate\core\dist\index.esm.js:1
import { isReactive, isReadonly, computed, unref, ref, watch, reactive, isRef, nextTick, inject, provide, getCurrentInstance, onBeforeMount, onBeforeUnmount } from 'vue-demi';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Node.js v18.13.0
error Command failed with exit code 1.

Solution:
I added a line "type": "module" to the file \node_modules\@vuelidate\core\package.json. Now there is no error.

I think the contents of the package.json file need to be revised

[ahsath]

possible duplicated #1111

[lermontex]

Fixed in @vuelidate/core@2.0.1

@dobromir-hristov, thank you!