Cannot import winnow in a React.js project

[lea-lp]

Hi,

I would like to use winnow package in a React.js app. I face some problems while importing the module.

TS module

Informative message (triggered by ESLint)

Could not find a declaration file for module 'winnow'. '/home/lealp/Documents/Projects/odyssee/front/node_modules/winnow/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/winnow` if it exists or add a new declaration (.d.ts) file containing `declare module 'winnow';`ts(7016)

Alright, let's try this : yarn add --dev @types/winnow fails, so I followed the next option. A winnow.d.ts file was created at root directory.

It seems to work, but i'm not sure if I import this module correctly. I tried different import declarations

import winnow from 'winnow';
import * as winnow from 'winnow';
import { querySQL } from 'winnow';
const winnow = require('winnow');
const winnow = require('<absolutePath>/winnow/index.js');
const querySQL = require('<absolutePath>/winnow/index.js').querySQL;

Which one is adapted ?

Node loader

Main problem : .node file loader. Compiling fails.

Failed to compile.

./node_modules/farmhash/build/Release/farmhash.node 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

I configured webpack.config.js as recommended (with this tutorial), nothing changed. Then I realized this kind of configuration is only available for a specific type of applications : Electron.

So... I would like to know if there's an easy way to import winnow package in a React.js app ?

Thanks !

[haoliangyu]

winnow is not ready to be used in the browser. It is using node-specific code like process.env (examples).

I can add a type definition file in the repo so this library can be used in Typescript.

@rgwozdz Do you think it is easy to build a browser-compatible version?

[rgwozdz]

Interesting idea. Not sure about the level of effort.

[lea-lp]

@haoliangyu and @rgwozdz thanks for your interest ! I would be happy to help if needed :)

[rgwozdz]

We're always looking for contributors. Using it in the browser falls outside or our typical use case, but I would encourage you to PR. With respect to your initial message regarding farmhash package. It is an optional dependency, so perhaps you can get around it by using NPM to prevent its installation. However, you'll need to have a strategy for environment variables which are widely used in the code base. Perhaps this thread will help: https://stackoverflow.com/a/46269080/1088561

[lea-lp]

@rgwozdz Thanks for the release !

Unfortunately, I still face some compiling problems due to .node files (from farmhash).

I've updated my current webpack configuration, tried some options like target: node or node: { global: true }, added a speacial node loader to my module.rules but nothing worked.

It's sad to say, but I don't thing this will be an easy implementation.

Regarding to node-loader webpack documentation :

⚠ node-loader only works on the node/electron-main/electron-main targets.

I would love to help but actually I have no idea where to start or how to transform it for a front-end repo only...