react-router cannot resolve module history, missing lib folder - node.js

I'm creating a new React project and I have a dependency issue between react-router and history :
ERROR in ./~/react-router/lib/match.js
Module not found: Error: Cannot resolve module 'history/lib/Actions' in /app/node_modules/react-router/lib
# ./~/react-router/lib/match.js 15:15-45
ERROR in ./~/react-router/lib/useRouterHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useQueries' in /app/node_modules/react-router/lib
# ./~/react-router/lib/useRouterHistory.js 6:18-51
ERROR in ./~/react-router/lib/createMemoryHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useQueries' in /app/node_modules/react-router/lib
# ./~/react-router/lib/createMemoryHistory.js 6:18-51
ERROR in ./~/react-router/lib/useRouterHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useBasename' in /app/node_modules/react-router/lib
# ./~/react-router/lib/useRouterHistory.js 10:19-53
ERROR in ./~/react-router/lib/createMemoryHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useBasename' in /app/node_modules/react-router/lib
# ./~/react-router/lib/createMemoryHistory.js 10:19-53
ERROR in ./~/react-router/lib/browserHistory.js
Module not found: Error: Cannot resolve module 'history/lib/createBrowserHistory' in /app/node_modules/react-router/lib
# ./~/react-router/lib/browserHistory.js 5:28-71
ERROR in ./~/react-router/lib/hashHistory.js
Module not found: Error: Cannot resolve module 'history/lib/createHashHistory' in /app/node_modules/react-router/lib
# ./~/react-router/lib/hashHistory.js 5:25-65
ERROR in ./~/react-router/lib/createMemoryHistory.js
Module not found: Error: Cannot resolve module 'history/lib/createMemoryHistory' in /app/node_modules/react-router/lib
# ./~/react-router/lib/createMemoryHistory.js 14:27-69
I'm using react-router last release 3.0.0 which has history 3.0.0 as a dependency in its package.json.
I'm using npm version 3.10.8 and even if history module is installed by react-router dependency, I added it in my package.json too, as stated in react-router docs.
Thing is react-router is searching its requires in history/lib/ while history module has its files in history/ (no lib folder).
Since it doesn't depend on my configuration/installation but on third parties modules, I don't see what to do and I'm surprised to not find any issue regarding this.

The problem is actually to follow react-router installation instructions, adding history module in our own package.json.
Installing the last version of history on your own instead of the one required by react-router is creating this conflict.
With react-router >= 3.0, history is a dependency with a fixed version requirement, installed along with react-router itself :
└─┬ react-router#3.0.0
└── history#3.2.1
no need to install it manually in your package.json, it will create conflicts if you don't specify the right required version.
Thanks to #ShubhamKhatri for having pointing me in this direction.

If you are using npm version greater than 3.0.0 .
Note that you need to also install the history package since it is a peer dependency of React Router and won't automatically be installed for you in npm version freater than 3.0.0.
Run npm install history and you should be good.

The path needs to be updated it is no longer
history/lib/createHashHistory
It's just
history/createHashHistory
React Training Link
Also probably import HashRouter from react-route-dom. HashRouter replaces Router and no need to pass history as a prop anymore.

Related

export '__RouterContext' (imported as 's') was not found in 'react-router'

This is my error and I can't fix it :(((
This error appeared while I
import { GuardProvider, GuardedRoute } from 'react-router-guards'
and use it.
It's not expressly limited by react-router-guard's package.json the repo and README both state there's a peer dependency on react-router-dom#5.
See Requirements.
This package has the following peer dependencies:
React v16.8.0+ (for hooks ⚓️)
React Router DOM v5.0.0+
Based on the error it seems you have react-router-dom#6 installed and it has many different exports than the previous version. To resolve you will need to revert to the v5 version of react-router-dom.
To install, run from the project's root directory:
npm i -s react-router-dom#5

Cypress - Error: Can't resolve 'async_hooks'

Current behavior
I know this kind of issue was fixed in the version 5.1.0 but ...
I'm trying to seed DB in the Node JS part logic at the before hook
We have the cls-hooked and 1 more internal npm module for sharing both use async_hooks
When I'm trying to import and use any of that modules I receive crashes at the test script launch:
Error: Webpack Compilation Error
./node_modules/...[our private module name].../lib/...[file name]....js
Module not found: Error: Can't resolve 'async_hooks' in '/Users/.../node_modules/...[private module or cls-hooked].../lib'
resolve 'async_hooks' in '/Users/.../node_modules/...[private module or cls-hooked].../lib'
Parsed request is a module
using description file: /Users/.../node_modules/...[private module or cls-hooked].../package.json (relative path: ./lib)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
Desired behavior
Test script launch should go smoothly with before hook executing
Test code to reproduce
require some module in ./cypress/plugins/index.ts with next similar logic
var async_hooks = require("async_hooks");
var asyncLocalStorage = new async_hooks.AsyncLocalStorage();
...
asyncLocalStorage.getStore();
Cypress Version
^8.1.0 - 8.5.0
Cypress binary version: 8.5.0
Electron version: 13.2.0
Bundled Node version: 14.16.0
tried Node version: 14.17.6 and 16.9.1
the same for:
Cypress binary version: 7.7.0
Electron version: 12.0.0-beta.14
Bundled Node version: 14.15.1
Other
additional install of "async_hooks": "^1.0.0" didn't help
Using TS
"typescript": "^4.1.5"
OS
macOS Big Sur 11.16
The problem was in 1 common file for both processes browser and NodeJs in Cypress.
In this case, Webpack built the bundle with 'browser' context but received NodeJs context logic. That's why the error occured.
When I used enum in Browser part in the file which besides that also exports NodeJs logic it (Webpack) didn't make the 'treeshaking', thus the NodeJs logic was imported into the bundle for browser process logic. 🤷‍♂️

How to add google datastore package to electron app

My first electron app: it's an admin app intended to run only on my machine
I want to add the #google-cloud/datastore module to it, but electron won't start once I import the package.
I add the package using 'yarn add', then rebuild for electron using electron-rebuild as instructed here: https://electronjs.org/docs/tutorial/using-native-node-modules
The first error is:
Failed to compile
./node_modules/#grpc/grpc-js/build/src/channel.js
Module not found: Can't resolve 'http2' in '<...>\node_modules\#grpc\grpc-js\build\src'
So I try manually yarn add'ing http2, electron-rebuild, and 'yarn start', after which I get a few warnings:
./node_modules/http2/lib/protocol/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
./node_modules/grpc/src/grpc_extension.js
Critical dependency: the request of a dependency is an expression
./node_modules/grpc/node_modules/node-pre-gyp/lib/pre-binding.js
Critical dependency: the request of a dependency is an expression
./node_modules/grpc/node_modules/node-pre-gyp/lib/util/versioning.js
The app then starts but shows a long list of errors.
Error: Cannot find module './../process/browser.js'
... intermediate errors, below is the module trying to import
Module../node_modules/merge2/index.mjs
I'm not sure if/what I'm doing wrong, or if google datastore is somehow not compatible with electron?
Using the latest Electron & google packages (and no other changes) seems to have resolved this issue

Error generating sub components inside components with Angular CLI

Details: running OS 10.11, using Angular version 1.2.6, npm 5.3.0, node 8.2.0.
So I'm learning Angular for the first time, and I keep running into the same problem where if I create a new project using 'ng new [PROJECT]' and then use 'ng serve' it compiles and displays properly, but then if I try to use 'ng g c [NEW_COMPONENT]' then it breaks the project. Specifically, it says that 'Module Not Found: Error: Can't resolve [PATH]' and it gives a valid path for the component, the path that ng itself generated. What's going on here? I've tried uninstalling #angular/cli and node and npm several times and I can't seem to get Angular to reliably generate new components on its own. What am I doing wrong here?
ERROR in /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts (5,36): Cannot find module './src/app/inventory/inventory.component'.
ERROR in Error encountered resolving symbol values statically. Could not resolve ./src/app/inventory/inventory.component relative to /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts., resolving symbol AppModule in /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts, resolving symbol AppModule in /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve './src/app/inventory/inventory.component' in '/Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app'
# ./src/app/app.module.ts 10:0-77
# ./src/main.ts
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.
This is the error I receive. What am I doing wrong here?

Webpack CSS Loader - Module not found: Error: Cannot resolve module 'file'

I am getting this error when trying to use CSS-Loader...
Module not found: Error: Cannot resolve module 'file'
What's going on?
Poorly named error. To fix,
npm install --save file-loader
Module "file" is actually file-loader but the syntax removes the word loader for some reason.

Resources