Getting a cryptic error while trying to make it work for @ionic/vue components.

[markomarkovic]

Here's a repository with the minimal example: https://github.com/markomarkovic/temporary-ionic-vue-project

Ionic uses vue-cli-service, so I've configured the plugin in the vue.config.js and it gets executed and reads the components as expected, but then it dies with a cryptic error that I don't get at all.

❯ yarn run serve
yarn run v1.22.5
$ vue-cli-service serve
INFO Starting development server...
40% building 43/46 modules 3 active /tmp/tmp.lfuXBTXRpL/android-app/node_modules/events/events.js######### NAME TO IMPORT IonRouterOutlet
######### NAME TO IMPORT IonApp
40% building 85/107 modules 22 active ...-app/node_modules/@ionic/core/dist/esm-es5/hardware-back-button-4a6b37fb.js######### NAME TO IMPORT IonTitle
######### NAME TO IMPORT IonToolbar
######### NAME TO IMPORT IonHeader
######### NAME TO IMPORT IonContent
######### NAME TO IMPORT IonPage
98% after emitting CopyPlugin

ERROR Failed to compile with 1 error 8:23:58 PM

error in js/app.js

/tmp/tmp.lfuXBTXRpL/android-app/node_modules/unplugin/dist/webpack/loaders/transform.js??ref--38-0!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/unplugin/dist/webpack/loaders/transform.js??ref--38-0!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/cache-loader/dist/cjs.js??ref--12-0!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/babel-loader/lib/index.js!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/cache-loader/dist/cjs.js??ref--0-0!/tmp/tmp.lfuXBTXRpL/android-app/node_modules/vue-loader-v16/dist/index.js??ref--0-1!/tmp/tmp.lfuXBTXRpL/android-app/src/App.vue?vue&type=template&id=7ba5bd90
Cannot read property 'startsWith' of null

No issues found.

Any help with this is welcome.

[markomarkovic]

This does not happen for production (running build command). Building for production appears to be working just fine. Only happens running the serve command for live reloading and development.

[markomarkovic]

I have traced it down to node_modules/webpack/lib/EvalSourceMapDevToolModuleTemplatePlugin.js

Disabling the source maps with devtool: false, in vue.config.js makes it work, which is good enough for me for now.

[markomarkovic]

So the working configuration for @ionic/vue, without source maps, appears to be:

/* eslint-disable @typescript-eslint/no-var-requires */
// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: false,
    plugins: [
      require('unplugin-vue-components/webpack')({
        dts: true,
        include: [/\.vue$/, /\.vue\?vue/],
        resolvers: [
          (name) => {
            if (name.startsWith('Ion')) {
              return {
                importName: name,
                path: '@ionic/vue',
              }
            }
          },
        ],
      }),
    ],
  },
}

[antfu]

The source map error should be solved by the latest version.

[markomarkovic]

Sorry, just upgraded to "unplugin-vue-components": "0.15.2" and the issue is still there and behaves the same.

[markomarkovic]

Ah, one more issue has appeared, building for production is now broken too, no matter the state of devtool :(