We Keep Coding

How to configure webpack for path resolver to use dependency which is an internal dependency of another dependency?

I have a project (named xProject) setup as depicted in images below. As we can see a module named utils.js under commons/ is importing uuid module but it is not installed as a dependency in commons/pacakge.json. I have added commons as dependency in web/package.json: "commons": "file:../commons". When I import utils.js into a module MyModule.tsx under web/, it complains about following ERROR:
ERROR in ../commons/utils.js
Module not found: Error: Can't resolve 'uuid' in '/Users/xuser/myfolder/xproject/commons/'
I want webpack to use uuid from other dependencies whose internal dependency is 'uuid'. Is it possible? If yes, how? For example, node-sass is a package which has uuid as an internal dependency.
I did look for the solution whole last day but unfortunately I didn't get it working.
Thank you in advance for your help.

Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

I type:
npm test
and I get:
It's interesting to note that the import statement works inside the BootScene.test.js file but it doesn't work in the imported file.
I focused on the import statement not working under JEst. So I thought maybe it has something to do with Ecma Script version jest uses. So I tried this solution but the error persists.
This is the repo/branch of this question.
When I type npm start. Everything flows swiftly and with no errors.

The error occurs because jestdom is not able add canvas, which we need to do. For me this happened because I was using lottiefiles for the application.
Here is how I fixed it for my react application.
Install jest-canvas-mock as below .
npm i jest-canvas-mock
Then go to setup file like setup-tests.js and import jest-canvas as below .
import "jest-canvas-mock";
Now run test, you should not get errors any more.

I solved it by following this instructions.
Thanks CherryDt.

Installing npm i jest-canvas-mock
and Importing import "jest-canvas-mock" in set-up file; works for me

How to resolve error when trying to install farmhash

I want to install and use farmhash. But I'm getting the following error.
./node_modules/farmhash/index.js
Module not found: Can't resolve './build/Release/farmhash' in '/path/to/my_project/node_modules/farmhash'
Steps to recreate.
At the command line, I did
yarn add farmhash
Then imported using
import farmhash from 'farmhash';
Then tried to use with
const hash = farmhash.hash32('test');
I checked my node_modules directory to verify it installed to the correct location: node_node_modules/farmhash/index.js
What am I doing wrong and how can I correct this error?

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
....

Getting npm packages to work with babel (babel-loader)

I'm really new to webpack, babel, React and all this stuff. So I'm probably missing something really obvious. To get a jumpstart on my React project I'm using react-redux-bootstrap-webpack-starter. It all works well, but now my lack of understanding really shows with my latest problem.
The problem:
I'm trying to import jwtDecode from 'jwt-decode' and it throws the following error:
./src/app/redux/modules/login.js
Module not found: Error: Can't resolve 'jwt-decode/build/jwt-decode' in
'/usr/src/app/src/app/redux/modules'
# ./src/app/redux/modules/login.js 12:17-55
# ./src/app/redux/modules/reducers.js
# ./src/app/redux/store/configureStore.dev.js
# ./src/app/redux/store/configureStore.js
# ./src/app/Root.js
# ./src/app/index.js
# multi react-hot-loader/patch webpack-hot-middleware/client
./src/app/index.js
What have I done:
I've Docker-ized the frontend app, so I just added the jwt-decode package to package.json and rebuilt the image. The Docker build executes npm install.
I've tried to import jwtDecode from 'jwt-decode' then I tried import jwtDecode from 'jwt-decode/build/jwt-decode
I made sure I can reference other npm packages similarly installed. On a new docker instance I installed lodash, imported it in the same file and there was no problem.
My hypotheses:
There's something about the particular jwt-decode package that makes it not work well with babel.
To make it work I need either to modify the jwt-decode package or to configure webpack and the babel-loader differently. How?

Babel doesnt transpile anything for JWT-decode and I dont think webpack has any extra configuration for it either.
It looks like the places that you are trying to use jwt-decode, like: './src/app/redux/modules/login.js ', in your app cannot find the directory and so are failing. Make sure that whatever module loader you're using is referencing the correct path to the jwt-decode directory.
Try loading it like this ( if you are using ES2015 via Babel transpilation):
import jwt_decode from "jwt_decode";