Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Importing some native modules creates blank app, dev-tools disconnect

See original GitHub issue

I have read the contribution documentation for this project.
I agree to follow the code of conduct that this project follows, as appropriate.
I have searched the issue tracker for an issue that matches the one I want to file, without success.

I am trying to build a react app that uses native modules, namely: better-sqlite3.

Unfortunately there is no example how to build a real js or react app. So I bootstraped an app using ideas from this comment: https://github.com/electron-userland/electron-forge/issues/1164#issuecomment-532621940. You can find it here: https://github.com/barbalex/kapla5test

I have done:

npx create-electron-app kapla5test --template=webpack
yarn add react react-dom @babel/core babel-loader @babel/preset-env @babel/preset-react

Added babel-loader to webpack.renderer.config.js:

rules.push({
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: [{ loader: 'babel-loader' }]
})

added .babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

rendered jsx inside renderer.js:

import React from 'react'
import { render } from 'react-dom'

render(<div>hello world</div>, document.getElementById('root'))

altered index.html by adding <div id="root"></div>:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>

</head>

<body>
  <div id="root"></div>
  <h1>💖 Hello World!</h1>
  <p>Welcome to your Electron application.</p>
</body>

</html>

altered main.js from

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

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

Result: yarn start works as expected: Electron starts up, showing the expected html.

So I try to use a native module: yarn add better-sqlite3

yarn start still works fine.

I now import better-sqlite3 in renderer.js:

import React from 'react'
import { render } from 'react-dom'
import betterSqlite from 'better-sqlite3'

render(<div>hello world</div>, document.getElementById('root'))

Now, when I run yarn start the following happens:

The main process logs:

Hash: 01fb7c0047224da542ea
Version: webpack 4.41.0
Time: 288ms
Built at: 2019-10-08 12:43:46
       Asset      Size  Chunks                   Chunk Names
    index.js    33 KiB    main  [emitted]        main
index.js.map  38.1 KiB    main  [emitted] [dev]  main
Entrypoint main = index.js index.js.map
[./node_modules/debug/src/browser.js] 5.69 KiB {main} [built]
[./node_modules/debug/src/common.js] 5.79 KiB {main} [built]
[./node_modules/debug/src/index.js] 314 bytes {main} [built]
[./node_modules/debug/src/node.js] 4.37 KiB {main} [built]
[./node_modules/electron-squirrel-startup/index.js] 1 KiB {main} [built]
[./node_modules/has-flag/index.js] 320 bytes {main} [built]
[./node_modules/ms/index.js] 2.95 KiB {main} [built]
[./node_modules/supports-color/index.js] 2.71 KiB {main} [optional] [built]
[./src/main.js] 1.83 KiB {main} [built]
[child_process] external "child_process" 42 bytes {main} [built]
[electron] external "electron" 42 bytes {main} [built]
[os] external "os" 42 bytes {main} [built]
[path] external "path" 42 bytes {main} [built]
[tty] external "tty" 42 bytes {main} [built]
[util] external "util" 42 bytes {main} [built]

…which looks fine.

The renderer logs:

wait until bundle finished: /main_window
Asset written to disk: .webpack\renderer\main_window\index.html
Asset written to disk: .webpack\renderer\native_modules\build\integer.node
Asset written to disk: .webpack\renderer\native_modules\build\better_sqlite3.node
Asset written to disk: .webpack\renderer\main_window\index.js
Hash: cd75c20b932270669b69
Version: webpack 4.41.0
Time: 1914ms
Built at: 2019-10-08 12:43:48
                                   Asset       Size       Chunks             Chunk Names
                  main_window/index.html  285 bytes               [emitted]  
                    main_window/index.js   2.99 MiB  main_window  [emitted]  main_window
native_modules/build\better_sqlite3.node   2.06 MiB               [emitted]  
       native_modules/build\integer.node    532 KiB               [emitted]  
Entrypoint main_window = main_window/index.js
[0] multi ./src/renderer.js webpack-hot-middleware/client 40 bytes {main_window} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main_window} [built]
[./node_modules/better-sqlite3/lib/database.js] 2.67 KiB {main_window} [built]
[./node_modules/better-sqlite3/lib/index.js] 155 bytes {main_window} [built]
[./node_modules/better-sqlite3/lib/sqlite-error.js] 774 bytes {main_window} [built]
[./node_modules/html-entities/index.js] 231 bytes {main_window} [built]
[./node_modules/integer/lib/index.js] 1.44 KiB {main_window} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main_window} [built]
[./node_modules/react/index.js] 190 bytes {main_window} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {main_window} [built]
[./node_modules/webpack-hot-middleware/client.js] (webpack)-hot-middleware/client.js 7.68 KiB {main_window} [built]
[./node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js] (webpack)-hot-middleware/node_modules/strip-ansi/index.js 161 bytes {main_window} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB {main_window} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main_window} [built]
[./src/renderer.js] 1.05 KiB {main_window} [built]
    + 24 hidden modules
Child html-webpack-plugin for "main_window\index.html":
                     Asset     Size  Chunks  Chunk Names
    main_window/index.html  534 KiB       0  
    Entrypoint undefined = main_window/index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 428 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
Compiled successfully.

…which I think looks fine too

But the electron window remains white and the dev-tools disconnect.

What am I doing wrong?

Console output when you run electron-forge with the environment variable DEBUG=electron-forge:*. (Instructions on how to do so here). Please include the stack trace if one exists.

Sorry, I did not manage to get this working.

Please provide either a failing minimal testcase (with a link to the code) or detailed steps to reproduce your problem. Using electron-forge init is a good starting point, if that is not the source of your problem.

clone https://github.com/barbalex/kapla5test
cd into it
run yarn start
try with and without importing better-sqlite3 in renderer.js
watch console in electron

Issue Analytics

State:
Created 4 years ago
Comments:22 (5 by maintainers)

Top GitHub Comments

2reactions

barbalexcommented, Apr 27, 2020

Better yet, read https://jlongster.com/secret-of-good-electron-apps to get a better understanding of how to make Electron apps have a snappy UX

Wow

O.k., back to the drawing board. Time to power up 💪

Seems that what I was missing is not necessarily basic but it certainly is fundamental.

Thanks a lot, @deadcoder0904

2reactions

barbalexcommented, Oct 21, 2019

I will leave this issue open due to the fact that the working solution is a bit of a hack and it seems that there should be ways to achieve working with native dependencies more elegantly in electron-forge.

Top Results From Across the Web

Importing some native modules creates blank app, dev-tools ...

js. On Windows10 the app starts up happily. On MacOS it shows a blank page and dev-tools disconnect. EDIT: Nope, nan ...

Tips on solving 'DevTools was disconnected from the page ...

I've a problem with Electron where the app goes blank. i.e. It becomes a white screen. If I ...

How to Dynamically Import JavaScript with Import Maps

In this tutorial, you'll use import maps and JavaScript modules to import ... To start, in a new directory, create a blank HTML...

React Native development tools - Part 2: Debugging tools

In this tutorial, we will cover a couple of debugging tools which will help you uncover why your React Native app isn't working...

react-devtools | Yarn - Package Manager

react-devtools. This package can be used to debug non-browser-based React applications (e.g. React Native, mobile browser or embedded webview, Safari).