Building vue3 project with vuelidate import error

rezelute commented 2 years ago

Describe the bug

Hi, I am sorry if this is not a bug in vite-ssg but im finding it very hard to know whats causing this issue. If you could point me in the right direction I would appreciate it 😃 .

I am using the following packages: "vite-ssg": "^0.20.2", "@vuelidate/core": "^2.0.0-alpha.43", "@vuelidate/validators": "^2.0.0-alpha.31",

In a test.vue file I then import useVuelidate from "@vuelidate/core";.

Package.json contains: "type": "module",

When i try to build the project using: vue-tsc --noEmit && vite-ssg build I get the following error:

.vite-ssg-temp/assets/style.9e50c03e.css             70.19 KiB
(node:47652) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
(node:47652) UnhandledPromiseRejectionWarning: C:\...\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 wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async build (file:///C:/.../node_modules/vite-ssg/dist/chunks/build.mjs:171:87)
    at async Object.handler (file:///C:/.../node_modules/vite-ssg/dist/node/cli.mjs:20:3)
(node:47652) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:47652) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:47652) UnhandledPromiseRejectionWarning: C:\...\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 wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async build (file:///C:/.../node_modules/vite-ssg/dist/chunks/build.mjs:171:87)
    at async Object.handler (file:///C:/.../node_modules/vite-ssg/dist/node/cli.mjs:20:3)
(node:47652) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)

Note that if i set the ssgOptions format to cjs it seems to work however I dont understand why when package.json is set to "type": "module".

ssgOptions: {
         script: "async",
         format: "cjs",
         onFinished() {
            generateSitemap();
         },
      },

Reproduction

Try using vuelidate with vite-ssg

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 15.68 GB / 31.92 GB
  Binaries:
    Node: 14.20.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.77)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

emhamzahazeen commented 2 years ago

Ran into the similar issue while using npm, even without modification to any file directly after clone and "npm i" the build fails. Need to investigate the compatibility issue. Pointers are welcomed!