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

Related issue: https://github.com/electron/electron/issues/13402 — Stefan, Feb 15 '19 at 13:50

Hans Koch · Accepted Answer · 2019-07-29T13:58:36.367

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.

Thank you so much for the information. It helped me understand Electron just that much more and solve my problem :) — adviner, Jul 02 '18 at 04:31

score 8 · Answer 2 · edited Sep 16 '19 at 08:11

8

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>

edited Sep 16 '19 at 08:11

InQβ

518
4
22

answered Aug 04 '18 at 09:08

flcoder

713
4
14

1

I needed to remove the "www" join and add `.replace(/\/$/, '')`, but it seems to work fine, as long as one remembers to include `es6://` in the imports... – Brett Zamir Sep 24 '18 at 05:34
Could you update this to work after 5.0? https://github.com/electron/electron/blob/master/docs/api/protocol.md#methods – J.Todd May 04 '19 at 22:18
Was somebody able to register `file` via `registerSchemesAsPrivileged` to fix this? – hugo der hungrige Jul 07 '20 at 11:34

score 8 · Answer 3 · answered Jul 11 '19 at 17:06

8

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

answered Jul 11 '19 at 17:06

rob_james

1,262
1
12
17

2

That's TypeScript specific. – Armen Michaeli Feb 12 '20 at 13:37
@amn yep - might indeed be useful to those using TypeScript – rob_james Feb 13 '20 at 14:30

score 3 · Answer 4 · edited Jul 06 '19 at 14:07

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.

score 0 · Answer 5 · edited Apr 22 '19 at 08:07

0

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.

edited Apr 22 '19 at 08:07

marc_s

732,580
175
1,330
1,459

answered Apr 21 '19 at 07:30

Jochen Kühner

1,385
2
18
43

don't link out in a post, or an answer, unless the relevant code is also in the post itself. Answers should still be answers once your link goes dead. Also: explain your code in your post. If not, this isn't an answer, but a comment at best and should be posted as comment. – Mike 'Pomax' Kamermans Dec 31 '20 at 00:32

Electron ES6 module import

5 Answers5

Linked