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

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.

Related

Error "Module not found" while create-react-app and npm start

I am trying to run create-react-app and after entering npm start I am getting this error
Failed to compile.
Module not found: Error: Can't resolve 'C:\Users\sande\OneDrive\Desktop\project#1\client\my-app\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&reconnect=10' in 'C:\Users\sande\OneDrive\Desktop\project#1\client\my-app'
ERROR in Module not found: Error: Can't resolve 'C:\Users\sande\OneDrive\Desktop\project#1\client\my-app\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&reconnect=10' in 'C:\Users\sande\OneDrive\Desktop\project#1\client\my-app'
webpack compiled with 1 error
There is a problem while reading the directory because there is a # character in your file path. Do not use # and similar signs in your directory path. Good work.
I had the same error, I change my path and remove all # form it.
It should be like this #React/myProject/project#1 => React/myProject/project1
Thanks for the help everyone, it resolved the error.

Error: Cannot find module './_freeGlobal'

Error: Cannot find module './_freeGlobal'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
When I try to delete this module, there is a message that I cannot find another module. Almost all modules are not found
I just had this same issue in a React app. I simply ran npm install in my project folder and that fixed the problem.

'node-jose' library is using 'zlib' library as a dependency which throws an error. How do I fix it and have you encountered the same problem?

I'm trying to use the node-jose library with angular7 for the use with JWEs. The library uses zlib as a dependency and it throws an error when compiling:
ERROR in ./node_modules/zlib/lib/zlib.js
Module not found: Error: Can't resolve './zlib_bindings' in '~\WebApp\node_modules\zlib\lib'
I opened the 'zlib.js' file and the contents are the following:
module.exports = require('./zlib_bindings');
The problem is that the required file doesn't exist. I inspected the rest of the library and there is no such file in the whole library.
I searched the whole internet and no one has described the same problem as I have. There are some discussions regarding the 'node-jose' library but none of those issues are related to 'zlib'.
I would be extremely thankful if only someone would say they share the same error. Thanks in advance!
I found the answer.
Angular isn't showing an error when compiling but shows an error in the browser. It's because the browser doesn't have 'node' libraries integrated so it can't start the 'zlib' library. Installing the 'zlib' library in 'node_modules' doesn't help since it's deprecated.
Using the 'browserify-zlib' library and changing the ...require('browserify-zlib') in all my dependencies has fixed the issue.
This PR will fix the issue in node-jose
https://github.com/cisco/node-jose/pull/264
This is published to npm as node-jose-browserify, https://www.npmjs.com/package/node-jose-browserify
npm i node-jose-browserify

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?

react-router cannot resolve module history, missing lib folder

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.

Resources