bug: @ionic/vue build is only building index.js (no index.esm.js)

[zwacky]

Bug Report

Ionic version: [ ] 4.x [x] 5.x

Current behavior: I wanted to dive into SSR and @ionic/vue. There I discovered 2 things:

1. when building @ionic/vue via npm run build in /packages/vue directory, it only outputs:
   • index.js
   • index.js.map
   • index.min.js
   • index.min.js.map

index.esm.js and index.esm.js.map is missing.

2. the output is module: esnext, making it hard (?) to use in a node environment for SSR.

Expected behavior:

1. add index.esm.js and index.esm.js.map in dist folder
2. have module set to es2015 (like it's done in @ionic/react)

Steps to reproduce:

• following setup procedure described in @ionic/vue readme
• npm run build

[liamdebeasi]

Thanks for the issue. Can you give me an example of issues you are running into?

[zwacky]

Sure! I'm trying to SSR my ionic-vue app on a node server. since @ionic/vue's main points to /dist/index.js that isn't a commonjs module, the node server trips.

here is the output I'm getting:

> vue3-ssr@0.1.0 ssr /Users/zwacky/data/tmp/vue3-example-ssr
> node src/server.js

/Users/zwacky/data/tmp/vue3-example-ssr/node_modules/@ionic/vue/dist/index.js:1
import { addIcons } from 'ionicons';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.d33d (/Users/zwacky/data/tmp/vue3-example-ssr/dist/js/app.0bce23cc.js:2391:18)
    at __webpack_require__ (/Users/zwacky/data/tmp/vue3-example-ssr/dist/js/app.0bce23cc.js:21:30)
    at Module.9be9 (/Users/zwacky/data/tmp/vue3-example-ssr/dist/js/app.0bce23cc.js:1766:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue3-ssr@0.1.0 ssr: `node src/server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vue3-ssr@0.1.0 ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zwacky/.npm/_logs/2021-01-14T17_20_54_568Z-debug.log

if it were commonjs, import would be require statements that any node environments would understand like any other lib.

P.s. @ionic/react's index.js is also module commonjs.

[liamdebeasi]

Thanks! I made a few changes to your PR. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@5.6.0-dev.202101201502.18a1eb0 @ionic/vue-router@5.6.0-dev.202101201502.18a1eb0

[zwacky]

Thank you @liamdebeasi, this worked for me! ✅

> vue3-ssr@0.1.0 pressr ~/tmp/vue3-example-ssr
> cross-env SSR=true vue-cli-service build

  File                         Size                                         Gzipped

  dist/js/app.0bce23cc.js      95.92 KiB                                    20.74 KiB
  dist/css/app.b6ed254d.css    18.92 KiB                                    3.65 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

> vue3-ssr@0.1.0 ssr ~/tmp/vue3-example-ssr
> node src/server.js

  You can navigate to http://localhost:8080

[liamdebeasi]

Thanks for checking. I merged https://github.com/ionic-team/ionic-framework/pull/22766 in. Thanks for the report and the fix!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.