Electron ES6 module import

Question

Electron 3.0.0-beta.1 Node 10.2.0 Chromium 66.0.3359.181

The problem I'm having is importing a module. I created the following protocol:

protocol.registerFileProtocol('client', (request, callback) => {
    var url = request.url.substr(8);
    callback({path: path.join(__dirname, url)});
});

The output of the protocol is the correct path

"/Users/adviner/Projects/Client/src/ClientsApp/app.js"

I have the following module app.js with the following code:

export function square() {
    return 'hello';
}

in my index.html I import the module like so:

    <script type="module" >
        import square from 'client://app.js';
        console.log(square());
    </script>       

But I keep getting the error:

app.js/:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

I'm done searches but can't seem to find a solution. Can anyone suggest a way I can make this work?

Thanks

Answer 1

Quick Solution:

const { protocol } = require( 'electron' )
const nfs = require( 'fs' )
const npjoin = require( 'path' ).join
const es6Path = npjoin( __dirname, 'www' )

// <= v4.x
// protocol.registerStandardSchemes( [ 'es6' ] )

// >= v5.x
protocol.registerSchemesAsPrivileged([
  { scheme: 'es6', privileges: { standard: true } }
])

app.on( 'ready', () => {
  protocol.registerBufferProtocol( 'es6', ( req, cb ) => {
    nfs.readFile(
      npjoin( es6Path, req.url.replace( 'es6://', '' ) ),
      (e, b) => { cb( { mimeType: 'text/javascript', data: b } ) }
    )
  })
})

<script type="module" src="es6://main.js"></script>

Answer 2

This is a tricky question and i will refer to Electron#12011 and this GitHub Gist for a deeper explaination but the core learning is that the corresponding HTML spec, disallows import via file:// (For XSS reasons) and a protocol must have the mime types defined.

The file protocol you use client:// has to set the correct mime-types when serving the files. Currently i would guess they are not set when you define the protocol via protocol.registerBufferProtocol thus you recive a The server responded with a non-JavaScript MIME type of "", the gist above has a code sample on how to do it.

Edit: I just want to emphasize the other answers here do only cover the absolute minimum basics implementation with no consideration of exceptions, security, or future changes. I highly recommend taking the time and read trough the gist I linked.

Answer 3

Based on flcoder solution for older Electron version.

Electron 5.0

const { protocol } = require('electron')
const nfs = require('fs')
const npjoin = require('path').join
const es6Path = npjoin(__dirname, 'www')

protocol.registerSchemesAsPrivileged([{ scheme: 'es6', privileges: { standard: true, secure: true } }])

app.on('ready', async () => {
  protocol.registerBufferProtocol('es6', (req, cb) => {
    nfs.readFile(
      npjoin(es6Path, req.url.replace('es6://', '')),
      (e, b) => { cb({ mimeType: 'text/javascript', data: b }) }
    )
  })
  await createWindow()
})

Attention! The path always seems to be transformed to lowercase

<script type="module" src="es6://path/main.js"></script>

Sorry Viziionary, not enough reputation to answer the comment.

Answer 4

I've now done it like this:

https://gist.github.com/jogibear9988/3349784b875c7d487bf4f43e3e071612

my problem was, I also wanted to support modules which are imported via none relative path's, so I don't need to transpile my code.

Answer 5

To confirm: this is there for security reasons.

However, in the event that you just need to get it deployed:

Change "target": "es2015" to "target": "es5" in your tsconfig.json file