Erro quando instalo npm [email protected]

Olá meu aluno! Primeiramente, qual versão do Node.js você tem instalada em seu sistema? Não atualize nada até eu verificar tudinho com você. Eu nunca precisei atualizar nada em separado, aliás, isso traz mais dor de cabeça do que solução.

No aguardo da sua resposta Filipe!

Olá Flavio!

Versão de node.js e npm respectivamente:

v6.6.0

3.10.3

Então, você pode atualizar para a versão 6.10.X? Sempre versão par, ok?

Mas tipo, sua mensagem parece ser apenas um warning, não um erro. Ele tenta usar um recurso nativo e depois se não tiver ele usa um plano B. Chegou a testar se o processo do sass esta funcionando?

É comum alguns módulos do Node.js fazerem isso. Eles tentam várias soluções do OS...

Atualiza para Node 6.10.X (que vai atualizar seu npm .. porque node vem com o npm) e tente baixar novamente.

Se a mensagem continuar, continue com o projeto e veja se os arquivos estão sendo compilados, pois como disse, acho que é apenas um warning.

Instalei a versão node 6.10.2

e instalei dentro na pasta alurapic:

npm install node-sass@4.5.0 sass-loader@4.1.1 --save-dev

ajustei no arquivo alurapic/src/components/shared/botao/Botao.vue

<style scoped lang="scss">

    $cor: firebrick;

    .botao {
        display: inline-block;
        padding: 10px;
        border-radius: 3px;
        margin: 10px;
        font-size: 1.2em;
    }

    .botao-perigo {
        background: $cor;
        color: white;
    }

    .botao-padrao {
        background: darkcyan;
        color: white;
    }    
</style>

ai apareceu o erro no console

./src/components/shared/botao/Botao.vue
Module not found: Error: Can't resolve 'scss-loader' in '/home/filipe/alurapic/src/components/shared/botao'
 @ ./src/components/shared/botao/Botao.vue 3:0-275
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/home/Home.vue
 @ ./src/components/home/Home.vue
 @ ./src/routes.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Você usou a versão do Vue que indiquei no início do curso ou colocou uma mais nova?

O seu problema é no node-sass, pois o sass-loader depende do node-sass. Por algum motivo que eu desconheço, ele não esta sendo compilado em sua máquina.

Uma tentativa de tiro de canhão é você apagar a pasta node_modules e rodar o comando npm install. Depois...

npm install node-sass@4.5.0 sass-loader@4.1.1 --save-dev

Aham! Acessando a própria documentação do node-sass há um alerta pra usuários Ubuntu!

https://www.npmjs.com/package/node-sass

Some users have reported issues installing on Ubuntu due to node being registered to another package. Follow the official NodeJS docs to install NodeJS so that #!/usr/bin/env node correctly resolved.

Se você chama o node no terminal pode nodejs e não node, terá problemas. Há um conflito de packages.

Teste só. Abra seu terminal e escreva nodejs. Se funcionar, feche abra o terminal novamente e escreva node. Se não funcionar, esta ai o problema.

Se não for, é algum desdobramento que não sei identificar na sua distro.

Vue versão 2.7.0

node.js funcionou e node tbm :(

Epa!!!!! Os dois? Bom. em teoria, se node é encontrado, não deveria dar erro. Agora eu fundi meus neurônios. Sinceramente, não sei o que pode ser.

POdemos tentar usar as versões mais novas dos plugins e ver se vai dar certo (apesar de seu um passo de desespero).

Faça assim:

npm install node-sass sass-loader --save-dev

Fiz tudo o que você falou, realmente o problema é node-sass, remove lang="scss" e funcionou.

Quando eu instalo:

npm install node-sass sass-loader --save-dev

e apareceu WARN no terminal:

> node-sass@4.5.2 install /home/filipe/alurapic/node_modules/node-sass
> node scripts/install.js

Cached binary found at /home/filipe/.npm/node-sass/4.5.2/linux-x64-48_binding.node

> node-sass@4.5.2 postinstall /home/filipe/alurapic/node_modules/node-sass
> node scripts/build.js

Binary found at /home/filipe/alurapic/node_modules/node-sass/vendor/linux-x64-48/binding.node
Testing binary
Binary is fine
alurapic@1.0.0 /home/filipe/alurapic
├── node-sass@4.5.2 
└── sass-loader@4.1.1 

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Unsupported platform for fsevents@1.1.1

Não suporte a plataforma do Ubuntu 16.04 LTS?

Eu não sei. Mas faz o seguinte para eu meditar final de semana. Baixa novamente via npm e cola o log inteiro que aparecer no npm aqui.

E se puder testar em outro sistema operacional para ver se é algo mesmo do ubuntu. Aqui funcionou de boa.

Estou curioso igual a você para saber qual é o problema.

Noticia boaaaaa, funcionou!!!

Final do capítulo e baixei do projeto completo, instalei npm e depois node-sass e sass-loader. Acrescentei sass no arquivo Botao.vue e funcionou. Obrigado pela paciência Prof. Flávio.

Boa! Agora é continuar com os estudos!

Boa noite Flávio!

É muito importante identificar o erro, verifiquei que estava faltando a parte do código dentro que eu baixei npm install no inicio do capitulo.

alurapic/webpack.config.js

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
           //Aqui não veio o código que baixei do projeto inicio do capitulo(npm install). Não sei o que houve.
          }
        }
      },

ai coloquei o código que estava faltando

'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'

funcionou!