can't resolve 'react' for mdl module - javascript

Trying to build my first website with react, following along with this tutorial: https://www.youtube.com/watch?v=9AboneIxeM8&t=599s
I am trying to install and use the material lite module, however when I start npm I get a failure to compile with the following message :
Module not found: Can't resolve 'react' in '/Users/user/node_modules/react-mdl/lib'
Can someone help me understand what this means and how to fix it ? I'm at a loss it seems above my skill level.

Since you're following a tutorial there is probably some copy/ pasting involved. Hence, an already present package-lock.json file :)
I suggest doing the following:
Delete package-lock.json
Check if node_modules/react exists.
If it doesn't, check if React is in your package.json. If you don't have it listed, add it. After that:
Run npm install again
Check if node_modules/react exists.
[If it doesn't, something's messed up with your npm on your system. Try updating your NPM, or better yet, your Node environment. -npm comes with it].

npm install --save react-mdl then
restart react server

Related

Next.js: Module not found: Can't resolve 'canvg'

I have a next.js project and I keep getting:
error - ./node_modules/jspdf/dist/jspdf.es.min.js:458:25
Module not found: Can't resolve 'canvg'
I'm not sure why because I'm not including either jspdf or canvg.
Not sure what's causing it. Any help would be appreciated. I'm using material-ui if that matters.
It seems dependency error means that particular Module is missing when it's running.
Run npm ls or yarn list will print to stdout all the versions of packages that are installed, as well as their dependencies, in a tree-structure. Then search for that particulate packages are listed or not.
Run npm ls jspdf or yarn list jspdf then you can see its list of dependencies in tree-structure.
Please check your node version is updated or not ? If not then update first.
Quick & Dirty way: delete package.lock or yarn.lock file and delete .node_modules folders And Then run npm install or yarn to install again.
Look at console while you installing and make sure there are no error in the installing process. If you saw error you better look that massages also.

No matching version found for #babel/plugin-transform-object-super#^7.8.3. with Vue.js

When I am trying to create a vue project using the vue-cli it is giving me the following error message.
ETARGET
No matching version found for #babel/plugin-transform-object-super#^7.8.3.
In most cases you or one of your dependencies are requesting a package version that doesn't exist.
It was specified as a dependency of '#babel/preset-env'
A complete log of this run can be found in: /home/avinash/.npm/_logs/2020-01-13T23_53_01_890Z-debug.log
my node version is v12.14.1
npm version is v6.13.4
I was facing this issue a while ago and this is what worked for me:
Are you perhaps using your company laptop where your npm registry is not set by default to: https://registry.npmjs.org/ ?
If yes, you may go to your .npmrc file, comment out your current registry, and set registry = https://registry.npmjs.org/
Run your vue-cli command, and then restore the .npmrc to original settings :)
Not sure if you have a similar issue but this is what worked for me.

How to install Redux after creating a React application using create-react-app?

Created an application using create-react-app. I wrote just the word test in the render method to display on the screen. And everything is ok.
Then I write: npm install --save redux for the folder with the application and the application does not work.
In console error:
How then to install redux after create-react-app? What is the procedure step by step?
Or Maybe you know some article where they describe step by step? Or do you know some video on YouTube?
When you installed redux you might have mispelled it while installing because in your screenshot see the error carefully it is shown the redux spelling as 'redx' so try fixing it by installing correctly with npm or try with yarn.
To do with npm :-
npm i redux --save
And if you want to install any packages with yarn you can do so with following command :-
yarn add redux
The other thing I have seen in your image is that there is an error of #babel/runtime if the error is coming again after installing redux correctly then you might have to install it manually.
First you need to remove the node_modules completely and then install the #babel/runtime package
To do with npm :-
npm i #babel/runtime --save OR npm add #babel/runtime
I know it might be late but I have written a Step-by-Step guide on "How to Add Redux into create-react-app".
You can find the link of the blog here.
https://www.realmelon.com/react-redux-how-to-add-redux-into-create-react-app/
Moreover, I have uploaded the Video for the same.
https://www.youtube.com/watch?v=IfRk6mdIb90&t=31s
If you still find any issues in installing "Redux on React", please let me know
Happy Learning

react-native, bundling failed

I am new to react-native and have found an error that makes absolutely no sense to me.
I am trying to include a calendar library: https://github.com/wix/react-native-calendars
I have included the dependency for that library in my package.json file and run npm install
The project was running fine and as expected. I have simply added one line of code to the project:
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
Nothing else. However now I am getting a red error message when the app loads on device and this is what my console is saying:
error: bundling failed: Error: While trying to resolve module xdate
from file
/Users/Alex/Documents/workspace/mobile/node_modules/react-native-calendars/src/index.js,
the package
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/package.json
was successfully found. However, this package itself specifies a
main module field that could not be resolved
(/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js.
Indeed, none of these files exist:
*
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
*
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
at ResolutionRequest.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15)
at DependencyGraph.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
at dependencies.map.relativePath (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
at Array.map ()
at resolveDependencies (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
at Generator.next ()
at step (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
at
However I have checked in the directory and in fact /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js does exist. However I do not see any of this part: (.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
As to how /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index can exist, that doesn't make sense because xdate.js is not a directory.
Any help?
It Usually happens if you try to install a module while your packager is open.
Try to delete node_modules folder and close the packager.
Then reinstall everything by npm install in your project directory.
First close your JavaScript bundler (Metro bundler in my case) and restart the application. This will create fresh dependency graph. This should solve the issue.
Just restart the bundler - no need to delete the Node Modules folder
I came across this issue when adding and using react-native-elements when using VS Code and Android Studio emulator on Linux Mint
In VS Code I had a terminal running Expo with Metro Bundler via 'npm start' command. After installing the react-native-elements in the folder (using 'npm install --save react-native-elements') and adding the import into the .js file I got the "However, this package itself specifies a main module field that could not be resolved" error.
In my case, this just involved a ^C in the terminal session to stop the Metro bundler and then running 'npm start' again. There was no need to delete the node modules folder at all.
If you're still getting the error even after deleting the ./node_modules folder and running npm install again, try doing the install with the --update-binary flag, i.e npm install --update-binary. This should clear out and rebuild any previously built packages on your machine.
Please don't delete the node modules folder.
The bundler has least to deal with node modules folder.
Instead close all the terminals. If using VS-code close that also.
Close all the local host server ports and if possible restart the system.
This might solve the issue.
If anyone have same issue, and remove node_module not working. Then you can try remove all node_module, package lock and using yarn to install node_module instead npm. Hope this help
None of the solutions above helped me except for restarting my MacBook. Wasted 30 minutes trying to fix this issue as I couldn't believe restarting my computer could be a solution.

Warning with installing fetch to node js

When i'm installing node-fetch
Here's a link
I'm getting that warning
`-- node-fetch#1.6.3
npm WARN motivation_bot#1.0.0 No repository field.
How to resolve the problem?
npm often gives warning while installing packages. In 99%, these are mistakes made by the creator of the package, in your cause motivation_bot. You can ignore them all if your package works like it should do. You will get warnings nearly every installation so don't care about it ^^.
Follow the instructions and install the package using the correct syntax (npm install node-fetch --save). After that, check your dependencies in the package.json file. If you find the package "node-fetch", you don't need to worry about the warning message.

Categories

Resources