lolleri200

Posted on Jun 9, 2020

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

#react #javascript

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!

Top comments (15)

Mattia Asti • Jun 9 '20

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

import { v4 as uuidv4 } from 'uuid';

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

lolleri200 • Jun 10 '20

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 • Jun 10 '20

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

lolleri200 • Jun 10 '20

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

lolleri200 • Jun 10 '20

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 • Jun 10 '20 • Edited

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 • Jun 11 '20

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 • Jun 11 '20

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 • Jun 11 '20

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

Mattia Asti • Jun 11 '20

it's

localStorage.setItem()

not

localStorage.SetItem()

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

lolleri200 • Jun 11 '20

Ohh thanks! Works perfectly now :)

lolleri200 • Jun 11 '20

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", {