ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ when using browserify

I am building a web app and want to use node.js to build it.

My HTML:

<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>My Class</title>
</head>
<body>
     <p class="myClass" id="myID">Click Here</p>

<script src="index.js"></script>
</body>
</html>

js file:

require("dotenv").config();
const axios = require("axios");

const { myVar } = require("./ither.js");

document.addEventListener("click", function () {
  // DO SOMETHING
});

package.json dependencies:

"dependencies": {
    "axios": "^1.4.0",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "require": "^2.4.20",
  },
"devDependencies": {
   "@types/express": "^4.17.17"
}

When I run the js file (node index.js) I am getting ReferenceError: document is not defined error on my terminal and on my browser I am getting Uncaught ReferenceError: require is not defined error.

After some research, I read about browserify and did the following:

npm install -g browserify

src/index.js > src/bundle.js

This is the error I am getting:

/node_modules/axios/index.js:1
import axios from './lib/axios.js';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

What am I missing here?

JQuery HIDE & SHOW elements LOGIC

This code will show or hide buttons depending on the user’s selection from 2 radio buttons.
The code works well if I don’t hide any element after the page loads, but if I hide the second button when the page loads, that button doesn’t display again, even if I use the .show() property.

Why is this failing?

<script>
  $(document).ready(function(){
    
    $("#button2").hide();
    
    $('#button1').click(function(event) {
       $("#button2").hide();
       $("#button1").show();
     });
                            
    $('#button2').click(function(event) {
       $("#button1").hide();
       $("#button2").show();
     });                        
  });   
</script>

‘x is not defined’ error in Microsoft ClearScript

I would like to create a basic .NET wrapper for the xkpasswd JavaScript library (see generate.js source-code here, and the live demo here). To accomplish this, I am using Microsoft ClearScript.

I have two problems. The first of them I think it is solved or partially solved…

The first problem I had is when trying to execute the generate.js file, I get an error message: “require is not defined“. I tried to solve the error by setting the document category to ModuleCategory.CommonJS when executing the script document (engine.ExecuteDocument(".generate.js", ModuleCategory.CommonJS)) which I figured it out after I seen a similar solution in this answer; and also doing changes to get rid of ‘fs’ and ‘path’ modules from node.js, so this is the code that I’m executing now:

//var fs = require('fs');
//var path = require('path');
var defaultWordList = require('./xkpasswd-words.json');

// define helpers
var h = {
  random: function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  },

  getRandomWord: function getRandomWord(wordList) {
    return wordList[h.random(0, wordList.length - 1)];
  },

  resolveComplexity: function resolveComplexity(complexity) {
    // Patterns can consist of any combination of the following: (w)ords, (d)igits, (s)eparators
    var compl = complexity || 2;
    var rtn = {};
    rtn.separators = '#.-=+_';
    if (compl < 1) compl = 1;
    if (compl > 6) compl = 6;

    if (compl === 1) rtn.pattern = 'wsw';
    if (compl === 2) rtn.pattern = 'wswsw';
    if (compl === 3) rtn.pattern = 'wswswsdd';
    if (compl === 4) rtn.pattern = 'wswswswsdd';

    if (compl === 5) {
      rtn.pattern = 'wswswswswsdd';
      rtn.separators = '#.-=+_!$*:~?';
    }

    if (compl === 6) {
      rtn.pattern = 'ddswswswswswsdd';
      rtn.transform = 'alternate';
      rtn.separators = '#.-=+_!$*:~?%^&;';
    }

    return rtn;
  },

  processOpts: function processOpts(opts) {
    var rtn = {};

    var complexity = parseInt(opts.complexity, 10);
    complexity = typeof complexity === 'number' ? complexity : 3;

    var predefined = h.resolveComplexity(complexity);
    var separators = typeof opts.separators === 'string' ? opts.separators : predefined.separators;

    rtn.pattern = opts.pattern || predefined.pattern;
    rtn.separator = separators.split('')[h.random(0, separators.length - 1)];
    rtn.transform = opts.transform || predefined.transform || 'lowercase';
    rtn.wordList = opts.wordList;

    return rtn;
  },

  // this needs to support the following options:
  // 1) ""words.json""
  // 2) ""words.txt""
  // 3) ""orange,banana, fizz, buzz"" (string of comma-separated words)
  readCustomWordList: function readCustomWordList(input) {
    var data;
    var rtn = [];

    if (Array.isArray(input)) {
      data = input;
    }

    // parse string input
    if (typeof input === 'string') {
      var tmpWordList = input.split(',');

      if (tmpWordList.length === 1) {
        //var targetFile = path.resolve(tmpWordList[0]);
        var fileName = tmpWordList[0];
        var shell = new ActiveXObject('WScript.Shell');
        var targetFile = shell.CurrentDirectory + '\' + fileName;

        if (targetFile.indexOf('.json') === targetFile.length - 5) {
          // eslint-disable-next-line
          data = require(targetFile);
        }

        if (targetFile.indexOf('.txt') === targetFile.length - 4) {
          //var fileContents = fs.readFileSync(targetFile).toString();
          var fileSystem = new ActiveXObject('Scripting.FileSystemObject');
          var file = fileSystem.OpenTextFile(targetFile, 1);
          var fileContents = file.ReadAll();
          file.Close();

          data = fileContents.split('n');
        }
      }

      if (!data) {
        data = tmpWordList;
      }
    }

    // if there's no data return false
    if (!data) {
      return false;
    }

    // remove empty
    for (var i = 0; i < data.length; i++) {
      var word = typeof data[i] === 'string' ? data[i].trim() : '';
      if (word.length) {
        rtn.push(word);
      }
    }

    return rtn;
  }
};

module.exports = function main(opts) {
  var o = h.processOpts(opts || {});
  var pattern = o.pattern.split('');
  var uppercase = (typeof o.transform === 'string' && o.transform.toLowerCase() === 'uppercase');
  var password = [];

  var wordList = defaultWordList;

  var customWordList = h.readCustomWordList(o.wordList);

  if (Array.isArray(customWordList) && customWordList.length) {
    wordList = customWordList;
  }

  pattern.forEach(function generatePasswordSegment(type) {
    var value;
    if (type === 'd') value = h.random(0, 9);
    if (type === 's') value = o.separator;
    if (type === 'w' || type === 'W') {
      value = h.getRandomWord(wordList);
      if (typeof o.transform === 'string' && o.transform.toLowerCase() === 'alternate') {
        uppercase = !uppercase;
      }
      if (uppercase || type === 'W') {
        value = value.toUpperCase();
      } else {
        value = value.toLowerCase();
      }
    }

    password.push(value);
  });

  return password.join('');
};

Note: I’m not sure if the changes I did will work as expected, anyway I don’t require to read external word-list files in the readCustomWordList functionality, so I could completely remove that code in the worst case and to load only a string array with the words.

The second and current problem I’m having, is that I get an error when trying to get the “main” function to use it. The error message says: main is not defined.

This is the code I’m using:

Using engine As New V8ScriptEngine("xkpasswd_engine", V8ScriptEngineFlags.None)
    engine.ExecuteDocument("generate.js", ModuleCategory.CommonJS)

    Dim mainFunction As ScriptObject =
        DirectCast(engine.Evaluate("main"), ScriptObject)

    Dim opts As Object = New With {
        .complexity = 3,
        .separators = "#.-=+_",
        .pattern = "wswswsdd",
        .transform = "lowercase",
        .wordList = Nothing
    }

    Dim password As String =
        CStr(mainFunction.Invoke(asConstructor:=False, opts))

    Console.WriteLine("Generated password: " & password)

End Using

What I’m doing wrong and how to fix it?.

I think maybe it is just a matter of figuring out the correct naming to retrieve “main”?. I tried to get “module.exports” but I get a module is not defined error too.

Javascript async function not executing

I am making a website that reads pdf files and filters through them. For this I am using React JS for the front end and pdfjs-dist to read the pdfs.

I have a file App.jsx that has the components. And a file pdfReader.js that contains the functions for reading the pdfs.

The problem essentially is that lines that contain the await keyword dont execute, and neither do any of the lines below the await line in a given function.

When I test pdfReader.js on it’s own, it successfully reads and filters the pdfs. When the function filterURLs() (from pdfReader.js) is called in App.jsx, nothing happens. After using log statements to debug, I found that the function call simply doesnt do anything after the first await statement in the function.

for example:

filterURLs(keyword, fileList).then(
        (fiteredLinks) => { console.log(fiteredLinks) }
   )

filterURLs returns a list of URL strings.

And here it is in pdfReader.js:

export async function filterURLs(word, urlArray) {
  console.log("FILTERING THE URLS.....");
  const newFileArr = [];
  for (let i = 0, len = urlArray.length; i < len; i++) {
    if (await checkPDF(word, urlArray[i])) {
      newFileArr.push(urlArray[i]);
    }
  }
  console.log("Filtered URLs:", newFileArr); // Log the filtered URLs

  return newFileArr
}

which calls these functions:

export async function getContent(src) {
  try {
    const doc = await getDocument(src).promise; 
// Based on log statements that i have ommitted from the code for readability, the function stops executing from the above line (and the error message doesnt print either)
    } catch(error) {
      console.log("GET DOCUMENT ERROR");
    }
    const page = await doc.getPage(1);

    const content = await page.getTextContent();

    const items = content.items.map(item => item.str);
    const text = items.join(' '); // Join all the items into a single string
    return text;
  }




export async function checkPDF(word, src) {
  console.log("Checking PDF....")
    const text = await getContent(src);
    const inPDF = text.includes(word);
    console.log("DONE Checking PDF....", inPDF);
    return inPDF;
}

export async function wordInPDF(word, src) {
    return checkPDF(word, src) ? 1 : 0
}

I am new to Javascript and React so I dont know if I’m using await wrong or something like that. I have no idea how to fix it, as i cant read PDFs without using await. If someone could help I’d really appreciate it, and if I need to explain the problem better or show more code let me know and i will readily do so.

Is storing files for users in my server a bad practice?

Hey there so I have a Express js + React js application. I currently use MySQl for my database management. In my database I store variables for each user such as their email, password(hashed), and their user id. This works great; however, I wish to make an inventory for the user. This would be an array where it has values to save the ID of the item they own and the name of it. How would I go about doing this? Should I make something in my database? Or create a text/json file storing those variables to describe their inventory and store it on the server? Any answers will help! I am extremely new to developing full-stack web applications.

Tabulator : Row Selections Column – Filter to show selected Rows

I have a nice Tabulator table showing an item list.

For the first column I have a rowSelection type formatter for users to select the row.

{
    formatter: "rowSelection",
    titleFormatter: "rowSelection",
    titleFormatterParams: {
        rowRange: "active"
    },
    align: "center",
    frozen: true,
    headerSort: false,
}

And it does it’s job with selections persisting through filtering of other columns.

enter image description here

Is it possible to add a headerfilter to the rowSelection column to a) clear other filters, and b) filter the table to show only selected rows?

Find elements within a specific MongoDB document’s array

I think what I am trying to do is fairly simple, but I may be phrasing it incorrectly because I can’t find the answer anywhere. I have a MongoDB schema that looks like this:

{
    title: "some movie"
    tickets: [
        {
            isSold: false,
            id: 1,
        },
        {
            isSold: true,
            id: 2,
        }
    ]
}

I want to 1) find the document based solely on the title property; and 2) once the document is found, then query the array to find all elements of that array where isSold is true. Is it possible to do this with MongoDB queries and without having to use some kind of for-loop?

How to connect to a backend running on a different port in Next.js?

I’m developing a Next.js application and I need to connect to a backend server that is running on a different port. I’m having trouble figuring out how to establish this connection.

Currently, my Next.js application is running on port 3000, while the backend server is running on port 8000. I want to make API calls from my Next.js pages to the backend server to fetch data and perform CRUD operations.

I have tried using the fetch() function in Next.js to make the API calls, but it seems to default to the same port (3000) as the frontend. I’m unsure how to configure it to connect to the backend server on port 8000.

Here’s a simplified example of what I’ve tried:

fetch('/api/data') // This defaults to port 3000
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

I’ve also looked into using the http-proxy-middleware package to set up a proxy, but I’m not sure if that’s the best approach for a Next.js application.

Could someone please guide me on how to establish a connection to a backend running on a different port (8000) in Next.js? Any help or suggestions would be greatly appreciated. Thank you!

Reset parent in nested navigation route using React Navigation in React Native

So I’ve created a navigation using React Navigation (v6) as follows:

  • Home
  • Work – Work.js
    • Work Details – WorkDetails.js

Upon selecting a specific work item from the Work overview screen (Work.js), you’re taken to directed to the Word Details screen to see more details. This works as intended, however after doing so, pressing/clicking on “Work” to get back to the overview screen no longer works. Nothing happens from the Work Details page, and if you click home and come back, you simply come back to the details specific page you just left.

In order to navigate to the Work Details screen without having it listed in the primary navigation, I’m using a combination of Drawer and Stack navigators as follows:

App.js

function DrawerMenu() {
  return (
    <Drawer.Navigator 
      useLegacyImplementation 
      screenOptions={{
        headerShown: true, 
        drawerPosition: 'right',
        overlayColor: 'rgba(0,0,0,.5)',              
        drawerActiveTintColor: text,
        drawerInactiveTintColor: text,
        drawerStyle: { backgroundColor: bg, },        
      }}      
      drawerContent={(props) => <CustomDrawerContent {...props} />} >
        <Drawer.Screen name="Home"  component={HomeDrawer}  options={customDrawOptions} />
        <Drawer.Screen name="Work"  component={WorkMenu}    options={customDrawOptions} />
        <Drawer.Screen name="Posts" component={PostsDrawer} options={customDrawOptions} />         
    </Drawer.Navigator>
  );
}

function WorkMenu(){
  return (
    <Stack.Navigator initialRouteName="WorkOverview" 
      useLegacyImplementation
      screenOptions={{
        headerShown: true, 
        drawerPosition: 'right',
        overlayColor: 'rgba(0,0,0,.5)',              
        drawerActiveTintColor: text,
        drawerInactiveTintColor: text,
        drawerStyle: { backgroundColor: bg, },        
      }} >
      <Stack.Screen name="WorkOverview" component={WorkDrawer}       options={{ headerShown: false }} />
      <Stack.Screen name="WorkDetail"   component={WorkDetailDrawer} options={{ headerShown: false }} />
    </Stack.Navigator>  
  );
}

export default function App() {
  return (
    <NativeBaseProvider theme={theme}>
      <NavigationContainer>
        <DrawerMenu />
      </NavigationContainer>
    </NativeBaseProvider>
  );
}

And then from the work overview page:

Work.js

import { useNavigation } from '@react-navigation/native';

function WorkTile({data}) {
    const navigation = useNavigation(); 
    return ( 
        <Pressable mt={5} shadow="2" rounded="lg" w={{ base: 96, md: 72, lg: 48 }} 
            _light={{ bg: "coolGray.50" }} 
            _dark={{ bg: "gray.800" }} 
            overflow={"hidden"}            
            onPress={() => 
                navigation.navigate("WorkDetail", 
                    { 
                        initial: false, 
                        workDetail: data 
                    }
                )
            }
        >
        ...    
        </Pressable>
    );
}

export default WorkTile;

Which just sends the relevant workDetail: data object to WorkDetails.js which then just gets peppered throughout various JSX elements.

The desired behavior is similar to how it would react on the web:
Home -> Work -> Work Details(1) -> Work -> Work Details(2) -> etc.
However it ends up behaving as:
Home <-> Work Details(1)

I’ve tried adding initial: false when navigating to the WorkDetails.js screen, per the React Navigation docs as well as implementing a reset once on the WorkDetails.js screen, and also updating the config for nested navigation. Most of the similar questions on StackOverflow seem to be a variation of one of those three solutions or seem to be leveraging custom buttons/links (and not automatically generated nav elements in the drawer/header). Regardless, nothing I’ve tried seems to resolve the issue. Any help would be very much appreciated. Thanks in advance!

Flood Fill Algorithm- only coloring outside of the area trying to be filled

I was following a tutorial (https://www.youtube.com/watch?v=a7qCVxq-dWE) about implementing a flood fill algorithm and I thought my code looked exactly the same as the person I was following but mine is not working and his is. The outside of the circles I am drawing get filled and the inside stays white for some reason. And then I can’t fill multiple circles/other drawings. I am pretty new coding and some of this is a bit beyond me and I’m sure there is a better or more efficient way to implement flood fill but this was the most detailed tutorial I came across. Thanks

I have looked back at the tutorial and I cannot tell what is different but this is my code so far and an image of what is happening and what should be happening. Thank you!

let imageData;

function setup() {
  createCanvas(1000, 1000);
}

function draw() {
  drawing();
}

function drawing() {
  if (mouseIsPressed) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

function keyPressed() {
  imageData = drawingContext.getImageData(0, 0, 1000, 1000);
  floodFilling(mouseX, mouseY);
  drawingContext.putImageData(imageData, 0, 0);
}

function floodFilling(x, y) {
  let fillStack = [];
  fillStack.push([x, y]);

  while (fillStack.length > 0) {
    let [x, y] = fillStack.pop();
    if (!valid(x, y)) 
      continue;
  
      if (isPixel(x, y)) 
        continue;
      
    }
  }

    setPixel(x, y);

    fillStack.push([x + 1, y]);
    fillStack.push([x - 1, y]);
    fillStack.push([x, y - 1]);
    fillStack.push([x, y + 1]);
  }
}

//set color of pixel
function setPixel(x, y) {
  let pixels = imageData.data;

  let i = (y * width + x) * 4;

  pixels[i] = 255;
  pixels[i + 1] = 0;
  pixels[i + 2] = 0;
  pixels[i + 3] = 255;

}

//make sure it has color
function isPixel(x, y) {
    let pixels = imageData.data;

    let i = (y * width + x) * 4;

    return pixels[i + 3] > 0;
}

//make sure it is in bounds of canvas
function valid(x, y) {
  return x >= 0 && x <= width - 1 && y >= 0 && y <= height - 1;
}
[[the problem/what should be happening](https://i.stack.imgur.com/XOwYB.png)](https://i.stack.imgur.com/LNLeV.png)```

not returning data from mongo db database while using api

I created an api of route ‘/’ and when i should access this i should get all the products.
How i am using this to get data.Here is flow.
There is controllers folder, services folders and routes folder. From routes ‘/’ the controller getProducts() is called and then calling getProducts() there is a statement which calls getProducts() in services.js in services.js it tries to get data from mongo db data base but it is not returning any data. Can you please look the issue.
Here is controller code :

const productService = require('../services/productService')
const getAllProducts = async (req, res) => {
    const allProducts = await productService.getAllProducts(body);
    res.send({status:'ok',data:allProducts});
  };

here is code in services.js

const Product = require('../database/models/ProductModel');
const mongoose = require('mongoose');
const getAllProducts = () => {
  const p = Product.find({});
  console.log(p)
  return p;
  };

And here is product Model

const mongoose = require('mongoose');
const productSchema = mongoose.Schema(
    {
        title:{
            type:String,
            required:[true,"Please enter a product name"]
        },
},
    {
        timestamps: true
    }
)
const Product = mongoose.model('Product',productSchema);
module.exports = Product;

When i use async and await in getProducts of services.js i get nothing in records but [] but when i do not use async and await and i use console.log to see what is there it prints something like this

Query {
  _mongooseOptions: {},
  _transforms: [],
  _hooks: Kareem { _pres: Map(0) {}, _posts: Map(0) {} },
  _executionStack: null,
  mongooseCollection: Collection {
    collection: Collection { s: [Object], client: [MongoClient] },
    Promise: [Function: Promise],
    modelName: 'Product',
    _closed: false,
    opts: {
      autoIndex: true,
      autoCreate: true,
      schemaUserProvidedOptions: [Object],
      capped: false,
      Promise: undefined,
      '$wasForceClosed': undefined
    },
    name: 'products',
    collectionName: 'products',
    conn: NativeConnection {
      base: [Mongoose],
      collections: [Object],
      models: [Object],
      config: {},
      replica: false,
      options: null,
      otherDbs: [],
      relatedDbs: {},
      states: [Object: null prototype],
      _readyState: 1,
      _closeCalled: undefined,
      _hasOpened: true,
      plugins: [],
      id: 0,
      _queue: [],
      _listening: false,
      _connectionOptions: [Object],
      _connectionString: 'mongodb+srv://admin:somethinglikethis.mongodb.net/?retryWrites=true&w=majority',
      client: [MongoClient],
      '$initialConnection': [Promise],
      db: [Db],
      host: 'ac-c0lqyqx-shard-00-00.wq6uzb8.mongodb.net',
      port: 27017,
      name: 'test'
    },
    queue: [],
    buffer: false,
    emitter: EventEmitter {
      _events: [Object: null prototype] {},
      _eventsCount: 0,
      _maxListeners: undefined,
      [Symbol(kCapture)]: false
    }
  },
  model: Model { Product },
  schema: Schema {
    obj: {
      title: [Object],
      description: [Object],
      category: [Object],
      quantity: [Object],
      pictures: [Object],
      owner: [Object]
    },
    paths: {
      title: [SchemaString],
      description: [SchemaString],
      category: [SchemaString],
      quantity: [SchemaString],
      pictures: [SchemaString],
      owner: [SchemaString],
      _id: [ObjectId],
      createdAt: [SchemaDate],
      updatedAt: [SchemaDate],
      __v: [SchemaNumber]
    },
    aliases: {},
    subpaths: {},
    virtuals: { id: [VirtualType] },
    singleNestedPaths: {},
    nested: {},
    inherits: {},
    callQueue: [],
    _indexes: [],
    methods: { initializeTimestamps: [Function (anonymous)] },
    methodOptions: {},
    statics: {},
    tree: {
      title: [Object],
      description: [Object],
      category: [Object],
      quantity: [Object],
      pictures: [Object],
      owner: [Object],
      _id: [Object],
      createdAt: [Object],
      updatedAt: [Function: Date],
      __v: [Function: Number],
      id: [VirtualType]
    },
    query: {},
    childSchemas: [],
    plugins: [ [Object], [Object], [Object], [Object], [Object] ],
    '$id': 1,
    mapPaths: [],
    s: { hooks: [Kareem] },
    _userProvidedOptions: { timestamps: true },
    options: {
      timestamps: true,
      typeKey: 'type',
      id: true,
      _id: true,
      validateModifiedOnly: false,
      validateBeforeSave: true,
      read: null,
      shardKey: null,
      discriminatorKey: '__t',
      autoIndex: null,
      minimize: true,
      optimisticConcurrency: false,
      versionKey: '__v',
      capped: false,
      bufferCommands: true,
      strictQuery: false,
      strict: true,
      pluralization: true
    },
    '$timestamps': { createdAt: 'createdAt', updatedAt: 'updatedAt' },
    '$globalPluginsApplied': true
  },
  op: 'find',
  options: {},
  _conditions: {},
  _fields: undefined,
  _updateDoc: undefined,
  _path: undefined,
  _distinctDoc: undefined,
  _collection: NodeCollection {
    collection: Collection {
      collection: [Collection],
      Promise: [Function: Promise],
      modelName: 'Product',
      _closed: false,
      opts: [Object],
      name: 'products',
      collectionName: 'products',
      conn: [NativeConnection],
      queue: [],
      buffer: false,
      emitter: [EventEmitter]
    },
    collectionName: 'products'
  },
  _traceFunction: undefined,
  '$useProjection': true
}

in this you can see products which is my collection there and i want to get all products in response but not getting. I am new to express and mongo can you spot the issue

How to exclude files for unit test in vue?

I have an issue in a file when I run unit test in vueJs, this file is located in the path “webapp/src/components/fileDownloader/downloaderFile.js” do you know how to avoid this file when I run npm run test:unit? I tried to avoid this file using this in sonnar-project.properties:

sonar.exclusions=webapp/node_modules/**,webapp/tests/unit/**,webapp/coverage/lcov-report/**,webapp/src/models/**,webapp/src/components/fileDownloader/downloaderFile.js
sonar.coverage.exclusions=webapp/src/components/fileDownloader/downloaderFile.js

and I tried to exclude It in the jest.config.js using this:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js'
  ],
  coveragePathIgnorePatterns: [
    'webapp/src/components/fileDownloader/downloaderFile.js',
  ]
};

but both options didn’t worked, do you know how can I archive this? thanks for the help.

Add small “buffer” to flex wrap in css

Im creating a multi-select-field in vue and SCSS. A cross symbol is being displayed on each
element when hovered, inside a parent flex wrap element. So naturally when the child elements change in size thay wrap. Therefore I want to create a small “buffer” in the wrap parent element so that they are wrapped before the cross is taking up space. I’ve tried to use a buffer padding on the flex wrap div that gets removed on hover, but it affects all rows therefore it did not work?

Any way to achieve this without the children inside the flex wrap exactly taking up space?

Here is how it looks now:
enter image description here

I have no idea of how to tackle this problem so I have no code to show, but maybe grid would work better?

I try to avoid direct dom manipulation because I’m using a web framework. So a non pure css or vue solution would also work great!

I cannot get the DataTables.net Bootstrap 5 example to work

I am trying to learn how to use the Datatables.net bootstrap 5 styling example,https://datatables.net/examples/styling/bootstrap5.html. I think I did everything as shown in the example code but I am not getting the end result as shown in the example, my html page shows a DataGrid but the pagination and data-filtering is not showing up on the page.
In the developer tools of the browser I opened up the console and it is showing the following errors.
enter image description here

Index.html file have the following code,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Table</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0-alpha3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap5.min.css">
</head>
<body>
    <table id="example" class="table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009-01-12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012-03-29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012-12-02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012-08-06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010-10-14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009-09-15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008-12-13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008-12-19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013-03-03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008-10-16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012-12-18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010-03-17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012-11-27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010-06-09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009-04-10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012-10-13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012-09-26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011-09-03</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009-06-25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011-12-12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sydney</td>
                <td>23</td>
                <td>2010-09-20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009-10-09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010-12-22</td>
                <td>$92,575</td>
            </tr>
            <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010-11-14</td>
                <td>$357,650</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011-06-07</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010-03-11</td>
                <td>$850,000</td>
            </tr>
            <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011-08-14</td>
                <td>$163,000</td>
            </tr>
            <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sydney</td>
                <td>37</td>
                <td>2011-06-02</td>
                <td>$95,400</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009-10-22</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011-05-07</td>
                <td>$145,000</td>
            </tr>
            <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008-10-26</td>
                <td>$235,500</td>
            </tr>
            <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011-03-09</td>
                <td>$324,050</td>
            </tr>
            <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009-12-09</td>
                <td>$85,675</td>
            </tr>
            <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2008-12-16</td>
                <td>$164,500</td>
            </tr>
            <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2010-02-12</td>
                <td>$109,850</td>
            </tr>
            <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009-02-14</td>
                <td>$452,500</td>
            </tr>
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008-12-11</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008-09-26</td>
                <td>$645,750</td>
            </tr>
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011-02-03</td>
                <td>$234,500</td>
            </tr>
            <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011-05-03</td>
                <td>$163,500</td>
            </tr>
            <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009-08-19</td>
                <td>$139,575</td>
            </tr>
            <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013-08-11</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009-07-07</td>
                <td>$87,500</td>
            </tr>
            <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012-04-09</td>
                <td>$138,575</td>
            </tr>
            <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010-01-04</td>
                <td>$125,250</td>
            </tr>
            <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012-06-01</td>
                <td>$115,000</td>
            </tr>
            <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013-02-01</td>
                <td>$75,650</td>
            </tr>
            <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011-12-06</td>
                <td>$145,600</td>
            </tr>
            <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011-03-21</td>
                <td>$356,250</td>
            </tr>
            <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009-02-27</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010-07-14</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008-11-13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011-06-27</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011-01-25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table 

<script src="https://code.jquery.com/jquery-3.5.1.js"></script> 
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script> 
<script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap5.min.js"></script>    
<script src="./app.js"></script>
</body>
</html>

And app.js file has the following code as shown in example

    
new DataTable('#example');

I am not an experienced programmer and I am trying to learn JavaScript by creating a simple webapp to display csv file. I even watched couple Youtube videos about this and seems like they are only doing the steps as shown in the website. Only difference I noticed was in the youtube tutorials they are using the following code in app.js file I tried it but it didnt work for me either.
Any feedback or advise will be highly appreciated.

$(document).ready(function() {

    $('#example').DataTable();

} );