Failed to compile Vue project and getting “Mixed spaces and tabs no-mixed-spaces-and-tabs” error

56
June 10, 2021, at 10:20 PM

Please find the below details with error.

Error Details: Failed to compile.

./src/components/Header.vue Module Error (from ./node_modules/eslint-loader/index.js):

H:\project\VueProjects\stock-trader\src\components\Header.vue 27:2 error Mixed spaces and tabs no-mixed-spaces-and-tabs

✖ 1 problem (1 error, 0 warnings)

Header.vue

<template>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <router-link to="/" class="navbar-brand">Stock Trader</router-link>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <router-link to="/portfolio" activeClass="active" tag="li"
            ><a>Portfolio</a></router-link
          >
          <router-link to="/stocks" activeClass="active" tag="li"
            ><a>Stocks</a></router-link
          >
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">End day</a></li>
          <li class="dropdown">
            <a
              href="#"
              class="dropdown-toggle"
              data-toggle="dropdown"
              role="button"
              aria-haspopup="true"
              aria-expanded="false"
              >Save & Load <span class="caret"></span
            ></a>
            <ul class="dropdown-menu">
              <li><a href="#">Save Data</a></li>
              <li><a href="#">Load Data</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Stock Trader</title>
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"/>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

enter image description here

Please advise.

Edited part after resolution of first query.

Desired result screenshot enter image description here

Result getting screenshot enter image description here

Answer 1

Editors like VS code have an option to convert all whitespace to tabs or spaces which will prevent your node package manager build from complaining about mixed whitespace encodings (tabs vs spaces). Try clicking 'Select Indentation' located in the bottom right corner in VS code, or look for (or Google) an option for whatever editor you are using, to convert all the whitespace to spaces or tabs.

READ ALSO
Kendo MVC Map: draw a path line with arrow

Kendo MVC Map: draw a path line with arrow

I am using Kendo MVC Map to display transaction dataWith the reference of https://docs

23
Java - file writing - access denied

Java - file writing - access denied

I'm trying to write a file from my Java application but I can't write it anywhere but inside the app directoryI'm using Windows 10

34
Plyr Speed Opens from Above - Want it to open from below

Plyr Speed Opens from Above - Want it to open from below

So, I have this website where there's audio and the player is Plyr (https://githubcom/sampotts/plyr)

50
NodeJs - how to populate the model view with data from another model

NodeJs - how to populate the model view with data from another model

I am practicing Node by making a simple inventory app, in which I have 3 models: Item, Category and ManufacturerWhat I want to do is, when displaying an item details, to include the Category and Manufacturer associated with that specific item, however...

29