error message - The Rails application could not find the VueJS file and returned a 404 error

For the last 6 months, we have been dealing with an issue loading our app page in local development. We keep encountering blank pages with net::ERR_ABORTED 404 (Not Found) errors in the console logs. After a few refreshes, the page eventually loads. This situation is very frustrating.

Our current development setup includes Rails 5.0.7.2 + Vue.js 2 with webpack [email protected].

Is there a solution to this problem? Thank you!

package.json

  "engines": {
    "node": "^10.#",
    "yarn": "^1"
  },
  "resolutions": {
    "vue": "2.#.#",
    "vue-template-compiler": "2.#.#",
  },
  "scripts": {
    "start": "./bin/webpack-dev-server",
  },

webpacker.yml

Default settings:
  source_path: app/javascript
  webpack_compile_output: true
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  public_root_path: public

  Additional paths webpack should lookup modules
  ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets']
  compile: false

  Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  Extract and emit a CSS file
  extract_css: false

Development environment settings:
  ...
  
Testing environment settings:
  ...

Staging environment settings:
  ...

App environment settings:
  ...

https://i.sstatic.net/1HhmQ.png

Answer №1

If you encounter inconsistencies in compiled files, try running rm -rf public/packs to delete the /packs directory. After that, restart the webpack dev server using bin/webpacker-dev-server. This should resolve the issue.


In my experience, dealing with inconsistent compiled files has been a common problem. One possible cause is mismatched entries in the manifest file located at

[project root]/public/packs/manifest.json
, compared to the actual files present in the folder.

"entrypoints": {
  "desktop": {
      "js": [
        "/packs/desktop-7547483.....js" // this file may not exist in the folder
      ],
   // ...
}

To fix this issue, consider deleting all compiled files and then recompiling them from scratch.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am interested in creating a table that can toggle between show/hide mode with a plus/minus feature

$(document).ready(function() { $("#t1").hide(); // hide table by default $("#close").hide(); //hide the minus button as well if you only want one button to display at a time $('#sp1').on('click', function() { //when p ...

Is it possible to create a pie chart using Chart.js with data fetched through an Ajax HTTP GET

Embarking on a new journey here, this week's focus is on delving into Chartjs for canvas and brushing up on JSON usage. The task at hand includes employing an Ajax HTTP GET request to fetch the json file. However, I am currently stumped on how to trig ...

Is it possible to implement marker dragging in Google Maps v3 using JavaScript? How can this be achieved?

I am currently using this code to search for an address, drop a marker, and drag it afterwards. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title&g ...

Mystery of the Ruby on Rails Country/State Selector

I've been trying to tackle a seemingly simple task, however, I’ve been struggling with it for quite some time now. My goal is to create a dynamic Country select drop-down menu connected to a State select drop-down menu. When a country is chosen, if ...

Do you have an index.d.ts file available for canonical-json?

I am currently working on creating an index.d.ts file specifically for canonical-json. Below is my attempted code: declare module 'canonical-json' { export function stringify(s: any): string; } I have also experimented with the following sn ...

Tips on setting pre-defined data in a ReactJS form builder field

Currently, I am utilizing the reactjs-form-builder to create forms within a React.js environment. Below is an excerpt of my fields object: this.state = { id: null, loading: true, fields: { "fields&qu ...

Steps for modifying material-ui timepicker to display time in a 24-hour format

Presently, I am utilizing a Timepicker from material-ui. It is currently configured with type="time", allowing me to select times throughout the day in 12-hour increments with an AM / PM choice. However, I wish to adjust my picker to a 24-hour format, elim ...

Leveraging JavaScript classes within Angular2

Incorporating a native JavaScript library into my Angular 2 project has been my latest endeavor. After building and bundling the JS file, I found myself in need of just one specific class called 'fhir' from this bundle. My approach involved creat ...

Implementing Dynamic CSS Styles in AngularJS

Essentially, I am facing a challenge on my page where a control needs to toggle two different elements with two distinct CSS classes upon being clicked. While I have successfully managed to toggle one of the controls, the other remains unchanged. Here is ...

Exploring different pages in an Ionic and AngularJS mobile application

I am brand new to the world of Ionic and AngularJS. I have just started working on a simple project but have hit a roadblock. My goal is, To create a login page and a register page. When a user clicks the register button on the login page, they should be ...

What causes the first iteration to be bypassed in setInterval?

Every time I execute the function below: import React, {useEffect, useState} from 'react'; import classes from '../Main.module.css'; export default function Intro() { // Timing Settings (for convenience) const highlightInterv ...

Beating the API call system: Utilizing the RxJS skip operator

Currently, I am attempting to utilize the skip operator in RxJS to skip the initial API call. However, despite my efforts, I have not been successful in achieving this. const source = of('a', 'b', 'c', 'd', 'e&a ...

The notify.js fails to display notifications in the event of an error

Why am I not receiving any error notifications even when there is an error message in the response object? $.ajax(settings).done(function (response) { if ( "error_message" in response ) { console.log(response); $.notify(" ...

Utilize Bootstrap accordions nesting inner accordions to create a dynamic user interface with varying shown.bs.c

I am currently dealing with a nested bootstrap accordion issue. The problem arises when I click on the inner accordion - it unexpectedly triggers the 'shown.bs.collapse' event bound to the outer accordion, which is not the intended behavior. Is t ...

Error: The function setOpenModal is not defined

I'm currently working on creating a login modal popup that will appear when a button inside a navbar is clicked. However, I'm encountering the following error: TypeError: setOpenModal is not a function Despite going through various discussions ...

Unable to retrieve data function properties within Vue.Js Component methods

Looking for some help with setting up a welcome message using an input field in Vue.js. I am trying to store the username in a data property called username: ''. However, when I attempt to access it within the methods, I receive an error stating ...

Receiving error message "[object Object]" while working with JavaScript

My current challenge involves adding an item to the shopping cart through a button click event that sends necessary data to a database table storing cart items. The issue arises with the item name, as I am encountering an error displaying [object Object] ...

Having trouble with npm install not working for react-google-login?

I'm encountering an issue while trying to install react-google-login for my React project using the command npm install react-google-login. Unfortunately, the installation is failing with the following error: npm ERR! code ERESOLVE npm ERR! ERESOLVE u ...

The uiGmapGoogleMapApi.then function is failing to execute on Android devices

I successfully incorporated angular-google-maps into my Ionic project - in index.html, I included the following scripts: <script src="lib/lodash.min.js"></script> <script src="lib/angular-google-maps.min.js"></script> Within my vi ...

Obtain the count of unique key-value pairs represented in an object

I received this response from the server: https://i.stack.imgur.com/TvpTP.png My goal is to obtain the unique key along with its occurrence count in the following format: 0:{"name":"physics 1","count":2} 1:{"name":"chem 1","count":6} I have already rev ...