SimulatedGREG/vue-electron

Cannot find module "fs"

joedawson opened this issue · 5 comments

Hey,

When I try and use, I seem to get the following error:

Cannot find module "fs"

Here's my code:

import Vue         from 'vue';
import VeeValidate from 'vee-validate';
import VueElectron from 'vue-electron';
import { sync }    from 'vuex-router-sync';

import App         from './components/App.vue';
import store       from './store';
import router      from './router';

Vue.use(VeeValidate);
Vue.use(VueElectron);

sync(store, router);

const app = new Vue({
	el: '#app',
	router,
	store,
	template: '<App/>',
	components: { App }
});

In my root component (App.vue), I'm just trying to log the current version of my app.

mounted: function() {
    console.log(this.$electron.remote.app.getVersion());
},

I'm using webpack to compile my app.

Any ideas? Thanks in advance.

@joedawson

Make sure to have your webpack's target set to electron-renderer so the node specific modules are exposed properly.

Hey @SimulatedGREG,

Thanks for your reply. I've added this to my config, but I appear to be seeing this error now:

This relative module was not found:

  • ./package in ./~/got/index.js

I'm using https://github.com/JeffreyWay/laravel-mix as wrapper for Webpack, it just made it easier to get going with Webpack.

So my webpack.mix.js looks like this:

const { mix } = require('laravel-mix');

mix.js('src/js/app.js', 'app/assets/js')
   .sass('src/sass/app.scss', 'app/assets/css').options({
      processCssUrls: false
   });

mix.webpackConfig({
    target: "electron-renderer"
});

Do you have any idea why I might be getting this? If not, do you have an easy way to for me to simple compile my Vue and SaSS?

Thanks!

@joedawson Sorry for late reply.

I'm assuming this setup is using vue-loader so you should be able to just install node-sass and sass-loader in your project and use the lang="scss" on your <style> tags. From there you can @import your Sass files. https://vue-loader.vuejs.org/en/configurations/pre-processors.html for more info.

Going to close this since it isn't directly related to vue-electron. Feel free to comment back if needed.

I think it's better to add note on vue-electron's readme, with someting like:
Note: Webpack config field target should be set to electron-renderer if you create the vue project yourself.