Help: error porting react/webpack/uikit app to electron


#1

Hi guys, I’ve some small problems trying to convert a project to electron, I’m gonna try to be the most specific possible, my html looks like

<html>
  <head>
    <title>DNS Changer</title>
  </head>
  <body>
    <div id='root'>
    </div>
    
       <script src="src/bower_components/jquery/dist/jquery.js"></script>

       <script src="src/bower_components/uikit/js/uikit.js"></script>
       <script src="dist/bundle.js"></script>


  </body>
</html>

and my webpack loolks like


var path    = require('path');
var webpack = require('webpack');


var PROD = false;

module.exports = {
    devtool: 'eval',
    entry  : PROD ? [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/index'
    ] :
        ['./src/index'],

    output : {
        path      : path.join(__dirname, 'dist'),
        filename  : 'bundle.js',
        publicPath: '/static/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    module : {
        loaders: [

            {
                test  : /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
                loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
            },

            {
                test   : /\.js$/,
                loaders: ['react-hot', 'babel'],
                include: path.join(__dirname, 'src')
            }]
    }
};

I’ve several problems here,

  1. seems exist a problem with fontawesome, when I run outside electron works fine but inside electron I get this error
GET file:///static/fontawesome-webfont-4b5a84aaf1c9485e060c503a0ff8cadb.woff2 net::ERR_FILE_NOT_FOUND

I notice than the requested file try to be solved from a relative path

####Request URL:file:///static/fontawesome-webfont-7c87870ab40d63cfb8870c1f183f9939.ttf

where the other files are loaded from a global path like

####Request URL:file:///home/netquatro/Downloads/projectos/pinApp/react-hot-boilerplate/src/bower_components/…

my webpack/electron knowledge is very poor, so I don’t know how solve/configure this for take the full path or any other solution

  1. my second issue is about jquery/uikit, uikit needs jquery, when I run on my own server the code works fine because the dependencies are correctly ordered

       <script src="src/bower_components/jquery/dist/jquery.js"></script>

       <script src="src/bower_components/uikit/js/uikit.js"></script>
       <script src="dist/bundle.js"></script>

   

but with electron seems exist a problem, the uikit components than requires jquery seems doesnt works, for instance, the modal never apper,

in my entry javascript file I did this

window.jQuery = window.$ = require('jquery');

var jQ = window.$;

and I can call jquery perfectly from my code, but seems exist a problem when jquery is called from uikit.js

thank so much, I hope than you can understand my questions and help, I’ll appreciate any suggerence, thank so much!..


#2

For #1 you could try changing publicPath to:

`${__dirname}/static/`

#3

You should make sure the window.jQuery = ... runs before you include uikit.js. I think the reason you need the line is because javascript runs in a node context by default, which means that a module object is available. jQuery checks for this module object and if it’s present it will set module.exports = $ instead of window.$ = $. Since you need the window.$ = require('jquery') anyway, you can just remove the <script src="jquery"> because the function it exports is never used.


Uncaught TypeError: Cannot read property 'on' of undefined error when use raphael js in Electron