We Keep Coding

Unexpected identifier {classname} when I try to import a class

I get an "Unexpected identifier" error when I try to import a class.
I'm importing class this way:
Class to be exported (WindowManager)
export default class WindowManager {
sayHello() {
console.log('hello')
}
}
Class which imports (Main)
import WindowManager from './handlers/WindowManager';
WindowManager = new WindowManager();
WindowManager.sayHello()
Folder hierarchy
Class which imports (Main) > handlers > Class to be imported (WindowManager)
Extra info
Throws the error at this line of code (Main)
import WindowManager from './handlers/WindowManager.js';
I've looked into Unexpected Identifier {classname} when importing JavaScript Class into another Class and make changes and still nothing

I was able to fix this by migrating to TypeScript.
What is TypeScript?
TypeScript is JavaScript on steroids, basically. It adds types, private methods, etc. Also provides a compiler which compiles your TypeScript code into JavaScript code! So you don't have to worry about compatibilty, you write on TypeScript and then compile to JavaScript with a simple command.
How to install TypeScript?
npm install -g typescript
How to use TypeScript?
Enter your project folder (where package.json is);
Generate tsconfig.json by running tsc --init;
Create your TypeScript index file;
Run tsc on terminal to compile ALL TypeScript project files to JavaScript;
Notice that your index TypeScript file was compiled to JavaScript;
Use the compiled JavaScript file as the main entry point on package.json;
Start your app/website/whatever heheh.
Notes:
Everytime you make changes to TypeScript file you have to use tsc
to recompile the code and make the changes on the JavaScript file;
VS Code comes with TypeScript support, if you're using Atom you can install TypeScript package by following this tutorial: Installing atom-typescript package.
Happy coding!
Articles that helped me:
VS Code Tutorial
TypeScript and Electron
How to auto-generate TypeScript config json?
Why TypeScript? - YouTube video

Flow: Throws error Cannot resolve module "react-redux" even tho it's installed

Even tho module is installed and it exists, Flow cannot resolve it and throws error.
See below:
1) Inside bash I ran flow and it throws error that module is not found
user#pc:~/code/project$ flow
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/functionalities/Growth/index.js:3:25
Cannot resolve module react-redux.
1│ // #flow
2│ import React from "react"
3│ import { connect } from "react-redux"
4│
5│ type Props = {
6│ children: Function
Found 1 error
2) Below command checks whether directory exists and it does
user#pc:~/code/project$ ls node_modules | grep react-redux
react-redux
I tried to remove and reinstall both node_modules directory and yarn.lock file.
Versions should be matching:
flow version
Flow, a static type checker for JavaScript, version 0.77.0
.flowconfig:
[version]
0.77.0
This is very likely bug with Flow, I also submitted issue.

How to fix it
You have two options:
stub the dependency by hand
bring in flow-typed to find the dependency type
file/stub it for you
I use option 2 but it is nice to know what is happening underneath
Option 1
In .flowconfig, add a directory under [libs],
...
[libs]
/type-def-libs
...
Now, create that directory at your project root and a file /type-def-libs/react-redux which contains,
declare module 'react-redux' {
declare module.exports: any;
}
Option 2
install flow-typed, if using yarn yarn add -D flow-typed
I prefer to install every locally to the project when possible
run yarn flow-typed install
this will install any type definition files for modules that it finds AND it will stub any modules it doesn't find, which is similar to what we did in option 1
Why is this error happening
Flow is looking for the type definition for the module you are importing. So while the module does exist in /node_modules that module doesn't have a type definition file checked into its code.

I had the same issue as you.
I resolved it by using flow-typed
I did the following:
Install flow-typed globally. example: $ npm install -g flow-typed
Then inside your project root folder, run $ flow-typed install react-redux#5.0.x
• Searching for 1 libdefs...
• flow-typed cache not found, fetching from GitHub...
• Installing 1 libDefs...
• react-redux_v5.x.x.js
└> ./flow-typed/npm/react-redux_v5.x.x.js
react-redux
You should see this if the install was successful.
Then try running flow again $ npm run flow in your project. The error with react-redux will no longer be there.

Alternative solution (for some cases)
Check your .flowconfig and remove <PROJECT_ROOT>/node_modules/.* under the field [ignore] (in case you have it there).
UPDATE 1 (by arka):
Or you can add !<PROJECT_ROOT>/node_modules/react-redux/.* after <PROJECT_ROOT>/node_modules/.*. This will ignore all the modules except for react-redux.
Thanks to #meloseven who solved it here.

I checked my package.json file and noticed react-redux was missing. I manually added it to the dependencies "react-redux": "x.x.x" and ran npm install thereafter. Note that the version number should be compatible with the other modules.

Please ensure that you provide the path under 'ignore' in .flowconfig, like this:
[ignore]
.*/node_modules/react-native/Libraries/.*
and not like this:
.*/node_modules/react-native/Libraries/Components
.*/node_modules/react-native/Libraries/Core
....

Webpack / NPM: Use build version of installed module instead of re-building from source

I would like to use the dat.GUI library for a project that's build with Webpack 2. If I install the module via npm -install --save-dev dat.gui and then try to import it using import * as DAT from 'dat.gui'; I get the following error when Webpack is trying to compile my project:
ERROR in ./~/dat.gui/src/dat/controllers/NumberControllerSlider.js
Module not found: Error: Can't resolve 'style' in
'/home/me/myProject/node_modules/dat.gui/src/dat/controllers'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix
when using loaders.
I know this error occurs when using Webpack 2 to build Webpack 1 based projects. But why is Webpack even trying to build the module if there already is a build version inside node_modules/dat.gui/build';? Is there a way to tell Webpack or NPM to use the existing build version without trying to re-build it?

When importing a node module, webpack looks into its package.json and uses the main field as entry of the module, similar to what Node.js does (webpack looks for more fields by default, see resolve.mainFields).
Since for dat.gui the main field does not point to the built version but to the source, which actually inlines loaders as seen in dat.gui#0.6.1 - NumberControllerSlider.js for the styleSheet import, and that is not a good idea in general and certainly not to publish.
But you can import the built version by specifying the corresponding path. So your import would be:
import * as DAT from 'dat.gui/build/dat.gui.js';
If you'd like to still import just dat.gui you can configure resolve.alias to point to the built version as follows:
resolve: {
alias: {
'dat.gui': 'dat.gui/build/dat.gui.js'
}
}
With that you can use your original import statement:
import * as DAT from 'dat.gui';

How to import Tesseract into Angular2 (TypeScript)

I'm trying to import Tesseract into Angular2 (TypeScript). I can see it saved into the node_modules folder but when using
import { Tesseract } from '#types/tesseract.js';
it says:
[ts] Module '"c:/Users/black/Projects/projectCLI/tess/node_modules/#types/tesseract.js/index"' has no exported member 'Tesseract'.
In the index.d.ts file there is a namespace called Tesseract.
Is there some other way to import this or are we looking at this the wrong way?
I used npm install --save-dev #types/tesseract.js to install typescript Tesseract.
If there are any demo tutorials using tesseract can you please link them here?
thanks, in advance, for your help.

You need to install the actual javascript module:
npm install tesseract.js --save
Also install #types declarations:
npm install #types/tesseract.js --save-dev
Finally do the folowing to import:
import * as Tesseract from 'tesseract.js'
To use the library check here
The #types command saves this type declaration file.
This is a namespace and all the contents of the actual module are declared within.When you do import * as aliasname from tessreact.js, you can use all the functions within the namespace as aliasname.functionname. Example is the test file for the same type declaration file.

How to import nools with es6 and webpack

I want import nools in my project with webpack, and I try in 2 steps :
1) install nools with npm :
npm install nools --save
2) import nools in to the project :
import "../node_modules/nools";
webpack give me this error :
Can not resolve 'fs'
and solve this error with add this code to webpack.config.js
target:node
and webpack build without any error , but when start my project with npm start ,browser console give me this error :
require is not defined
my problem is how to import nools with webpack

It looks like nools needs the fs module to read a file from disk if a file path (rather than the source string itself) is passed to nools.compile().
Assuming your browser-based usage of nools in your webpack project never passes a *.nools string to nools.compile(), then fs.readFileSync() is never called, so you can force webpack to resolve require('fs') to an empty object by adding this to your webpack config:
node: {
fs: 'empty'
}
See webpack's documentation of the node options: 1.x / 2.x