Electron-vue: Unpackaged vue component cannot be installed as dependency

[luventa]

Hi guys, nice work on intergration of vue and electron!

Today there is an issue raised in my project and it's really weird for me.

Please clone this sample project to reproduce https://github.com/luventa/electron-vue-test.

Now app/package.json has the unpackaged vue component under devDependencies and it works fine. But if you move that line it into dependencies, an exception will occur during runtime.

Can you explain why this happens, please?

Thank you.

[rafaelpimpa]

When installed at devDependencies and built, it worked fine, I guess there's no problem on having them as devDependencies whatsoever?

Also I'm using the #feat/simpler-structure

[SimulatedGREG]

@luventa @rafaelpimpa

Sorry for the late reply.

I'm completely lost on this one guys. I'm honestly not sure how using devDependencies makes this work fine. The only thing I can think of is that maybe the webpack setup doesn't like that the notification has a template and not a render function. But its weird because vue-loader should step in and compile that on-the-fly. I'm unfortunatly going to have to put this on hold, and hope this issue solves itself once the next Milestone is complete (#171).

[SimulatedGREG]

OKAY, I figured it out!

This is actually related to #168, but in short since the vue-admin modules provide pure *.vue files it is assumed that webpack is bundling all modules, which is typically common for the web. In electron-vue all node_modules are treated as webpack externals. Because of this, vue-loader nor the Compiler + Runtime build of vue will never be able to compile the *.vue files, hence the unexpected characters <. If this module was compiled using render functions this wouldn't be an issue.

Take a look at #168 and adjust webpack.renderer.config.js as shown, and add vue-admin modules to the whitelist...

webpack.renderer.config.js

/* ... */
externals: Object.keys(pkg.dependencies || {}).filter(d => !['vue','vue-bulma-notification'].includes(d)),
/* ... */
alias: {
  'vue$': 'vue/dist/vue.esm.js',
  'components': path.join(__dirname, 'app/src/renderer/components'),
  'renderer': path.join(__dirname, 'app/src/renderer')
}
/* ... */

[luventa]

Thanks Grep!
So sorry that I didn’t reply your mail. I was too busy with my daily work recently.
Really appreicate that you spent time on fixing this and explained the reason to us.

Hope you are all well ! 😊
发件人: Greg [e-mail]
发送时间: Sunday, April 9, 2017 2:06 PM
收件人: SimulatedGREG/[e-mail]
抄送: Pan [e-mail]; [e-mail]
主题: Re: [SimulatedGREG/electron-vue] Unpackaged vue component cannot be installed as dependency (#142)

OKAY, I figured it out!

This is actually related to #168https://github.com/SimulatedGREG/electron-vue/issues/168, but in short since the vue-admin modules provide pure *.vue files it is assumed that webpack is bundling all modules, which is typically common for the web. In electron-vue all node_modules are treated as webpack externals. Because of this, vue-loader nor the Compiler + Runtime build of vue will never be able to compile the *.vue files, hence the unexpected characters <. If this module was compiled using render functions this wouldn't be an issue.

Take a look at #168https://github.com/SimulatedGREG/electron-vue/issues/168 and adjust webpack.renderer.config.js as shown, and add vue-admin modules to the whitelist...

webpack.renderer.config.js

/* ... */

externals: Object.keys(pkg.dependencies || {}).filter(d => !['vue','vue-bulma-notification'].includes(d)),

/* ... */

alias: {

'vue$': 'vue/dist/vue.esm.js',

'components': path.join(__dirname, 'app/src/renderer/components'),

'renderer': path.join(__dirname, 'app/src/renderer')

}

/* ... */

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/SimulatedGREG/electron-vue/issues/142#issuecomment-292766427, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ASVEFeKwq-nyS8kQHZbA4b4CghXGDSXVks5ruHVPgaJpZM4MTz26.