PROBLEMAS NA CRIAÇÃO DO JAVA SCRIPPT

Olá Matheus, tudo bem ? Não cheguei a verificar se nesse curso o professor anteriormente já indicou o uso de um servidor, ou se este projeto está sendo rodado em um servidor. O que você pode fazer é instalar o browser-sync para rodar o projeto, ai este problema será solucionado.

Segue comando pra rodar o browser-sync: browser-sync start -s -f . --directory

Eu estava vendo, neste curso no primeiro tópico da aula, no item 7 está falando do browser-sync. Segue o passo a passo deles para rodar. Após rodar, ele tente entrar no projeto usando, após o browser-sync estiver rodando. Ai vai solucionar o seu problema de CORS. Espero ter ajudado. :D

Não consigo instalar o browser sync, fica aparecendo essa mensagem:

npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\browser-sync\node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code EEXIST npm ERR! path C:\Users\Usuário\AppData\Roaming\npm\node_modules\browser-sync\dist\bin.js npm ERR! dest C:\Users\Usuário\AppData\Roaming\npm\browser-sync.cmd npm ERR! EEXIST: file already exists, cmd shim 'C:\Users\Usuário\AppData\Roaming\npm\node_modules\browser-sync\dist\bin.js' -> 'C:\Users\Usuário\AppData\Roaming\npm\browser-sync.cmd' npm ERR! File exists: C:\Users\Usuário\AppData\Roaming\npm\browser-sync.cmd npm ERR! Remove the existing file and try again, or run npm npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Usuário\AppData\Roaming\npm-cache_logs\2021-03-22T22_13_16_984Z-debug.log PS C:\WINDOWS\system32>

E no curso ele não ensina nada como instalar

Eu estava procurando ver como você pode sanar esse problema na instalação, uma delas é desinstalando os node_modules instalado para depois instalar o browser-sync.

Como faz para desisntalar você sabe?

Desinstalei e não funcionou

C:\Users\Usuário\Desktop\Forrosul>npm install -g browser-syncnpm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\browser-sync\node_modules\chokidar\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code EEXISTnpm ERR! path C:\Users\Usuário\AppData\Roaming\npm\node_modules\browser-sync\dist\bin.jsnpm ERR! dest C:\Users\Usuário\AppData\Roaming\npm\browser-syncnpm ERR! EEXIST: file already exists, cmd shim 'C:\Users\Usuário\AppData\Roaming\npm\node_modules\browser-sync\dist\bin.js' -> 'C:\Users\Usuário\AppData\Roaming\npm\browser-sync'npm ERR! File exists: C:\Users\Usuário\AppData\Roaming\npm\browser-syncnpm ERR! Remove the existing file and try again, or run npmnpm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\Usuário\AppData\Roaming\npm-cache_logs\2021-03-23T00_20_20_667Z-debug.log

Estou desde as 16 horas tentando instalar esse browser sync, fiz mais de 20 tentativas e nada, no curso ele não explica nada, como se fosse algo banal e simples de fazer, mas estou aqui a horas tentando instalar isso, somente para criar um carousel... complicado

Oi Matheus, bom sei o quanto deve estar sendo frustrante.

As vezes os improvisos ocorrem, mas são eles que acabam ajudando a crescer.

Olhando para o erro, não sei como você acabou deletando os node modules, mas eu iria sugerir uma forma bruta mesmo de deletar ele.

Va em C:\Users\Usuário\AppData\Roaming\npm\node_modules\ de seu computador e delete o conteúdo dela.

Após isso tente instalar novamente pelo terminal o browser-sync.

Outra sugestão seria caso instalar o wamp em sua máquina e colocar o projeto para rodar ali.

Força sei que é complicado as vezes uma coisa que é simples, mas depois que nós conseguimos realizar, conseguimos tirar o problema de letra.

De verdade espero ter conseguido te ajudar.

O problema é, quando eu deleto todos os node__modules, ele não reconhece os comandos exemplo:

C:\Users\Usuário\Desktop\Forrosul>npm install -g browser-sync 'npm' não é reconhecido como um comando internoou externo, um programa operável ou um arquivo em lotes.

Entendi.

E se você desinstalar o node e instalar ele novamente ?

Consegui instalar finalmente, esta funcionando o browser sync, porem os java script não roda

aparece essa mensagem: Not allowed to load local resource: file:///C:/Users/Usu%C3%A1rio/Desktop/Forrosul/assets/img/seta-esquerda.svg (index):1 Not allowed to load local resource: file:///C:/Users/Usu%C3%A1rio/Desktop/Forrosul/assets/img/seta-direita.svg (index):1 Not allowed to load local resource: file:///C:/UsersUsu%C3%A1rioDesktopForrosulassetsjscarousel.js

agradeço muito sua ajuda!!!

É nois Matheus !

XD

Então quando você rodou o browser-sync, no ele no já abriu em localhost:3000 ?

O seu index.html só está importando apenas um script js, assim como exemplo abaixo ?

<script src="assets/js/index.js" type="module"></script>

Aeee cada vez mais próximos de solucionar o problema.

XD

Isso só importa o JS

Mas ele da erro também na url das imagens das setas do carrousel

background-image: url(file:///C:/Users/Usu%C3%A1rio/Desktop/Forrosul/assets/img/seta-esquerda.svg);

Pelo que eu estou entendo, a sua importação dentro do css está assim:

background-image: url(file:///C:/Users/Usuário/Desktop/Forrosul/assets/img/seta-esquerda.svg);

Caso esteja como descrevi ai em cima, tente utilizar desta forma:

background-image: url(../img/seta-esquerda.svg);

Se você testar fora em outro browser acontece o mesmo erro ?

Acontece o mesmo erro quando abro em outros navegadores, e sobre a img não funcionou também. tem alguma outra forma de acessar um java script sem ser o browser sync? estou só fazendo a parte de front-end de um site, e estou fazendo um carousel e gostaria de acompanhar como está ficando, mas meu navegador não roda o js local, tens alguma dica que eu possa utilizar, sem ser o browser sync?

Então Matheus, o grande problema que você está tendo é que para acompanhar, o JS agora é um module.

Sendo um module, você precisa rodar o seu projeto em um servidor, por isso na aula é usado o browser-sync.

Caso você tenha um outro servidor na sua máquina, como por exemplo o Apache, você pode rodar o projeto, que ele vai funcionar como o browser-sync.

Uma outra sugestão é fazer o download de como está o projeto no capitulo 4 e comparar com o seu projeto atual, para tentar encontrar as diferenças.

Digo isso porque eu baixei o projeto e consegui rodar no browser-sync, sem problemas, então creio que tendo os dois podemos comparar o que está diferente e conseguir solucionar o problema.

Eita... baixei o arquivo da aula 4 e funcionou.. será que fiz alguma cagada na escrita do meu código então? bah mano que alivio que pelo menos o problema não é browser sync

lol !

Então temos que comparar um projeto com o outro pra saber o que está de diferente.

Mas que bom que carregou, então conseguimos aprender a como contornar um problema caso não consiga fazer alguma instalação no node XD .

Sucesso pra ti.

Valeu mano muito obrigado!

Eu que agradeço pela oportunidade em ajudar XD.