Module not found: Can't resolve 'uuid/v4'

I am a beginner in React programming and I was following this tutorial in Youtube: https://youtu.be/hQAHSlTtcmY and everything went well until it was required to install uuid library and after that when I run the page I get an error saying: "Failed to compile.

./src/App.js

Module not found: Can't resolve 'uuid/v4' in 'C:\Users\username\reactnative\src'" so can anyone help me fix this error? And also there are no other errors in the code and it's exactly the same as shown in the video!

Comments

[Mattia Asti]

That video is old and the module is now exposed differently.

import { v4 as uuidv4 } from 'uuid';

npmjs.com/package/uuid#create-vers...

[lolleri200]

I dont know what happen but now when I run Npm start I just get this error in the Terminal:

reactnative@0.1.0 start C:\Users\sami\reactnative
react-scripts start

'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactnative@0.1.0 start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactnative@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[Mattia Asti]

Not sure, usually what I would do is rm -rf node_modules then npm i and then npm start

[lolleri200]

OMG thanks, that fixed it! Now that I can actually run the build I can begin fixing this few errors :)

[lolleri200]

Can u help with these errors? I don't really understand what the issue even is here...

TypeError: localStorage.SetItem is not a function
C:/Users/sami/Git/Todo/src/App.js:16
13 | }, [])
14 |
15 | useEffect(() => {

16 | localStorage.SetItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))
| ^ 17 | }, [todos])
18 |
19 | function toggleTodo(id) {

localhost:3000/static/js/main.chun...
27 | if (storedTodos) setTodos(storedTodos);
28 | }, []);
29 | Object(react_WEBPACK_IMPORTED_MODULE_0_["useEffect"])(() => {

30 | localStorage.SetItem(LOCAL_STORAGE_KEY, JSON.stringify(todos));
| ^ 31 | }, [todos]);
32 |
33 | function toggleTodo(id) {

[Mattia Asti]

You should put code inside

code

Otherwise it's hard to read.
My guess is that localStorage is not defined.
Try with window.localStorage as it exist only in the browser on the global window object

[lolleri200]

I tried that, but it gave me the same error in the Browser. I did it like this:
useEffect(() => {
const storedTodos = JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_KEY))
if (storedTodos) setTodos(storedTodos)
}, [])

useEffect(() => {
window.localStorage.SetItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))
}, [todos])

And sorry I don't know how to add that code field.

[Mattia Asti]

Try to make a reproducible example on Codesandbox, might be easier for people to help you

Also read dev.to/p/editor_guide

If you want to put the code you do it like this

```
code
```

[lolleri200]

I have the whole code in my Github :)
github.com/lolleri200/Todo/blob/ma...

[Mattia Asti]

it's

localStorage.setItem()

not

localStorage.SetItem()

developer.mozilla.org/en-US/docs/W...

[lolleri200]

Ohh thanks! Works perfectly now :)

[lolleri200]

But there seems to be a bug that happens when I add a todo it adds 2 of the same items and when I try to remove it it gives me an error:
TypeError: toggleTodo is not a function
handleTodoClick

  2 | 
  3 | export default function Todo({ todo, toggleTodo }) {
  4 |     function handleTodoClick() {
> 5 |       toggleTodo(todo.id)
  6 |     }
  7 |     
  8 |     return (

 130 |   toggleTodo
  131 | }) {
  132 |   function handleTodoClick() {
> 133 |     toggleTodo(todo.id);
      |     ^  134 |   }
  135 | 
  136 |   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {

[lolleri200]

Ohhh thanks for the info! I'll give this a try :)

[Seanmclem]

What's your file look like? Did you npm install uuid?

[lolleri200]

Yes I did that