Category: javascript

I am using Swiper JS to create a series of locally hosted thumbs galleries as html files. I have an index page that acts as the global location to navigate into any particular thumbs gallery. I would also like to add the functionality that if you are already inside one of the thumbs galleries (One.html) when you get to the end use the On reachEnd parameter in Swiper JS and jump to the next html in sequence. I am using javascript to get the file path of the active html file when reachEnd is activated, I then parse the file path to get the file name, increment the characters at the end of the file name, concatenate the string back together and use the window.location(newpath) action to redirect to the new url.

I have this working but the problem I cannot seem to figure out is how to handle the situation where I am either at the very first or very last html file. When the on reachEnd parameter is triggered I want to redirect back to the Index.html if the newly incremented file path cannot be found.

I was trying to use a function like this as a fallback for when the file cannot be found but the function does not catch the error and continues to try and open the failing url instead of the redirect.

example.com and fallback.com are replaced with my own concatenated paths and I have also tested directly by using file names I know exist. In both cases it dismisses the fallback redirect.

How do I enforce a redirect when the originalUrl cannot be found.

function redirectToUrl(originalUrl, fallbackUrl) {
  try {
    // Attempt to redirect to the original URL
    window.location.href = originalUrl;
  } catch (error) {
    // If an error occurs (e.g., URL not found), redirect to the fallback URL
    window.location.href = fallbackUrl;
  }
}

// Example usage:
redirectToUrl("https://example.com", "https://fallback.com");

I’m new to Javascript and VueJS.
I’ve built a project using VueJS, but the page doesn’t interact with any database. My aim is to enable editing on the preview, and upon completion, when I click the “Download” button, the page should save the edits as an HTML file.
Below is the code snippet for the button:

<v-dialog :retain-focus="false" v-model="dialogImport" max-width="600px">
  <template v-slot:activator="{ on }">
    <button id="boutonTelechargement" depressed small color="secondary" class="mr-2" @click="save()">
      <v-icon small class="mr-2">mdi-download</v-icon>Download HTML
    </button>
  </template>
</v-dialog>

I tried the blob function:

function save() {
  var htmlContent = ["your-content-here"];
  var bl = new Blob(htmlContent, {type: "text/html"});
  var a = document.createElement("a");
  a.href = URL.createObjectURL(bl);
  a.download = "your-download-name-here.html";
  a.hidden = true;
  document.body.appendChild(a);
  a.click();
}

The “your-content-here” section is currently static, meaning it only takes what I manually write into it. Is there a method to automatically populate it with all the content displayed in the preview? Thank you.

I have account registration on a website and I want the page to display an alert based on the success/failure to create the account.

Here’s the current code I have (I have the alerts currently displayed at all times)

const isNotEmpty = (value) => value.trim() !== '';
const isEmail = (value) => value.includes('@');

function Register(props) {
    const navigate = useNavigate()

    //username input
    const {
        value: usernameValue,
        isValid: usernameIsValid,
        hasError: usernameHasError,
        valueChangeHandler: usernameChangeHandler,
        inputBlurHandler: usernameBlurHandler,
        reset: resetUsername
    } = useInput(isNotEmpty)

    //password input
    const {
        value: passwordValue,
        isValid: passwordIsValid,
        hasError: passwordHasError,
        valueChangeHandler: passwordChangeHandler,
        inputBlurHandler: passwordBlurHandler,
        reset: resetPassword
    } = useInput(isNotEmpty)

    //email input
    const {
        value: emailValue,
        isValid: emailIsValid,
        hasError: emailHasError,
        valueChangeHandler: emailChangeHandler,
        inputBlurHandler: emailBlurHandler,
        reset: resetEmail
    } = useInput(isEmail)

    let formIsValid = false
    if (usernameIsValid && emailIsValid && passwordIsValid) {
        formIsValid = true
    }

    const submitHandler = async event => {
        event.preventDefault()

        const registerInput = {
            username: usernameValue,
            email: emailValue,
            password: passwordValue
        }

        try {
            const res = await axios.post("/api/auth/register", registerInput)
            console.log(registerInput)
        } catch (error) {
            console.log(error.response?.data)
        }

        if (!formIsValid) return

        resetEmail()
        resetUsername()
        resetPassword()
        navigate()



    }


    const emailClasses = emailHasError ? 'form-control invalid' : 'form-control'
    const usernameClasses = usernameHasError ? 'form-control invalid' : 'form-control'
    const passwordClasses = passwordHasError ? 'form-control invalid' : 'form-control'

    return (
        <div className='centered'>
            <form onSubmit={submitHandler} className='register-box'>
                <h3 className="register-title">Create New Account</h3>
                <div className='control-group'>
                    <div className={emailClasses}>
                        <input required
                            type="email"
                            name="email"
                            value={emailValue}
                            placeholder='Email'
                            onChange={emailChangeHandler}
                            onBlur={emailBlurHandler}
                        />
                        {emailHasError && <p className="error-text">Please provide a valid Email</p>}
                    </div>
                    <div className={usernameClasses}>
                        <input required
                            type="text"
                            name="username"
                            value={usernameValue}
                            placeholder='Login ID'
                            onChange={usernameChangeHandler}
                            onBlur={usernameBlurHandler}
                        />
                        {usernameHasError && <p className="error-text">Please enter your future Login ID</p>}
                    </div>
                    <div className={passwordClasses}>
                        <input required
                            type="password"
                            name="password"
                            value={passwordValue}
                            placeholder='Password'
                            onChange={passwordChangeHandler}
                            onBlur={passwordBlurHandler}
                        />
                        {passwordHasError && <p className="error-text">Please enter your future Password</p>}
                    </div>
                </div>

                <Button disabled={!formIsValid}
                    onClick={alertClicked}
                    variant="primary"
                    type='submit'>
                    Create New Account
                </Button>

                <br></br>
                <br></br>

                <Alert variant="success">Account ceation was successful.</Alert>
                <Alert variant="danger">Account creation has failed.</Alert>

            </form>
        </div>
    )
}

export default Register

I have asked a similar question before and while I got an answer that temporarily solved the issue (which was by making two pages and redirect users to each page depending on the registration outcome) it is not quite what I’d like to have.

I’m trying to make two charts in Google Earth Engine. One of the mean temperature across 20 years, and one of days below 5 C. I’m struggling to resolve the error code “Error generating chart: Data column(s) for axis #0 cannot be of type string”. I’m fairly new to GIS, so I apologize if this is obvious. I’ll include my code below.

I’ve tried rewriting my code from the beginning a few times and I’m exhausted with it.

var states = ee.FeatureCollection("TIGER/2018/States");
var arkansas = states.filter(ee.Filter.eq('NAME', 'Arkansas'));
var temp = ee.ImageCollection("MODIS/061/MOD11A1").select('LST_Day_1km')
  .filterDate('2001-01-01','2021-12-31');
  
var KtoC = temp.map(function(image) {
  return image.multiply(0.02).subtract(273.15);
});

var arkTemp = KtoC.mean().clip(arkansas);

var calculateMonthlyStats = function(imageCollection) {
  var months = ee.List.sequence(1, 12);
  var monthlyStats = months.map(function(month) {
    var start = ee.Date.fromYMD(2001, month, 1);
    var end = start.advance(1, 'month');
    var monthlyData = imageCollection.filterDate(start, end);
    
    // Calculate mean and minimum temperatures
    var meanTemp = monthlyData.mean();
    var minTemp = monthlyData.reduce(ee.Reducer.min());
    
    return ee.Feature(null, {
      'month': ee.Number(month), // Cast month to number
      'meanTemp': meanTemp,
      'minTemp': minTemp
    });
  });
  
  return ee.FeatureCollection(monthlyStats);
};

var monthlyStats = calculateMonthlyStats(temp);

var meanTempChart = ui.Chart.feature.byFeature(monthlyStats, 'month', 'meanTemp')
  .setChartType('ColumnChart')
  .setOptions({
    title: 'Monthly Mean Temperature in Arkansas (2001-2022)',
    hAxis: {title: 'Month'},
    vAxis: {title: 'Temperature (°C)'},
    colors: ['orange']
  });

print(meanTempChart);

var calculateAnnualDaysBelow5C = function(imageCollection) {
  var years = ee.List.sequence(2001, 2022);
  var annualStats = years.map(function(year) {
    var start = ee.Date.fromYMD(year, 1, 1);
    var end = start.advance(1, 'year');
    var yearlyData = imageCollection.filterDate(start, end);

    // Calculate number of days below 5°C
    var daysBelow5C = yearlyData.map(function(image) {
      return image.lt(5).rename('below_5C');
    }).sum();

    return ee.Feature(null, {
      'year': ee.Number(year).format('%d'),
      'daysBelow5C': daysBelow5C
    });
  });
  
  return ee.FeatureCollection(annualStats);
};

var annualDaysBelow5C = calculateAnnualDaysBelow5C(KtoC);

var daysBelow5CChart = ui.Chart.feature.byFeature(annualDaysBelow5C, 'year', 'daysBelow5C')
  .setChartType('ColumnChart')
  .setOptions({
    title: 'Annual Count of Days Below 5°C in Arkansas (2001-2022)',
    hAxis: {title: 'Year'},
    vAxis: {title: 'Count of Days Below 5°C'},
    colors: ['blue']
  });

print(daysBelow5CChart);

I’ve added redux-persist so that the state persists after refresh.

But I keep getting this error in the terminal:

✓ Compiled /postings in 599ms (3066 modules)
redux-persist failed to create sync storage. falling back to noop storage.

My store file

import {
  configureStore,
  combineReducers,
  getDefaultMiddleware,
} from '@reduxjs/toolkit';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // Defaults to localStorage for web
import postingsReducer from '@/redux/slices/postingsSlice';
import newPostingFormReducer from '@/redux/slices/newPostingSlice';
import userReducer from '@/redux/slices/userSlice';

const persistConfig = {
  key: 'root',
  storage,
  // Optionally, blacklist any reducers here
};

const rootReducer = combineReducers({
  postings: postingsReducer,
  newPosting: newPostingFormReducer,
  user: userReducer,
});

// Create a persisted reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: {
        // Ignore persistence-related actions
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);

And my main providers.tsx

'use client';
import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { NextUIProvider } from '@nextui-org/react';
import { ThemeProvider as NextThemesProvider } from 'next-themes';
import { store, persistor } from '@/redux/store';

// TODO add full layout skeleon
export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <Provider store={store}>
      <PersistGate
        loading={<div>Providers Loading...</div>}
        persistor={persistor}
      >
        <NextUIProvider>
          <NextThemesProvider
            attribute="class"
            defaultTheme="bounty"
            themes={['bitcoin', 'amce', 'bounty']}
          >
            {children}
          </NextThemesProvider>
        </NextUIProvider>
      </PersistGate>
    </Provider>
  );
}

The only big question I found on this topic was How to solve: console.error: “redux-persist failed to create sync storage. falling back to “noop” storage

However I’m not building a React Native app, just a web app with NextJS 14.

I’m looking to make my blogs a little more mobile friend whilst still making relevant information digestable.

I’m looking for a way to do the following:

Drag-Out Overlay Image for Mobile

Ideally it would scroll with the adjacent div, and perhaps have a drag out function since it’s for mobile.

Thanks in advance!

I am writing a file selection form that each time a file is selected, that file will be added to the existing file array. My intention is to submit that array via the form, but after submitting, the array is stringified. I don’t know how to handle it, please help me.

This is my code:

<script lang="ts">
    let selectedFiles: File[] = [];
    function handleSubmit(e: any) {
        errorCode = validate(selectedFiles);
        if (errorCode) {
            console.log(errorCode);
            e.preventDefault();
        }
    }
    function handleFileSelect(e: any) {
        selectedFiles = [...selectedFiles, e.target.files[0]];
    }
    // Create ref to DOM element
    let fileInput: HTMLInputElement;
</script>

<form action="?/submit" method="post" on:submit={handleSubmit}>
    <div>
        <label for="files">Click "+" to add file</label>
        <button on:click={(e) => {e.preventDefault(); fileInput.click();}}>
            <span>+</span>
        </button>
    <input type="file" accept={allowedExtensions} on:change={handleFileSelect} on:invalid={handleInvalid} bind:this={fileInput} hidden/>
        <input type="hidden" name="contest" value={contest.id} />
        <input type="hidden" name="user" value={data.user.id} />
        <input type="hidden" name="files" value={selectedFiles} />
        <p>Selected files: {getFileNames(selectedFiles).join(', ')}</p>
        <br />
        <button type="submit" class="btn btn-primary w-full">Submit</button>
    </div>
</form>

I logged request.formData() and it came out like this:

   [Symbol(state)]: [
     {
       name: 'files',
       value: '[object File],[object File],[object File]'
     },
     { name: 'contest', value: '5bvod8teq8kh7yn' },
     { name: 'user', value: 'dvkw0v6uz31zag2' },
     { name: 'score', value: '0' }
   ]

I expected it like this:

   [Symbol(state)]: [
     { name: 'files', value: [File] },
     { name: 'files', value: [File] },
     { name: 'files', value: [File] },
     { name: 'contest', value: '5bvod8teq8kh7yn' },
     { name: 'user', value: 'dvkw0v6uz31zag2' },
     { name: 'score', value: '0' }
   ]

        import React, {useEffect, useState} from 'react'
        import axios from 'axios'
        import '../App.css'
        import { useNavigate } from 'react-router-dom'
        import { gettingData } from '../api/getUserData'
        import { handleLogout } from '../api/handleLogout'
        import { getGroundNear } from '../api/getGroundNearby'
        import { bookingSlot } from '../api/bookingSlot'
    
    
        const Dashboard = () => {
            const navigate = useNavigate()
            const [userData, setUser] = useState(undefined)
            const [groundData, setGroundData] = useState([])
            const [currentTime, setCurrentTime] = useState(Date.now())
            const [isOccupied, setIsOccupied] = useState(false)
    
    
        axios.defaults.withCredentials = true;
    
         useEffect(()=>{
          gettingData(setUser)
        },[])
      
        useEffect(()=>{
          console.log("usee 2")
          if(userData){
            console.log(userData)
            getGroundNear(userData.pincode, 0, 50000, setGroundData) 
          }
            
        },userData)
    
      
        const handleBooking = (slotId, groundId, userId) => {
          if(bookingSlot(slotId, groundId, userId)){
            setIsOccupied(true)
          }
    
        }
    
    
      return (
        <div>
          <button onClick={() => {handleLogout(navigate)}}>Logout</button>
          
          <div>
            <h3>Grounds</h3>
            {groundData && groundData.length &&
              groundData?.map((ground)=>{
                return(
                  <div id='cards'>
                    <img src={ground.photo} alt='ground'></img>
                    <h4>{ground.ground}</h4>
                    <span>Type: </span><span>{ground.type}</span><br/>
                    <span>{ground.discription}</span>
                    
                    <div className='timings'>
                      <div className='slots'>
                        {
                        ground?.slots?.map(slot => {
                          return (
                            <>


{/*I want this component to re-render whenver the button is clicked so that it has updated views of slot booking*/}

                          <div id='slot-id'>
                            {!slot.occupied ? (
                              <button onClick={() => handleBooking(slot._id, slot.ground_id, userData._id)}>{slot.time_start} - {slot.time_end}</button>
                            ) : (
                              <button id='occupied-slot' style={{border: '3px dotted red', cursor: 'not-allowed', backgroundColor: '#FF999C'}}>{slot.time_start} - {slot.time_end}</button>
                            )}
                          </div>
                        
                        </>
                      )
                    })}
                  </div>
                </div>
              </div>
            )
          })
        }

      </div>

    </div>    
  )
}

export default Dashboard

Challenge: Re-rendering slot-id Div on Button Click in React

I’m working on a React component that displays bookable slots. Each slot has a button, and I want the entire slot-id div to re-render whenever a button is clicked.

In the provided code, the button click triggers the handleBooking function, but it doesn’t directly cause the slot-id div to re-render. This means the visual appearance won’t change unless the data source (e.g., an API call) updates the slot.occupied property outside of this component.

Desired Behavior: We want the slot-id div to re-render immediately after the button click, even if the external data source hasn’t been updated yet. This will provide a more responsive user experience by instantly reflecting the button click visually

I am trying to display data in my template that is returned from an api fetch. I’m using Node with Fastify.

The code I am using to send to the handlebars helper from my template is:

value="{{fetchClass this.CERTIFICATION}}"

I then send this to my helper:

Handlebars.registerHelper('fetchClass', async function(str) {
  try {
    const response = await fetchClassification(str);
      console.log('Response: ', response);
      return response;
  } catch (error) {
    console.error('Error fetching classification:', error);
  }
});

Which in turns sends to:

async function fetchClassification(parameter) {
  fetch(`https://api.example.com/dictionary/CERTIFICATION/${parameter}`)
      .then(response => response.json())
      .then(data => {
        const classification = data.meaning.classification;
        return classification;
      })
      .catch(error => console.error('Error fetching data:', error));
}

I can console log the results and it is correct (“Standard”) but the helper returns:

Response:  Promise { undefined }

I also tried doing the fetch inside my helper like:

Handlebars.registerHelper('fetchClass', function(str) {
  fetch(`https://api.example.com/dictionary/CERTIFICATION/${str}`)
      .then(response => response.json())
      .then(data => {
        const classification = data.meaning.classification;
        console.log('Class: ', classification);
        if (classification) {
          return classification;
        }
      })
      .catch(error => console.error('Error fetching data:', error));
});

While the console log shows correctly (Class: Standard), it doesn’t get displayed in my template.. ugh

What am I doing wrong?

I have a website written in React using Typescript.
The entire page can be schematically represented like this

FirstPage.tsx

 export function FirstPage() {
  return (
<ScrollArea.Root className={clsxm('h-full')}>
  <ScrollArea.Viewport className={clsxm('max-h-[100%] min-h-[100%]')}>
    <div>
      <div>
        <Sidebar />
      </div>

      <div className="w-[100vw]">
        <MainPage />
      </div>
    </div>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar/>
</ScrollArea.Root>
  );
}

MainPage.tsx

 export function MainPage() {
  return (
   <div>
    <div className="m-auto flex h-full w-[43vw] flex-col">
      <div>
        <SomeComponent1 />
      </div>

      <div>
        <SomeComponent2 />
      </div>

      <div>
        <SomeComponent3 />
      </div>

      <div>
        <SomeComponent4 />
      </div>
    </div>

    <div className="flex h-[45px] items-start justify-center">
      <Button />
    </div>
   </div>
  );
}

As you can see, the FirstPage component is wrapped in a ScrollArea from the Radix library (but looking ahead, if I remove the ScrollArea from the code, this does not solve the problem). It is ScrollArea that defines the scroll for the MainPage component (Because component SideBar have position: fixed).

The point is that I want to control the moment when there is a scroll and when the scroll is at the very top. I tried many solutions from this site and from the network, but none of the solutions helped me (apparently there is an error somewhere in the logic of the code or I am using these examples incorrectly)

Tell me how I can track the moment when there is a scroll and when the scroll is at the very top. That is, I would like to receive “true” if the condition is true, and “false” if the condition is false

I have a inherited a system that utilizes a Backbone collection of files that needs to be sorted based on a series of values. The order variable is saved when you slide different files into a position in the view. It mostly works but there are rare times when it is not sorted correctly based on values in the files_order list. I found that using the unsigned right shift came the closest to working but the code is returning odd results as a number of the files in the collection are not in the files_order.

For filecollectionid = 1, the system result is:
36528,36524,36529,35526,36523,36525,36530,36531

The correct order should be:
36528,36523,36524,36525,35526,36529,36530,36531

I am assuming the unsigned right shift of variables that do not exist in the list are causing the problem. Any help would be greatly appreciated.

collection = new Backbone.Collection([
  { id: 36523, name: "File 1", filecollectionid: 1 },
  { id: 36524, name: "File 2", filecollectionid: 1 },
  { id: 36525, name: "File 3", filecollectionid: 1 },
  { id: 36526, name: "File 4", filecollectionid: 1 },
  { id: 36528, name: "File 5", filecollectionid: 1 },
  { id: 36529, name: "File 6", filecollectionid: 1 },
  { id: 36530, name: "File 7", filecollectionid: 1 },
  { id: 36531, name: "File 8", filecollectionid: 1 },
  { id: 36476, name: "Video 1", filecollectionid: 6 },
  { id: 36520, name: "Video 2", filecollectionid: 6 },
  { id: 36527, name: "Video 3", filecollectionid: 6 }
]);

sections = {
 "id": 1,
"files_order" : [36503,36513,36505,36506,36507,36508,36509,36510,36511,36521,36528,36522,35523,36524]
}

collection.sort(function(a,b) {
    // Lets group files by the file collection id first
    if(a.filecollectionid != b.filecollectionid){
        return a.filecollectionid - b.filecollectionid;
    }

    // Lets try to use the files_order variable
    try {
        // Get the files_order field
        var files_order = _.find(sections, function(section) {
            // They should both have the same filecollectionid
            return a.filecollectionid == section.id;
        }).files_order;

        files_order = _.map(JSON.parse(files_order.toString()), function(item) {
            return parseInt(item);
        });

        // use unsigned right shift to keep the original and add the unadded to the end
        return (files_order.indexOf(a.id) >>> 0) - (files_order.indexOf(b.id) >>> 0);
    } catch(e) {
        // If no sorting order this really should be oldest first and newest last.
        a = a.id;
        b = b.id;
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    }
});

I am kinda a newbie with TypeScript, and I am using it on a real project along with React.

I saw a post where the writter indicates two ways of declare conditional props in React using Typescript.

The writer indicates two ways to declare conditional props in React using TypeScript.

I tried the solution using generics (because I want to approach it that way), and I did not get TypeScript warning me about the type that should be the prop called “level” after checking if the authenticated prop was true.

Here’s the code:

type Props = { authenticated: T; level: T extends true ? ‘basic’ | ‘admin’ : ‘guest’};

const User = (props: Props) => { if (props.authenticated)
{

return <>Profile ({props.level})</>; } return <>{props.level}</>

};

I’m trying to change the select tag from html to the ones used in the example on the
Chosen v1.8.7, but even after following the steps the select continues as the default one:

test.html

<head>
    <link rel="stylesheet" href="chosen.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="chosen.jquery.js" type="text/javascript"></script>
    <script src="chosen.jquery.min.js" type="text/javascript"></script>
</head>

<body>
    <select name="selecao" id="selecione" class="select">
        <option value="BMW">BMW</option>
        <option value="Volvo">Volvo</option>
        <option value="Volkswagen">Volkswagen</option>
    </select>
    <script>
        $(document).ready(function(){
            $(".select").chosen();
        });
    </script>
</body>

Expected result: the HTML select changed to the one found in the Chosen v1.8.7

Actual result: select tag not changed

I started a new project. It uses phlex-rails, phlex_ui and tailwindcss-rails, plus the plethora of usual stuff Rails provides by default. This time around, I wanted to learn more about Rails 7 and importmap.

Whenever I get a page, the page loads for a few seconds, then displays correctly. When looking at the logs, I see many GET requests for many files:

Started GET "/assets/sub/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/subBusinessDays/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/subDays/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/subHours/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/subISOWeekYears/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/subMilliseconds/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/subMinutes/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/subMonths/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400

I’m guessing these are normal because the asset pipeline isn’t present. I would have expected these files to be cached, but it doesn’t really matter.

What does matter are these ones instead:

Started GET "/assets/weeksToDays/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/yearsToMonths/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/yearsToQuarters/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/_/a28ffa54.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/_/d2e90c22.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/_lib/toInteger/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/assets/_lib/getTimezoneOffsetInMilliseconds/index.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/_/bdf2ba0c.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400

ActionController::RoutingError (No route matches [GET] "/_/a28ffa54.js"):


ActionController::RoutingError (No route matches [GET] "/_/d2e90c22.js"):

Started GET "/_/43b08ee2.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400

ActionController::RoutingError (No route matches [GET] "/_/bdf2ba0c.js"):

Started GET "/_/18a96f2b.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/_/35814e45.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400
Started GET "/_/9f5bb25a.js" for 127.0.0.1 at 2024-04-16 09:46:08 -0400

ActionController::RoutingError (No route matches [GET] "/_/43b08ee2.js"):


ActionController::RoutingError (No route matches [GET] "/_/18a96f2b.js"):

Notice the routing errors: No route matches [GET] "/_/18a96f2b.js".

I’m wondering what these errors are about.

I have difficulty searching the web for these errors, since the paths seem to be some kind of hash? Any pointers appreciated!

I have 3 typeorm entities A,B and C . I am using B as a many to many table for A and C. So, I have ManyToOnes in B for A and C. And OneToMany in each of the A and C entities pointing to B. The ReferenceError: Cannot access ‘A’ before initialization. This error disappears when I remove the OneToMany from entity A.

It should run properly as I have used this pattern before.