javascript – Page 6528 – Blancer.com Tutorials and projects

error ajax laravel 405 method not allowed

I try to insert data in database with Ajax, but it doesn’t work
Error:
POST http://127.0.0.1:8000/%7B%7Broute(‘achats.store’)%7D%7D 405 (Method Not Allowed)
Controller:

$achat = new achat();
    $achat->libellé=$request->input('libll');
    $achat->date_achat=$request->input('achatDate');
    $achat->montant_total=$request->input('montant');
    $achat->Agent=Auth::user()->id;
    $achat->fournisseur=$request->get('frn');
    if($request->file('bon')){
        $bon=$request->file('bon');
        $achat->bon=$bon->getClientOriginalName();
        $bon->move('bon',$bon->getClientOriginalName());
    }
    $achat->save();
       
           return response()->json([
               'status'=>true,
               'msg'=>'Sauvegardé avec succès'
           ]);
        
    
            return response()->json([
                'status'=>false,
                'msg'=>'Le sauvegarde a échoué veuillez réessayer'
            ]);

Code js:

   $("#btn_submit").click(function(e){
   e.preventDefault();
   $.ajax({
     type:'POST',
     url:"{{route('achats.store')}}",
     data:$("#frm_add").serialize(),
     success: function(date){

     },error : function(reject){

     }
   })

})

solve this destructuring method [closed]

const places = ['delhi', 'gurgaon', 'jaipur', 'pune']
const morePlaces = ['kochi', 'hyderabad', 'Shimla', 'Srinagar']

IMPORTANT: solve all problems using using destructuring and rest syntax

remove first element from places array and print the remaining array
insert that element at the start of the morePlaces array and print the new array
take out last three element from the morePlacesArray and take out first three elements from the places array
and print the combined array

result =  ['hyderabad', 'Shimla', 'Srinagar', 'delhi', 'gurgaon', 'jaipur',]

Why counter increases and fn is called? How it works?

I solved kata on codewars. Acctually I did this by accident and I don’t understand why this code works. May you explain it?

Kata:

Write a function, persistence, that takes in a positive parameter num and returns its multiplicative persistence, which is the number of times you must multiply the digits in num until you reach a single digit.

39 –> 3 (because 39 = 27, 27 = 14, 1*4 = 4 and 4 has only one digit)

My solution:

function persistence(num) {
  let count = 0;
  const arr = [...num.toString()];
  const sumArr = arr.reduce((res, val) => (res *= val));

  if (arr.length > 1) {
    **// Why? How this line works?
    // Why it doesn't crashes?
    // Why it returns correct counter value and calls the function?**
    count += 1 + persistence(sumArr)
  }
  return count;
}

persistence(39); //3

Why if I do like this, the counter do not save the result:

  if (arr.length > 1) {
    count += 1
    persistence(sumArr)   }

Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: using phaser

I’m using a phaser, I keep getting the following error:

Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image
element contains cross-origin data, and may not be loaded.

The images are on my computer, same as the game.js file

<html>
  <head>
    <meta charset="UTF-8">
    <title>Jumper - written with Phaser 2</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.0.7/phaser.min.js"></script>
    <link rel="stylesheet" href="./src/game.css" />
  </head>
  <body><script type="text/javascript" src="./src/game.js"></script></body>
</html>

// Linted with standardJS - https://standardjs.com/

// Initialize the Phaser Game object and set default game window size
const game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
  preload: preload,
  create: create,
  update: update
})

// Declare shared variables at the top so all methods can access them
let score = 0
let scoreText
let platforms
let diamonds
let cursors
let player

function preload () {
  // Load & Define our game assets
  game.load.image('sky', './assets/sky.png')
  game.load.image('ground', './assets/platform.png')
  game.load.image('diamond', './assets/diamond.png')
  game.load.spritesheet('woof', './assets/woof.png', 32, 32)
}

function create () {
  //  We're going to be using physics, so enable the Arcade Physics system
  game.physics.startSystem(Phaser.Physics.ARCADE)

  //  A simple background for our game
  game.add.sprite(0, 0, 'sky')

  //  The platforms group contains the ground and the 2 ledges we can jump on
  platforms = game.add.group()

  //  We will enable physics for any object that is created in this group
  platforms.enableBody = true

  // Here we create the ground.
  const ground = platforms.create(0, game.world.height - 64, 'ground')

  //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
  ground.scale.setTo(2, 2)

  //  This stops it from falling away when you jump on it
  ground.body.immovable = true

  //  Now let's create two ledges
  let ledge = platforms.create(400, 450, 'ground')
  ledge.body.immovable = true

  ledge = platforms.create(-75, 350, 'ground')
  ledge.body.immovable = true

  // The player and its settings
  player = game.add.sprite(32, game.world.height - 150, 'woof')

  //  We need to enable physics on the player
  game.physics.arcade.enable(player)

  //  Player physics properties. Give the little guy a slight bounce.
  player.body.bounce.y = 0.2
  player.body.gravity.y = 800
  player.body.collideWorldBounds = true

  //  Our two animations, walking left and right.
  player.animations.add('left', [0, 1], 10, true)
  player.animations.add('right', [2, 3], 10, true)

  //  Finally some diamonds to collect
  diamonds = game.add.group()

  //  Enable physics for any object that is created in this group
  diamonds.enableBody = true

  //  Create 12 diamonds evenly spaced apart
  for (var i = 0; i < 12; i++) {
    const diamond = diamonds.create(i * 70, 0, 'diamond')

    //  Drop em from the sky and bounce a bit
    diamond.body.gravity.y = 1000
    diamond.body.bounce.y = 0.3 + Math.random() * 0.2
  }

  //  Create the score text
  scoreText = game.add.text(16, 16, '', { fontSize: '32px', fill: '#000' })

  //  And bootstrap our controls
  cursors = game.input.keyboard.createCursorKeys()
}

function update () {
  //  We want the player to stop when not moving
  player.body.velocity.x = 0

  //  Setup collisions for the player, diamonds, and our platforms
  game.physics.arcade.collide(player, platforms)
  game.physics.arcade.collide(diamonds, platforms)

  //  Call callectionDiamond() if player overlaps with a diamond
  game.physics.arcade.overlap(player, diamonds, collectDiamond, null, this)

  // Configure the controls!
  if (cursors.left.isDown) {
    player.body.velocity.x = -150
    player.animations.play('left')
  } else if (cursors.right.isDown) {
    player.body.velocity.x = 150
    player.animations.play('right')
  } else {
    // If no movement keys are pressed, stop the player
    player.animations.stop()
  }

  //  This allows the player to jump!
  if (cursors.up.isDown && player.body.touching.down) {
    player.body.velocity.y = -400
  }
  // Show an alert modal when score reaches 120
  if (score === 120) {
    alert('You win!')
    score = 0
  }
}

function collectDiamond (player, diamond) {
  // Removes the diamond from the screen
  diamond.kill()

  //  And update the score
  score += 10
  scoreText.text = 'Score: ' + score
}

Must supply a value for form control with name: ‘nom’

I am currently trying to update data stored with MongoDB via my form (Angular).
However, I have an error in my browser console:

ERROR Error: NG01002: Must supply a value for form control with name:
‘name’

HTML :

<div class="row justify-content-center mt-5">
  <div class="col-md-4">
    <h1>Modification de vos informations.</h1>
    <form [formGroup]="updateForm" (ngSubmit)="onUpdate()">
      <div class="form-group">
        <label>Nom</label>
        <input class="form-control" type="text" formControlName="nom" required>
      </div>

      <div class="form-group">
        <label>Prénom</label>
        <input class="form-control" type="text" formControlName="prenom" required>
      </div>

      <div class="form-group">
        <label>Email</label>
        <input class="form-control" type="text" formControlName="email" required>
      </div>

      <div class="form-group">
        <label>Mot de passe</label>
        <input class="form-control" type="text" formControlName="password" required>
      </div>

      <div class="form-group">
        <label>Statut</label>
        <input class="form-control" type="text" formControlName="statut" required>
      </div>

      <div class="form-group">
        <label>NombreUC</label>
        <input class="form-control" type="text" formControlName="nombreUC" required>
      </div>

      <div class="form-group">
        <button class="btn btn-primary btn-block" type="submit">Update</button>
      </div>
    </form>
  </div>
</div>

TS :

import { Component, OnInit, NgZone } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { CrudService } from './../../../service/crud.service';
import { FormGroup, FormBuilder } from "@angular/forms";


@Component({
  selector: 'app-edit-user',
  templateUrl: './edit-user.component.html',
  styleUrls: ['./edit-user.component.css']
})
export class EditUserComponent implements OnInit {

  getId: any;
  updateForm: FormGroup;

  constructor(
    public formBuilder: FormBuilder,
    private router: Router,
    private ngZone: NgZone,
    private activatedRoute: ActivatedRoute,
    private crudService: CrudService
  ) {
    this.getId = this.activatedRoute.snapshot.paramMap.get('id');

    this.crudService.GetUser(this.getId).subscribe(res => {
      this.updateForm.setValue({
        nom: res['nom'],
        prenom: res['prenom'],
        email: res['email'],
        password: res['password'],
        statut: res['statut'],
        nombreUC: res['nombreUC']
      });
    });

    this.updateForm = this.formBuilder.group({
      nom: [''],
      prenom: [''],
      email: [''],
      password: [''],
      statut: [''],
      nombreUC: ['']
    })
  }

  ngOnInit() { }

  onUpdate(): any {
    this.crudService.updateUser(this.getId, this.updateForm.value)
    .subscribe(() => {
        console.log('Updated!')
        this.ngZone.run(() => this.router.navigateByUrl('/admin/list-users'))
      }, (err) => {
        console.log(err);
    });
  }
}

I’m new to this so I’m sorry if I’m not clear enough.. but I haven’t found a solution yet.

find(…) is undefined when fetching data with dynamic url using next.js

When I’m fetching data in my main page everything works as i wantend
but when i’m fetching data in another folder using same code but with dynamic url i got a error when im trying to using methods on array. When i console.log fetched data i got the same array as in my main page

When i delete Link and only want to see book.title it works but i got error when i want to get data from resources

mainpage.js

  const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch('https://gnikdroy.pythonanywhere.com/api/book')
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

return(
         <div>
          {data.results.map((book, index) => (
            <div key={index}>
              <h1>{book.title}</h1>
              <Link href={`/reader/${book.id}`} passHref>
                <h2>
                  {
                    book.resources.find(
                      ({ type }) => type === 'application/epub+zip'
                    ).uri
                  }
                </h2>
              </Link>
            </div>
          ))}
        </div>
)

searchPage.js

  const router = useRouter();
  const { name } = router.query;
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch(`https://gnikdroy.pythonanywhere.com/api/book/?search=${name}`)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
        console.log(data);
      });
  }, []);

return(
        <div>
          {data.results.map((book, index) => (
            <div key={index}>
              <h1>{book.title}</h1>
              <Link href={`/reader/${book.id}`} passHref>
                <h2>
                  {
                    book.resources.find(
                      ({ type }) => type === 'application/epub+zip'
                    ).uri
                  }
                </h2>
              </Link>
            </div>
          ))}
        </div>
)

my errror look like this

my console.log inside fetch in searchPage.js
console.log

How to set focus on a dynamically added text area (angular material)

<button (click)="addTextArea()">Add Comment</button>

<div formArrayName="comments">
  <div *ngFor="let comment of commentsArray.controls; let i=index>
    <textarea>{{comment.value..}}</textarea>
  </div>
</div>

addTextArea() {
 const fc1 = this.fb.control('', [Validators.required]);
 const fc2 = this.fb.control('', [Validators.required]);

 this.commentsArray.insert(0,
   this.fb.group({
      code: fc1,
      value:fc2
   }


}

What I want to do is set focus on the newly added textarea. How would I do that. Thanks

My html page is cutting on mobile screen and scroll bar on x-axis automatically becomes active. What is the issue?

I am working on my porfolio. My project section html page is cutting on mobile screen and scroll bar on x-axis automatically becomes active. What is the issue?.

UI:
User Interface Link OR https://hamzailyas-portfolio-237.web.app/portfolio/projects.html

HTML code:
https://i.stack.imgur.com/639QQ.png

CSS code:

.project-container {
    float: left;
    width: 30%;
    text-align: center;
    border-radius: 6px;
    margin: 40px 22px;
}

#row {
    margin-top: -100px !important;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.project-card {
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
    padding: 70px 20px !important;
    min-width: fit-content;
    text-align: center;
}

.project-card a {
    color: black;
    text-decoration: none;
}

.project-card:hover {
    background: crimson;
    color: white !important;
    transition: all 0.3s ease !important;
    transform: scale(1.05);
}

.project-card:hover a {
    color: white !important;
}

.project-card h1 {
    font-size: 35px;
    text-transform: capitalize;
    font-family: 'Ubuntu', sans-serif;
}

.project-card p {
    font-size: larger;
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
}

.project-card p img {
    height: 30px;
    margin-top: -5px;
}

/* @media only screen and (min-width: 651px) and (max-width: 1100px) { 
    .project-container {
        margin-right: 100px;
    }        
} */

@media screen and (max-width: 1319px) {
    .project-card img {
        margin-right: 7px;
    }
}

@media screen and (max-width: 950px) {
    .project-container {
        width: 50%;
    }
}

@media screen and (max-width: 650px) {
    .project-container {
        width: 70%;
    }
}

@media screen and (max-width: 550px) {
    .project-container {
        width: 90%;
    }

    .project-card img {
        margin-right: 10px;
    }
}

@media screen and (max-width: 450px) {
    .project-card img {
        margin-right: 10px;
    }

    .project-card {
        padding: 60px 10px !important;
        font-size: smaller;
    }
}

JavaScript – Modify localstorage json

I have the following Json, in the browser’s localstorage, I want to know if there is a way to take it and modify it with JavaScript.

The json you are seeing is modified to make it easier to understand the information, but it grows more than 22 thousand lines and exponentially due to the values of the variable called pricelist.

What I want to do is :

grab the json from localstorage.
make a method that goes through all the json and when it finds the variable “pricelist” delete the content that has “items_ids” and “items”
reload the json to the same key

ANNOTATIONS: -the variable lines can be empty.
-the variable pricelist can be false.

Thank you very much for your attention and your comments.

[
{
   "id":"00027-008-0001",
   "data":{
      "lines":[
        [
            0,
            0,
            {
               "product_id":23603,
               "pricelist":{
                  "id":10,
                  "item_ids":[
                     27069,
                     26894
                  ],
                  "items":[
                    {
                        "id":20044,
                        "product_tmpl_id":[
                           13142,
                           "[DNCM1LT] DESENGRASANTE NARANJA CITRUSMAX 1 LT"
                        ]
                    }
                    ]
                },
                "uom_id":[
                    1
                ]
            }
        ],
        [
            0,
            0,
            {
               "product_id":23666,
               "pricelist":false,
                "uom_id":[
                    1
                ]
            }
        ]
        ],
        "pos_session_id":27
    }
},
{
    "id":"00027-008-0002",
    "data":{
       "lines":[
          [
             0,
             0,
             {
                "product_id":23655,
                "pricelist":false,
                 "uom_id":[
                     1
                 ]
             }
         ]
         ],
         "pos_session_id":27
     }
 },
{
    "id":"00027-008-0003",
    "data":{
        "lines":[
        
        ],
        "pos_session_id":27
    }
}]

Jest testing a loop with Booleans

I have the following function in Jest. I have a method called isAquatic that returns a bool depending on the animal.

        const nonAquaticAnimal = ["tiger", "cat", "lion]
        test.each(nonAquaticAnimal)(
          '.isAquatic',
          (input, false) => {
            const animal = isAquatic(input)
            expect(animal).toBe(false);
          },
        );

I have an error that says identifier false is a reserved word and cannot be used here. How can I loop through the array and call this method which returns a boolean?

d3 to account for missing data in line chart

I am using d3.js to create a data-driven path. But the path is not accounting for missing data.

For example,

const src = [{
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 1997,
        "Value": 15.540540540540499
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 1998,
        "Value": 15.540540540540499
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 1999,
        "Value": 22.4489795918367
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2000,
        "Value": 22.972972972973
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2002,
        "Value": 25.3333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2003,
        "Value": 25.3333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2004,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2005,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2006,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2007,
        "Value": 26.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2008,
        "Value": 26.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2009,
        "Value": 27.3333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2010,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2011,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2012,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2013,
        "Value": 26
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2014,
        "Value": 26
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2015,
        "Value": 26.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2016,
        "Value": 28.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2017,
        "Value": 28.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2018,
        "Value": 28.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2019,
        "Value": 30.463576158940398
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2020,
        "Value": 30.463576158940398
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2021,
        "Value": 31.125827814569501
    }
]

////////////////////////////////////////////////////////////
//////////////////////// 1 CREATE SVG ////////////////////
////////////////////////////////////////////////////////////
const width = 1280;
const height = 720;

const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('svg')

svg
//.attr('xmlns', svgns)
    .attr('viewBox', `0 0 ${width} ${height}`)

//---create a rect covering viewBox --- to be deleted later
svg.append('rect')
    .attr('class', 'vBoxRect')
    .attr('width', `${width}`)
    .attr('height', `${height}`)
    .attr('fill', 'none')
    .attr('stroke', 'red')

////////////////////////////////////////////////////////////
//////////////////////// 2 CREATE BOUND ////////////////////
////////////////////////////////////////////////////////////   
const padding = {
    top: 70,
    bottom: 50,
    left: 70,
    right: 190
}

const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width  - padding.right - padding.left;

//create BOUND rect -- to be deleted later
svg.append('rect')
    .attr('class', 'boundRect')
    .attr('x', `${padding.left}`)
    .attr('y', `${padding.top}`)
    .attr('width', `${boundWidth}`)
    .attr('height', `${boundHeight}`)
    .attr('fill', 'none')
    .attr('stroke', 'green')

//create bound element
const bound = svg.append('g')
    .attr('class', 'bound')
    //specify transform, must be .style and not .attr, px needs to be mentioned
    .style('transform', `translate(${padding.left}px,${padding.top}px)`)

////////////////////////////////////////////////////////////
//////////////////////// 3 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////


const scaleX = d3.scaleLinear()
    .range([0, boundWidth])
    .domain(d3.extent(src, d => d.Year))

const scaleY = d3.scaleLinear()
    .range([boundHeight, 0])
    .domain(d3.extent(src, d => d.Value))

////////////////////////////////////////////////////////////
//////////////////////// 4 CREATE AXIS ////////////////////
////////////////////////////////////////////////////////////    

bound.append('g').attr('class', 'yAxis')
    .append('g').attr('class', 'yAxisDetail')    
    .call(d3.axisLeft(scaleY) ) 

const data2 = src.map(d => d.Year)
const count = [...new Set(data2)].length - 1 
const minYear = Math.min([...src])

bound.append('g')
    .attr('class', 'xAxis')
    .append('g')
    .attr('class', 'xAxisBottom')
    .style('transform', `translateY(${boundHeight}px)`)
    .call(d3.axisBottom(scaleX).ticks(count).tickFormat(d3.format("d")))    

////////////////////////////////////////////////////////////
//////////////////////// 5 CREATE PATH ////////////////////
////////////////////////////////////////////////////////////    
    
    const line = d3.line()   
    .x(d => scaleX(d.Year))
    .y(d => scaleY(d.Value))
    
bound.append('g')
     .attr('class', 'valLine')
     .append('path')
     .attr('d', line(src))
     .attr('stroke', 'black')
     .attr('fill', 'none')

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>

    <div id="container" class="svg-container"></div>
    <svg>
   
</svg>
    

</body>
    <script type="text/javascript">
    </script>

</html>

There is no data for Year=2021. Yet, d3 is generating a path between 2001 and 2002. How can I ask d3 to not generate anything between that.

I am hoping for a gap in path between that period.

Nuxt.js 2 Module @nuxtjs/sentry cors blocked request

Please help with my problem.
I install sentry how module to Nuxt.js 2. It’s worked, but i have another problem with CORS.
i do not understand how fix this error.
enter image description here

i use "nuxt": "2.14.5"," @nuxtjs/sentry": "^5.1.7", in my project.
my nuxt.js.config:

modules: ['@nuxtjs/axios', '@nuxtjs/auth', '@nuxtjs/toast', 'vue-scrollto/nuxt', 'nuxt-i18n', '@nuxtjs/gtm', '@nuxtjs/sentry'],

sentry: { dsn: process.env.SENTRY_DSN || '', injectMock: true, injectLoadHook: false, mockApiMethods: true, chunkName: 'sentry', webpackPrefetch: false, webpackPreload: false, },

Quasar with prerender-spa-plugin Unable to prerender all routes

I have an error when I want to use ‘prerender-spa-plugin’ in my quasar application.

 App •  WAIT  • Compiling of "UI" in progress...
[prerender-spa-plugin] Unable to prerender all routes!
 App •  DONE  • "UI" compiled with errors • 8092ms

 App •  ERROR  •  UI  

[prerender-spa-plugin] Unable to prerender all routes!


 App •  COMPILATION FAILED  • Please check the log above for details.

I added prerender-spa-plugin in my package.js

  "dependencies": {
    "@quasar/extras": "^1.12.0",
    "axios": "^0.24.0",
    "core-js": "^3.19.1",
    "html-webpack-plugin": "^5.5.0",
    "quasar": "^2.3.1",
    "vue-i18n": "^9.1.9",
    "vuex": "^4.0.1"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@quasar/app": "^3.2.1",
    "@quasar/quasar-app-extension-qoverlay": "2.0.1",
    "eslint": "^8.2.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.1.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^5.1.1",
    "eslint-plugin-vue": "^7.0.0",
    "eslint-webpack-plugin": "^3.1.1",
    "prerender-spa-plugin": "^3.4.0"
  },

I am trying to use it like this in the quasar.conf.js

I import it like this:

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

build: {
  vueRouterMode: 'history', // available values: 'hash', 'history'
  extendWebpack (cfg) {
    cfg.plugins.push(
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist/spa/'),
        routes: ['/', '/page1']
      })
    )
  },
...
}

Do you have any idea how to solve this problem?

I tried many things that I could find on google but without success.

EJS not showing only some variables

I have this ejs template:

<h1 id="city-name"><%= title %></h1>
<h5 id="weather-description"><%= description %></h5><br>
<i class="bi bi-thermometer-half"></i><p id="temperature"><=% temperature %></p><br>
<i class="bi bi-wind"></i><p id="wind"><=% wind %></p><br>
<i class="bi bi-moisture"></i><p id="humidity"><=% humidity %></p>

and this is my js:

jsonObj = res.data;
desc = jsonObj.weather[0].description;
temp = JSON.stringify(jsonObj.main.temp);
wind = JSON.stringify(jsonObj.wind.speed);
hum = JSON.stringify(jsonObj.main.humidity);
console.log(wind);
console.log(temp);
console.log(hum);
response.render('city_template.ejs', {title : nameCapitalised, description : desc, temperature : temp, wind : wind, humidity : hum});

but in the template it shows only the title and the description, not the other variables, in console it shows wind, temp and hum, what’s wrong?

How to call a parent component method (or lift of state) from a custom React-Select MenuList component?

I have created a custom MenuList button (“Add New User”) at the bottom of a React-Select element to allow for adding another user to the select list. However, I am having trouble figuring out how to handle the event once a new user is created. The codesandbox below contains a simplified version. Specifically, line 29 this._loadData(randomId) does not have the scope to access this of the parent component (obviously). My question is, how to I add a “handleEvent” property so that I can lift up state to the parent component for this custom MenuList component?

Code snippet for the custom MenuList component allowing the user to add a new AppUser:

const MenuButtonAddNewUser = (props) => {
  return (
    <components.MenuList {...props}>
      {props.children}
      <div className="border-top text-center py-2">
        <a
          href="showModalUrl.action"
          onClick={(event) => {
            event.preventDefault();

            // Simluate opening a modal and adding a user
            let randomId = Math.floor(Math.random() * (10 - 4 + 1)) + 4;
            console.log(
              "Simluate loading modal and adding a user with id: " + randomId
            );

            // Tell parent componenent to reload the options from the database
            // and auto-select the new user
            // How do I gain access to "_loadData"???
            //this._loadData(randomId);
            console.log(
              "User added. Call 'this.loadData(" + randomId + ")' here!!"
            );
          }}
        >
          <i className="fa fa-fw fa-user-plus mr-1" /> Add New Agent
        </a>
      </div>
    </components.MenuList>
  );
};