CODEWITHSUNDEEP
javascriptwebpackelectron
RuteNL
RuteNL

Reputation: 327

Webpack how to require .node file (To use the WebChimera.js package in Vue Electron)

I'm trying to include a VLC video playing in my Electron app, which is possible through WebChimera.js. This package is distributed a bit weirdly (to me at least), to use it you need to require wcjs-prebuilt, specify some settings in package.json and configure Webpack to allow importing .node files as explained in this Wiki page for WebChimera.js.

However I believe this Wiki page is outdated, as loaders isn't a valid key anymore in a Webpack config. I'm not very experienced using Webpack so most of this is new to me. Also note that this Wiki explanation used a fork of node-loader, although this fork seems to be merged to the actual node-loader now (?).

I now use this Webpack config:

    target: 'node',
    node: {
        __dirname: false,
    },
    module: {
        rules: [
            {
                test: /\.node$/,
                loader: 'node-loader',
            },
        ],
    },
    externals: [
        'wcjs-prebuilt',
    ],

Because that's how the Webpack page for node-loader seems to do it. However this doesn't work for me, as now I get the error: Uncaught ReferenceError: exports is not defined in the chunk-vendors.js:1 file. Which probably means it's trying to use require syntax somewhere it shouldn't, but I have no idea how to proceed here. This error still occurs in an otherwise empty vue-electron project (template here), when I comment out all WebChimera related code. WebChimera code I use for testing in this project (Right now I'm just trying to get it to work):

const wcjs = require("wcjs-prebuilt");
console.log(wcjs)

When I remove the webpack config I showed above, the error about exports is not defined goes away, which is why I believe it's something in my webpack config rather than my code causing that error.

Long story short, I want to know how configure webpack to allow me to import or a require a .node file.

Upvotes: 0

Views: 417

Answers (2)

dbussert
dbussert

Reputation: 21

I'm able to get vue electron building with wcjs-prebuilt using a vue.config.js like this. You will also need to set the VLC_PLUGIN_PATH correctly or video won't play.

module.exports = {
    configureWebpack: {
        externals: {
            'wcjs-prebuilt': 'commonjs wcjs-prebuilt'
        },
    },
    chainWebpack: (config) => {
        config.module
            .rule('node')
            .test(/.node$/i)
            .use('node-loader')
            .loader('node-loader')
            .end()
    },
    pluginOptions: {
        electronBuilder: {
            externals: ['wcjs-prebuilt']
        }
    }
}

Upvotes: 2

RuteNL
RuteNL

Reputation: 327

Since posting the question I've switched to mpv.js for video playback so this isn't an issue for me anymore. However after posting this question I experimented a lot, after I finally got it working in Webpack somehow (see first link below), it worked for me but with distorted video. The node file added some properties to an array which Webpack somehow stripped away, causing some missing values in the video renderer. I fixed that by forking WebChimera and editing the C++ code so that the values weren't added as properties but as separate values.

I ended up forking WebChimera.js, wcjs-prebuilt, wcjs-renderer, and libvlc_wrapper to get VLC to finally work with Webpack+Electron, all that probably wasn't necessary but oh well..

Links for whoever might be interested:

https://github.com/RuurdBijlsma/vlc-video-demo (working demo project featuring VLC in an Electron+Webpack+Vue project.)

https://github.com/RuurdBijlsma/libvlc_wrapper

https://github.com/RuurdBijlsma/wcjs-renderer

https://github.com/RuurdBijlsma/WebChimera.js

https://github.com/RuurdBijlsma/wcjs-prebuilt

Upvotes: 1

Related Questions