New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Native node modules with electron wrapper #1224

Closed
steffanhalv opened this Issue Dec 2, 2017 · 2 comments

Comments

Projects
None yet
2 participants
@steffanhalv

steffanhalv commented Dec 2, 2017

Software version

Quasar: 0.14.4
OS: Windows 10 & Mac OS Sierra
Node: v6.11.4 & v9.2.0
NPM: 5.5.1

What did you get as the error?

'net' not found or recognized as a command

What were you expecting?

It is supported by electron:
https://electronjs.org/docs/tutorial/using-native-node-modules
https://nodejs.org/api/net.html

So it should also be supported in quasar. It lacks alot of functionality when native modules is not available for desktop apps.

What steps did you take, to get the error?

quasar init myProject
cd myProject
npm install
quasar wrap electron
cd electron
npm install
cd ..
quasar dev
cd electron
quasar dev

In myProject/src/main.js add:

import net from 'net'

let server = net.createServer((socket) => {
  socket.end('goodbye\n')
}).on('error', (err) => {
  // handle errors here
  throw err
})

server.listen(() => {
  console.log('opened server on', server.address())
})

My attempt on fixing this

In myProject:

npm install babel-preset-env --save-dev
npm update
cd electron
npm update

Remove this dependency from package.json:
"babel-preset-es2015": "^6.0.0",

Change .babelrc

{
  "presets": [["es2015", {"modules": false}], "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

Replace with:

{
  "presets": [["env", {"modules": false}], "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

Change build.webpack.base.conf by adding: target: 'node',

Ex.:

module.exports = { entry: { app: './src/main.js' }, target: 'node'...},

Note: Open app in browser does not work, but it is expected as its not the target.
Also, electron does run & my server is started, so changing target makes net available, but now I still get:

vue.runtime.esm.js?ff9b:570 [Vue warn]: Property or method "_ssrClass" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Grounding> at src\components\Grounding.vue
       <App> at src\App.vue
         <Root>
warn @ vue.runtime.esm.js?ff9b:570
warnNonPresent @ vue.runtime.esm.js?ff9b:1830
get @ vue.runtime.esm.js?ff9b:1873
render @ Grounding.vue?788c:13
Vue._render @ vue.runtime.esm.js?ff9b:4433
updateComponent @ vue.runtime.esm.js?ff9b:2740
get @ vue.runtime.esm.js?ff9b:3090
Watcher @ vue.runtime.esm.js?ff9b:3079
mountComponent @ vue.runtime.esm.js?ff9b:2747
Vue$3.$mount @ vue.runtime.esm.js?ff9b:7828
init @ vue.runtime.esm.js?ff9b:4026
createComponent @ vue.runtime.esm.js?ff9b:5478
createElm @ vue.runtime.esm.js?ff9b:5426
createChildren @ vue.runtime.esm.js?ff9b:5549
createElm @ vue.runtime.esm.js?ff9b:5454
patch @ vue.runtime.esm.js?ff9b:5943
Vue._update @ vue.runtime.esm.js?ff9b:2612
updateComponent @ vue.runtime.esm.js?ff9b:2740
get @ vue.runtime.esm.js?ff9b:3090
Watcher @ vue.runtime.esm.js?ff9b:3079
mountComponent @ vue.runtime.esm.js?ff9b:2747
Vue$3.$mount @ vue.runtime.esm.js?ff9b:7828
init @ vue.runtime.esm.js?ff9b:4026
createComponent @ vue.runtime.esm.js?ff9b:5478
createElm @ vue.runtime.esm.js?ff9b:5426
patch @ vue.runtime.esm.js?ff9b:5982
Vue._update @ vue.runtime.esm.js?ff9b:2612
updateComponent @ vue.runtime.esm.js?ff9b:2740
get @ vue.runtime.esm.js?ff9b:3090
Watcher @ vue.runtime.esm.js?ff9b:3079
mountComponent @ vue.runtime.esm.js?ff9b:2747
Vue$3.$mount @ vue.runtime.esm.js?ff9b:7828
Vue._init @ vue.runtime.esm.js?ff9b:4529
Vue$3 @ vue.runtime.esm.js?ff9b:4614
(anonymous) @ main.js?1c90:42
start @ quasar.esm.js?8bfb:368
(anonymous) @ main.js?1c90:40
(anonymous) @ app.js:825
__webpack_require__ @ app.js:638
fn @ app.js:48
(anonymous) @ app.js:730
__webpack_require__ @ app.js:638
(anonymous) @ app.js:684
(anonymous) @ app.js:687
vue.runtime.esm.js?ff9b:570 [Vue warn]: Error in render: "TypeError: _vm._ssrClass is not a function"

found in

---> <Grounding> at src\components\Grounding.vue
       <App> at src\App.vue
         <Root>
warn @ vue.runtime.esm.js?ff9b:570
logError @ vue.runtime.esm.js?ff9b:1691
globalHandleError @ vue.runtime.esm.js?ff9b:1686
handleError @ vue.runtime.esm.js?ff9b:1675
Vue._render @ vue.runtime.esm.js?ff9b:4435
updateComponent @ vue.runtime.esm.js?ff9b:2740
get @ vue.runtime.esm.js?ff9b:3090
Watcher @ vue.runtime.esm.js?ff9b:3079
mountComponent @ vue.runtime.esm.js?ff9b:2747
Vue$3.$mount @ vue.runtime.esm.js?ff9b:7828
init @ vue.runtime.esm.js?ff9b:4026
createComponent @ vue.runtime.esm.js?ff9b:5478
createElm @ vue.runtime.esm.js?ff9b:5426
createChildren @ vue.runtime.esm.js?ff9b:5549
createElm @ vue.runtime.esm.js?ff9b:5454
patch @ vue.runtime.esm.js?ff9b:5943
Vue._update @ vue.runtime.esm.js?ff9b:2612
updateComponent @ vue.runtime.esm.js?ff9b:2740
get @ vue.runtime.esm.js?ff9b:3090
Watcher @ vue.runtime.esm.js?ff9b:3079
mountComponent @ vue.runtime.esm.js?ff9b:2747
Vue$3.$mount @ vue.runtime.esm.js?ff9b:7828
init @ vue.runtime.esm.js?ff9b:4026
createComponent @ vue.runtime.esm.js?ff9b:5478
createElm @ vue.runtime.esm.js?ff9b:5426
patch @ vue.runtime.esm.js?ff9b:5982
Vue._update @ vue.runtime.esm.js?ff9b:2612
updateComponent @ vue.runtime.esm.js?ff9b:2740
get @ vue.runtime.esm.js?ff9b:3090
Watcher @ vue.runtime.esm.js?ff9b:3079
mountComponent @ vue.runtime.esm.js?ff9b:2747
Vue$3.$mount @ vue.runtime.esm.js?ff9b:7828
Vue._init @ vue.runtime.esm.js?ff9b:4529
Vue$3 @ vue.runtime.esm.js?ff9b:4614
(anonymous) @ main.js?1c90:42
start @ quasar.esm.js?8bfb:368
(anonymous) @ main.js?1c90:40
(anonymous) @ app.js:825
__webpack_require__ @ app.js:638
fn @ app.js:48
(anonymous) @ app.js:730
__webpack_require__ @ app.js:638
(anonymous) @ app.js:684
(anonymous) @ app.js:687
vue.runtime.esm.js?ff9b:1695 TypeError: _vm._ssrClass is not a function
    at Proxy.render (Grounding.vue?788c:13)
    at VueComponent.Vue._render (vue.runtime.esm.js?ff9b:4433)
    at VueComponent.updateComponent (vue.runtime.esm.js?ff9b:2740)
    at Watcher.get (vue.runtime.esm.js?ff9b:3090)
    at new Watcher (vue.runtime.esm.js?ff9b:3079)
    at mountComponent (vue.runtime.esm.js?ff9b:2747)
    at VueComponent.Vue$3.$mount (vue.runtime.esm.js?ff9b:7828)
    at init (vue.runtime.esm.js?ff9b:4026)
    at createComponent (vue.runtime.esm.js?ff9b:5478)
    at createElm (vue.runtime.esm.js?ff9b:5426)

Ref: http://forum.quasar-framework.org/topic/1614/native-dependencies-in-electron-wrapper/10

So how can I use quasar + electron + native node modules together without getting it to crash?

@rstoenescu

This comment has been minimized.

Show comment
Hide comment
@rstoenescu

rstoenescu Dec 3, 2017

Member

This has already been dealt in the new starter kit for v0.15. It will be released along with it. GREAT improvements on it. Stellar dev experience. Release is planned for this month.

Member

rstoenescu commented Dec 3, 2017

This has already been dealt in the new starter kit for v0.15. It will be released along with it. GREAT improvements on it. Stellar dev experience. Release is planned for this month.

@rstoenescu rstoenescu closed this Dec 3, 2017

@steffanhalv

This comment has been minimized.

Show comment
Hide comment
@steffanhalv

steffanhalv Dec 3, 2017

@rstoenescu Great!

In the meantime, I got it to 'work' by disabling optimizeSSR in webpack conf without any errors, but now the css will not load :(

{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          postcss: cssUtils.postcss,
          loaders: merge({js: 'babel-loader'}, cssUtils.styleLoaders({
            sourceMap: useCssSourceMap,
            extract: env.prod
          })),
          optimizeSSR: false
        }
      },

Ref: vuejs/vue-loader#898

steffanhalv commented Dec 3, 2017

@rstoenescu Great!

In the meantime, I got it to 'work' by disabling optimizeSSR in webpack conf without any errors, but now the css will not load :(

{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          postcss: cssUtils.postcss,
          loaders: merge({js: 'babel-loader'}, cssUtils.styleLoaders({
            sourceMap: useCssSourceMap,
            extract: env.prod
          })),
          optimizeSSR: false
        }
      },

Ref: vuejs/vue-loader#898

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment