Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Grade não carrega após lite-server

Olá! A grade parou de carregar após as modificações da parte 2 do curso de typescript. Está apresentando os seguintes erros no console :

  • Unchecked runtime.lastError: The message port closed before a response was received.

  • DevTools failed to load SourceMap: Could not load content for http://localhost:3000/css/bootstrap.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
    • DevTools failed to load SourceMap: Could not load content for http://localhost:3000/css/bootstrap-theme.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
  • package.json:
    {
      "name": "alurabank",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "compile": "tsc",
        "watch": "tsc -w",
        "server": "lite-server --baseDir=app",
        "start": "concurrently \"npm run watch\" \"npm run server\""
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@types/jquery": "^2.0.42",
        "concurrently": "^3.4.0",
        "lite-server": "^2.3.0",
        "typescript": "^2.3.2"
      }
    }

    index.html:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Negociações</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <link rel="stylesheet" href="css/bootstrap-theme.css" />
      </head>
      <body class="container">
        <h1 class="text-center">Negociações</h1>
        <div id="mensagemView"></div>
        <form class="form">
          <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus />
          </div>
          <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input
              type="number"
              min="1"
              step="1"
              id="quantidade"
              class="form-control"
              value="1"
              required
            />
          </div>
          <div class="form-group">
            <label for="valor">Valor</label>
            <input
              id="valor"
              type="number"
              class="form-control"
              min="0.01"
              step="0.01"
              value="0.0"
              required
            />
          </div>
          <button class="btn btn-primary" type="submit">Incluir</button>
        </form>
        <br />
        <br />
        <div id="negociacoesView"></div>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/system.js"></script>
        <script>
          System.defaultJSExtensions = true;
          System.import("js/app.js").catch((err) => console.error(err));
        </script>
      </body>
    </html>

    Resultado após rodar o comando npm start

    alurabank@1.0.0 start C:\Desenv\Alura\alurabank
    > concurrently "npm run watch" "npm run server"
    
    [1] 
    [1] > alurabank@1.0.0 server C:\Desenv\Alura\alurabank
    [1] > lite-server --baseDir=app
    [1]
    [0] 
    [0] > alurabank@1.0.0 watch C:\Desenv\Alura\alurabank
    [0] > tsc -w
    [0]
    [1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
    [1] ** browser-sync config **
    [1] {
    [1]   injectChanges: false,
    [1]   files: [ './**/*.{html,htm,css,js}' ],
    [1]   watchOptions: { ignored: 'node_modules' },
    [1]   server: { baseDir: 'app', middleware: [ [Function], [Function] ] }
    [1] }
    [0] 10:47:11 - Compilation complete. Watching for file changes.
    [0]
    [0]
    [1] [Browsersync] Access URLs:
    [1]  -------------------------------------
    [1]        Local: http://localhost:3000
    [1]     External: http://192.168.0.17:3000
    [1]  -------------------------------------
    [1]           UI: http://localhost:3001
    [1]  UI External: http://localhost:3001
    [1]  -------------------------------------
    [1] [Browsersync] Serving files from: app
    [1] [Browsersync] Watching files...
    [1] [Browsersync] Reloading Browsers... (buffered 7 events)
    [1] 20.09.07 10:47:12 304 GET /index.html
    [1] 20.09.07 10:47:12 304 GET /css/bootstrap.css
    [1] 20.09.07 10:47:12 304 GET /css/bootstrap-theme.css
    [1] 20.09.07 10:47:12 304 GET /lib/jquery.min.js
    [1] 20.09.07 10:47:12 304 GET /lib/system.js
    [1] 20.09.07 10:47:12 200 GET /js/app.js
    [1] 20.09.07 10:47:12 200 GET /js/controllers/NegociacaoController.js
    [1] 20.09.07 10:47:12 200 GET /js/views/NegociacoesView.js
    [1] 20.09.07 10:47:12 200 GET /js/models/Negociacoes.js
    [1] 20.09.07 10:47:12 200 GET /js/views/MensagemVIew.js
    [1] 20.09.07 10:47:12 200 GET /js/models/Negociacao.js
    [1] 20.09.07 10:47:12 200 GET /js/views/view.js
    [1] 20.09.07 10:47:15 304 GET /css/bootstrap.css
    [1] 20.09.07 10:47:15 304 GET /css/bootstrap-theme.css
    [1] 20.09.07 10:47:15 304 GET /lib/system.js.map
    [1] 20.09.07 10:47:15 404 GET /css/bootstrap.css.map
    [1] 20.09.07 10:47:15 404 GET /css/bootstrap-theme.css.map
2 respostas
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted 
{"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN alurabank@1.0.0 No description
npm WARN alurabank@1.0.0 No repository field.

+ concurrently@3.4.0
added 14 packages from 10 contributors and audited 240 packages in 16.125s

4 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

Não sei se tem relação, mas o "npm audit fix" não resolveu essa vulnerabilidade apontada.

npm audit

=== npm audit security report ===                        


                                 Manual Review                                  
             Some vulnerabilities require your attention to resolve             



  Low             Prototype Pollution                                           

  Package         minimist                                                      

  Patched in      >=0.2.1 <1.0.0 || >=1.2.3                                     

  Dependency of   lite-server [dev]                                             

  Path            lite-server > minimist                                        

  More info       https://npmjs.com/advisories/1179                             

found 1 low severity vulnerability in 240 scanned packages
  1 vulnerability requires manual review. See the full report for details.

Devo baixar esses 2 arquivos?

  • bootstrap.css.map
  • bootstrap-theme.css.map

ou era pra ser gerado automaticamente?

solução!

Resolvido. Rodei "npm update @types/jquery --dev".

Os arquivos mencionados acima, não possuem relação com o problema. O vs code estava compilando um código com erro, quando atualizei a versão do @types/jquery, ele foi capaz de apontar o erro para correção.