Nativefier: Trying to install an npm module returns an error

Created on 3 Jul 2016 · 12Comments · Source: jiahaog/nativefier

Description

Thanks for this tool! I'm trying to implement a spellchecker inside nativefier. I added some code and the concept of it all works pretty good.

The problem starts when I try to require a module inside mainWindow.js. I tried including several libraries in two formats:

Require

import fs from 'fs';
import path from 'path';
import electron from 'electron';
import windowStateKeeper from 'electron-window-state';
import helpers from './../../helpers/helpers';
import createMenu from './../menu/menu';
import initContextMenu from './../contextMenu/contextMenu';

const {BrowserWindow, shell, ipcMain, dialog} = electron;
const {isOSX, linkIsInternal, getCssToInject} = helpers;

/* MY CODE */

var SpellChecker = require('simple-spellchecker');
var myDictionary = null;

import

import fs from 'fs';
import path from 'path';
import electron from 'electron';
import windowStateKeeper from 'electron-window-state';
import helpers from './../../helpers/helpers';
import createMenu from './../menu/menu';
import initContextMenu from './../contextMenu/contextMenu';
import SpellChecker from 'simple-spellchecker'; // MY CODE

const {BrowserWindow, shell, ipcMain, dialog} = electron;
const {isOSX, linkIsInternal, getCssToInject} = helpers;

/* MY CODE */

var myDictionary = null;

Both return an error when I try to build the app using npm run dev-up

Steps to Reproduce Issue

cd app/
npm install --save simple-spellchecker
import the file inside mainWindow.js
(inside nativefier main folder) run npm run dev-up

Specifications

Version of Nativefier (run $ nativefier --version): v6.13.0
Version of Node.js (run $ node --version): v4.2.3
OS: OS X El Capitan
Architecture x64
Stack trace from the error message (if any)

> [email protected] dev-up /Users/neilkalman/Development/redkix-nativefier/nativefier
> npm install && (cd app && npm install) && npm run build

npm WARN package.json Dependency 'async' exists in both dependencies and devDependencies, using 'async@^1.5.2' from dependencies
npm WARN package.json Dependency 'lodash' exists in both dependencies and devDependencies, using 'lodash@^4.0.0' from dependencies
npm WARN package.json Dependency 'shelljs' exists in both dependencies and devDependencies, using 'shelljs@^0.5.3' from dependencies
npm WARN package.json Dependency 'tmp' exists in both dependencies and devDependencies, using '[email protected]' from dependencies
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data

> [email protected] build /Users/neilkalman/Development/redkix-nativefier/nativefier
> gulp build

[16:33:23] Requiring external module babel-register
[16:33:28] Using gulpfile ~/Development/redkix-nativefier/nativefier/gulpfile.babel.js
[16:33:28] Starting 'build'...
[16:33:28] Starting 'clean'...
[16:33:28] Finished 'clean' after 45 ms
[16:33:28] Starting 'build-cli'...
[16:33:28] Starting 'build-static-js'...
[16:33:28] Starting 'build-static-not-js'...
[16:33:28] Starting 'build-tests'...
[16:33:29] Finished 'build-static-not-js' after 683 ms
[16:33:29] Finished 'build-static-js' after 793 ms
[16:33:29] Starting 'build-static'...
[16:33:29] Finished 'build-static' after 17 μs
[16:33:29] Starting 'build-app'...
[16:33:29] Finished 'build-tests' after 1.29 s
[16:33:33] Version: webpack 1.13.1
      Asset     Size  Chunks             Chunk Names
    main.js  1.11 MB       0  [emitted]  main
main.js.map  1.33 MB       0  [emitted]  main

WARNING in ./app/~/simple-spellchecker/~/unzip/~/fstream/~/graceful-fs/fs.js
Critical dependencies:
11:12-19 require function is used in a way in which dependencies cannot be statically extracted
 @ ./app/~/simple-spellchecker/~/unzip/~/fstream/~/graceful-fs/fs.js 11:12-19

WARNING in ./app/~/simple-spellchecker/~/unzip/~/fstream/~/graceful-fs/package.json
Module parse failed: /Users/neilkalman/Development/redkix-nativefier/nativefier/app/node_modules/simple-spellchecker/node_modules/unzip/node_modules/fstream/node_modules/graceful-fs/package.json Unexpected token (2:10)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:10)
    at Parser.pp.raise (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
    at Parser.pp.unexpected (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8)
    at Parser.pp.semicolon (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1469:73)
    at Parser.pp.parseExpressionStatement (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1994:8)
    at Parser.pp.parseStatement (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1772:188)
    at Parser.pp.parseBlock (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:2009:21)
    at Parser.pp.parseStatement (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1753:19)
    at Parser.pp.parseTopLevel (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1666:21)
    at Parser.parse (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1632:17)
    at Object.parse (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
 @ ./app/~/simple-spellchecker/~/unzip/~/fstream/~/graceful-fs ^\.\/.*$

WARNING in ./app/~/simple-spellchecker/~/unzip/~/fstream/~/graceful-fs/LICENSE
Module parse failed: /Users/neilkalman/Development/redkix-nativefier/nativefier/app/node_modules/simple-spellchecker/node_modules/unzip/node_modules/fstream/node_modules/graceful-fs/LICENSE Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:4)
    at Parser.pp.raise (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
    at Parser.pp.unexpected (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8)
    at Parser.pp.semicolon (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1469:73)
    at Parser.pp.parseExpressionStatement (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1994:8)
    at Parser.pp.parseStatement (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1772:188)
    at Parser.pp.parseTopLevel (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1666:21)
    at Parser.parse (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1632:17)
    at Object.parse (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
    at Parser.parse (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/lib/NormalModule.js:104:16)
 @ ./app/~/simple-spellchecker/~/unzip/~/fstream/~/graceful-fs ^\.\/.*$

WARNING in ./app/~/simple-spellchecker/~/unzip/~/fstream/~/graceful-fs/README.md
Module parse failed: /Users/neilkalman/Development/redkix-nativefier/nativefier/app/node_modules/simple-spellchecker/node_modules/unzip/node_modules/fstream/node_modules/graceful-fs/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
    at Parser.pp.raise (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
    at Parser.pp.getTokenFromCode (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
    at Parser.pp.readToken (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
    at Parser.pp.nextToken (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
    at Parser.parse (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
    at Object.parse (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
    at Parser.parse (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/neilkalman/Development/redkix-nativefier/nativefier/node_modules/webpack-stream/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
 @ ./app/~/simple-spellchecker/~/unzip/~/fstream/~/graceful-fs ^\.\/.*$

WARNING in ./app/~/tap/~/only-shallow/index.js
Module not found: Error: Cannot resolve module 'buffertools' in /Users/neilkalman/Development/redkix-nativefier/nativefier/app/node_modules/tap/node_modules/only-shallow
 @ ./app/~/tap/~/only-shallow/index.js 14:24-46

WARNING in ./app/~/tap/~/deeper/index.js
Module not found: Error: Cannot resolve module 'buffertools' in /Users/neilkalman/Development/redkix-nativefier/nativefier/app/node_modules/tap/node_modules/deeper
 @ ./app/~/tap/~/deeper/index.js 14:21-43
[16:33:33] Finished 'build-cli' after 4.79 s
[16:33:33] Finished 'build-app' after 3.98 s
[16:33:33] Finished 'build' after 4.85 s

I'm probably importing this wrong... I see require function is used in a way in which dependencies cannot be statically extracted.

But I didn't see anything in the development wiki to say how to import things correctly.

thanks in advance!

Source

Thatkookooguy

Most helpful comment

Hmm, I've looked into this and you're importing the module correctly!

This problem seems to because of the unzip module dependency used by simple-spellchecker, with something to do with how the require function is used and preventing webpack from being able to recursively bundle all the app dependencies. This is somewhat mentioned in dcodeIO/protobuf.js#339, and I believe one of the dependencies of simple-spellchecker is the source of this problem.

Without going into too much detail, webpack is not exactly necessary when building the app, but the reason why I used it was as a workaround because there are issues when I try to publish nativefier to npm with nested node_modules directories when I want to maintain the same folder structure, as follows.

node_modules # <- contains dependencies required by the cli
app/node_modules # <- contains dependencies required for the placeholder app

From what I remember, npm consolidates all of these modules in the root node_modules directory, and hence I bundled the dependencies required by the app when publishing to npm as a pretty ugly workaround.

Having said that, it would probably be possible to use the same module you require, with some tweaking of the gulpfile to not use webpack to bundle the app. I could go into more detail regarding this if you wish though.

jiahaog on 3 Jul 2016

👍2 😄1

All 12 comments

Hmm, I've looked into this and you're importing the module correctly!

node_modules # <- contains dependencies required by the cli
app/node_modules # <- contains dependencies required for the placeholder app

jiahaog on 3 Jul 2016

👍2 😄1

I would appreciate it if you can :-)
Thanks

If I succeed, do you want me to open a pull request with this?
I can try and find a different hack to enable this

Thatkookooguy on 3 Jul 2016

Oh, and I will also appreciate if you know some way to debug the electron part of the wrapper (when I open the deveolper tools of the nativefier app, I can only access the actual site + the preload.js script)

Thatkookooguy on 3 Jul 2016

I was able to get something working. Now, I highlight words based on a dictionary (no suggestions yet). So, if a word isn't in the dictionary, it's marked as incorrect.

But I was unsuccessful in loading an actual dictionary. I removed unzip and tried to load an actual .dic file instead of a zip. inside a node.js script I was able to load the dictionary that way and everything worked.

But inside of nativefier, something went wrong and the dictionary wasn't loaded. I think it's because the code is being compiled and the relative path to the dictionary file should change. But that is just a guess.

Do you think it's a reasonable assumption? Any hints on why the file isn't found? I'm not sure I understand the gulp build script yet.

spellchecker

Thatkookooguy on 4 Jul 2016

Actually is electron/electron#942 relevant to implementing spell check? I believe the support is documented here. It'll be great if we could use the native electron api for the spell check! If this works, you won't have to mess around with the gulp files and all the building :D

jiahaog on 4 Jul 2016

I've also encountered the problem where it is difficult to debug the main electron process when the app is packaged. There's a helper function you can use here, which directs the output to the chromium inspector

jiahaog on 4 Jul 2016

Cool! Thx for the hints :-)

I am using the function you send. It's the provider in that function that needs a dictionary file to check. But maybe the library they recommended works in a way that will allow that. I'll try it out

And by saying "I've also encountered the problem where it is difficult to debug the main electron process when the app is packaged", are you applying that there's a way to debug it not compiled? Couldn't find a gulp command for that :-)

Thatkookooguy on 5 Jul 2016

Right... Haha I'm sorry, it's not exactly documented. If you have https://github.com/electron-userland/electron-prebuilt installed, you can run $ npm start and anything from the main process will appear in the terminal while the app is running (though it is not packaged). I'll have to add this into the dev documentation

jiahaog on 5 Jul 2016

I'm have this same issue, I'm new to js, and all these build tools. any way to get a complete solution to build the spell checker with electron?

RascoApps on 12 Sep 2016

I'm still working on it. I already have misspelled words marked with a red underline, but I still fight with suggestions in the context menu + I don't have a lot of time atm

I'll notify this issue as soon as I have something I can share

Thatkookooguy on 19 Sep 2016

Hi @Thatkookooguy, thanks for your investment into this! I'm closing this thread as part of an issue triage, but feel free to come back with questions anytime. Also, other users showed interest into a spellchecker in #283, maybe chime in there as people might be willing to help and hack on a solution :)

ronjouch on 21 Apr 2017

@ronjouch sure! I'll be happy to help anyone who wants to work on this. I kind of forgot about the whole spellchecker code. I'll try and go through it and see if it's easy to create a PR from it.

Thatkookooguy on 5 Dec 2017

Was this page helpful?

0 / 5 - 0 ratings