leo/electron-next

Build Electron apps using Next.js

electron-next's Issues

Minimize transpilation of async functions

With the default Next.js Babel settings, async functions are transpiled to generators, which are further translated to Regenerator. This makes debugging more awkward than it needs to be.

I can't figure out how to disable this behavior with Next.js's Babel and Webpack configurations (see also this Stack Overflow question). But it seems like this sort of change would be useful for most people using electron-next, since the JS runtime support needs are tightly targeted for a pure Electron app.

extending webpack config

Not entirely an issue but not obvious from the docs so pardon my ignorance, how do I extend the webpack config for dev/prod builds.

export contol about electron-next

I try to incorporate electron-next to our product.
For export control, I have to confirm whether Japan/US export restrictions are applied to electron-next or not.
Therefore, can I have receive your support about followings?

• Is encryption technology used in electron-next? If the answer to this question is yes, please describe how this technology is used.
• Is there some certification of US restrictions (EAR)?
  　(If electron-next is not US origin, certification for that is enough. the description in this issue is OK.)

Thank you in advance for your cooperation.

Electron Security Warning

Thanks for creating this! I followed the walkthrough blog post and when I run the app in development mode (npm start) and open the console from inside the app, I see this warning:

I think this is being triggered by the live reload parts of NextJS—so I think this is more of a false-flag warning, but I would like to not just get in the habit of ignoring that warning since it would be useful to know if I accidentally introduced a security hole by loading external content outside of a ` in my actual app.

I tried turning off nodeIntegration since I don't need it for my app, like this:

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { nodeIntegration: false},
  })

But that just got me a full-blown error in the console:

Any ideas on how to get the hot reload to run locally so this warning is not triggered and/or so we could run with nodeIntegration: false?

electron-builder config file

I suppose you are not aware that you can provide config file for electron-builder :)

Please see how is it implemented in electron-webpack:

• file https://github.com/electron-userland/electron-webpack/blob/master/packages/electron-webpack/electron-builder.yml included into the module
• user can use it as "extends": "electron-webpack/electron-builder.yml"

But actually electron-builder detects electron-webpack and automatically set extends. If you will add such base electron-builder file, I can support electron-next to automatically set extends in the same way.

electron-redux

electron-next cannot work with electron-redux

TypeError: Cannot read property 'on' of undefined (server compilation)

Seems like some functions are not available on server...

Run renderer-specific code?

How might I be able to run renderer-specific code, similar to https://github.com/ourcodeworld/electron-examples/blob/master/examples/electron-folderandfilewatcher/index.html ?

Disables all main process errors

When including, "await prepareNext('./renderer')", all errors that typically appear in Electron main's error pop up no longer appear. Rather the Electron process just exits and gives no information regarding the error.

For example,

require('../invalid/file/path.json')

That code in electron's main would just flat out exit the app and the console says there was a lifecycle error. The error log it gives does not help. When removing "await prepareNext('./renderer')", I can read the error just fine from Electron's error pop up window.

neutron windows build

bundle didn't work for me, and I found it has been moved to neutron which doesn't have a whole lot of information available, but looks really awesome, and worked out of the box for me for the mac version which is great 👍 I think it's gihub repo is probably still private, so I can't raise an issue there, so I'm asking here :)

When I run neutron build, I only get a mac version out, how to build a windows version?

Electron app freezes quickly after launching on Ubuntu 18.04

I recently upgraded from Ubuntu 16.04 to Ubuntu 18.04 (fresh install), and after this my app freezes shortly after launching it for some reason when running through npm start.

• The app is based on the electron-next skeleton
• It is using Electron 2.0.0
• Running ELECTRON_ENABLE_LOGGING=true npm start didn't give any special messages

I noticed that if I run the program with the VS Code debugger, that seemed to run the app without electron-next (pages didn't get built), everything worked correctly and the app didn't freeze. That's why I believe the problem is on electron-next's side.

Please tell me if you need more information.

Here for reference the important parts of my package.json:

{
  "name": "app",
  "version": "2.0.0",
  "description": "app",
  "main": "main/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build": "next build renderer && next export renderer",
    "dist": "npm run build && echo \"Generate setup\""
  },
  "devDependencies": {
    "axios": "~0.18.0",
    "electron": "^2.0.0",
    "next": "^6.0.2",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-form": "^3.5.5"
  },
  "dependencies": {
    "app-root-path": "^2.0.1",
    "electron-is-dev": "^0.3.0",
    "electron-next": "^3.1.4"
  }
}

"TypeError: Cannot read property 'send' of undefined" when running next export

When I run electron . the app works perfectly, however when I run next build renderer && next export renderer (specifically the next export command) I get the following log:

Note: all of my client code lives in /renderer

[00:22:52] Compiling client
[00:22:52] Compiling server
[00:22:52] Compiled server in 792ms
[00:22:55] Compiled client in 4s
> using build directory: D:\klipped\renderer\.next
  copying "static build" directory
> exporting path: /start
> exporting path: /file
TypeError: Cannot read property 'send' of undefined
    at D:\klipped\renderer\.next\server\static\lXCFzg2cjgmkVrnUKjqkQ\pages\file.js:358:39
    at new Promise (<anonymous>)
    at resolveFilePath (D:\klipped\renderer\.next\server\static\lXCFzg2cjgmkVrnUKjqkQ\pages\file.js:357:10)
    at Function._callee$ (D:\klipped\renderer\.next\server\static\lXCFzg2cjgmkVrnUKjqkQ\pages\file.js:307:24)
    at tryCatch (D:\klipped\node_modules\regenerator-runtime\runtime.js:62:40)
    at Generator.invoke [as _invoke] (D:\klipped\node_modules\regenerator-runtime\runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (D:\klipped\node_modules\regenerator-runtime\runtime.js:114:21)
    at asyncGeneratorStep (D:\klipped\renderer\.next\server\static\lXCFzg2cjgmkVrnUKjqkQ\pages\file.js:228:103)
    at _next (D:\klipped\renderer\.next\server\static\lXCFzg2cjgmkVrnUKjqkQ\pages\file.js:230:194)
    at D:\klipped\renderer\.next\server\static\lXCFzg2cjgmkVrnUKjqkQ\pages\file.js:230:364

Export successful

Here's my code:

next.config.js

exports.webpack = config => Object.assign(config, {
  target: 'electron-renderer'
})

exports.exportPathMap = () => ({
  '/start': { page: '/start' },
  '/file': { page: '/file', query: { data: null, name: null } }
})

file.js

import { ipcRenderer } from 'electron'
import { Component } from 'react'
import { FileDraggable } from '../components/file-draggable'
import Error from 'next/error'

export default class File extends Component {
  static async getInitialProps ({ query }) {
    let filePath

    try {
      if (query.name) {
        filePath = await resolveFilePath({ data: query.data, name: query.name })
      } else {
        filePath = await resolveFilePath({ data: query.data })
      }
    } catch (err) {
      console.error(err)
      return { error: 'Failed to save file.' }
    }

    return { filePath, data: query.data, name: query.name }
  }

  render () {
    return this.props.error
      ? <Error statusCode={500} /> // TODO: Custom error component
      : <FileDraggable filePath={this.props.filePath} name={this.props.name} />
  }
}

function resolveFilePath ({ data, name }) {
  return new Promise((resolve, reject) => {
    ipcRenderer.send('data', { data, name })
    ipcRenderer.on('file', (_, filePath) => resolve(filePath))
    ipcRenderer.on('error', err => reject(err))
  })
}

Potential bug with .next/BUILD_ID

Hey @leo, thank you for your efforts to make building Electron apps with Next.js simpler! I've followed along with the blog post and skeleton app and have everything working locally, but when I run next build renderer && next export renderer as instructed, I get this error: no such file or directory, open '{myAppDir}/renderer/.next/BUILD_ID':

Is this a bug with how electron-next exports? I'm using this next.config.js:

Here is my project: https://github.com/trevordmiller/hideaway. This issue can be reproduced by cloning it and running npm install && npm run build

Unable to use electron from renderer

Hi,

When importing electron for the renderer :

import electron from "electron";

I get this error :

Module not found: Can't resolve 'fs' 

Did I miss something in the config ?

I checked an old issue that suggested to use target="electron-target" but its outdated. Also, the now-desktop app doesn't use electron in the renderer (e.g. for opening links in default browser).

Cannot read property 'getPath' of undefined

Hi,

First I have to say thanks for the plugin.

I'm creating an app by using your example.
I need to store some files in \AppData\Local\ by using the app.getPath() function from electron.

However, after running the code, the file is created but the browser shows an error saying: "An unexpected error has occurred." and the console says: Cannot read property 'getPath' of undefined

Do I'm doing something wrong?

Thanks

Edit: delete pls

EDIT: delete

<webview> preload doesn't take path relative to app folder

Hi all,

The error is the following when using preload="./myFile.js":

Only "file:" protocol is supported in "preload" attribute.

I don't know where to put myFile.js 😭 for work fine both dev and prod.

Error: "Can't resolve 'fs'"

I'm getting this error when using https://github.com/leo/electron-next-skeleton

Should the skeleton next.config.js have a target of electron-renderer?

Here is my repo: https://github.com/trevordmiller/hideaway. Can be reproduced by cloning and running npm install && npm run dev.

using electron associated modules that can't be renderered in the server

HI,

I am trying to use the electron redux module which allows communication between the main and renderer thread using redux but it breaks because next tries to ssr it all other redux middlewares. Any idea on the best way to approach this?

I know next.js doesn't allow us the option to disable ssr and I tried to use React noSSR module but I couldn't get it to work too

So, what would be the best way to approach this?

using with electron-forge

How to use this package with electron forge since the main and renderer are in the src directory.
Thanks.

Error with uglify & commonjs while building

I am trying to build the app I have worked on but keep on getting error while building and not exactly sure where the main issue lies. Any idea on what's going wrong here?

{ Error: commons.js from UglifyJs
Unexpected character '`' [commons.js:41299,37]
    at /Volumes/macHome/wahmed/Workspaces/coding/Projects/Phonic/node_modules/next/dist/server/build/index.js:182:21
    at emitRecords.err (/Volumes/macHome/wahmed/Workspaces/coding/Projects/Phonic/node_modules/next/node_modules/webpack/lib/Compiler.js:269:13)
    at Compiler.emitRecords (/Volumes/macHome/wahmed/Workspaces/coding/Projects/Phonic/node_modules/next/node_modules/webpack/lib/Compiler.js:375:38)
    at emitAssets.err (/Volumes/macHome/wahmed/Workspaces/coding/Projects/Phonic/node_modules/next/node_modules/webpack/lib/Compiler.js:262:10)
    at applyPluginsAsyncSeries1.err (/Volumes/macHome/wahmed/Workspaces/coding/Projects/Phonic/node_modules/next/node_modules/webpack/lib/Compiler.js:368:12)
    at next (/Volumes/macHome/wahmed/Workspaces/coding/Projects/Phonic/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (/Volumes/macHome/wahmed/Workspaces/coding/Projects/Phonic/node_modules/next/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/Volumes/macHome/wahmed/Workspaces/coding/Projects/Phonic/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/Volumes/macHome/wahmed/Workspaces/coding/Projects/Phonic/node_modules/next/node_modules/webpack/lib/Compiler.js:365:9)
    at require.forEach.err (/Volumes/macHome/wahmed/Workspaces/coding/Projects/Phonic/node_modules/next/node_modules/webpack/lib/Compiler.js:360:15)
  errors: [ 'commons.js from UglifyJs\nUnexpected character \'`\' [commons.js:41299,37]' ],
  warnings: [] }

Custom routes in Nextjs

Hi,

There is a way how to implement custom routes (e.g https://github.com/zeit/next.js/tree/master/examples/custom-server-express) by using your plugin?

Or some easy hack how to do it?

Many thanks.

Next@6 breaks dist build

In a dist build the main.js file cannot be loaded.

Next@6 creates the main.js file under _next/static/commons. Therefore the file protocol interception path replacement matches twice, resulting in an invalid path to main.js.

A break after the first match fixes the issue for me: zawupf@d92fd0e

Lib Renewed

I forked and re-released renewed TS version of the package: https://gitlab.com/guildplanner.pro/electron-next

Already using on my app. Please post your issues on GitLab. Enjoy!

Not allowed to load local resource.

First of all, thank you for your efforts. I had success when following your recent article until taking it to production.

My resulting distribution had no window content. I enabled developer tools and found this error:

I have made a repo for my test of electron-next. Here is the issue on my repo.

Authentication Tokens in electron-next

Generally in next.js it's best practice to store authentication tokens in cookies so that the token can be read in both the server and client for SSR (e.g. in getInitialProps). Since electron doesn't support cookies in the renderer process - what would be the best way to keep track of auth tokens (and persist them between sessions)?

In now-desktop, it seems like a config in the main process is used and then electron remote is used to communicate with the config. Is there a more simple best practice than this?

Can't get drag and drop out of electron working with electron-next

Hey, I cannot get d&d working with electron-next. Here is a minimal repo based on next.js's example. It doesn't work both when I run it in dev and when I run it from a distributable.
When I drag an image out of the app it doesn't show any cursor and nothing happens when I release the mouse.

At the same time I was able to get it working with electron quick start example, here is my repo for that.

I believe the issue might be related to electron-next. How can I debug this?

Not allowed to load local resource

When I build the app to production this error is showed on console.

Static files inside the "public" next js folder not being processed correctly.

Hello, i noticed that if you have images or fonts under the "public" folder it doesn't get added to the electron-next path processing.

I suggest that electron-next accepts a list of folders to be transformed as "file://" while instantiating it .