Encountering a blank page and error message on Vue JS while attempting to generate a JSON file within the

Recently, I encountered a peculiar problem while working on my Vue project using Vue UI in Visual Studio.

Before connecting my API, I wanted to prototype and experiment with fake data. So, I decided to create a JSON file in the assets folder to store my mock data and import it for UI development.

However, upon creating the JSON file in the assets folder and re-rendering the project in Vue UI, I encountered the following error:

app.js:1178 Uncaught Error: Cannot find module './assets/moockupdata.json'
at webpackMissingModule (app.js:1178:45)
at Object../src/assets/moockupdata.json (app.js:1178:145)
at __webpack_require__ (app.js:854:30)
at fn (app.js:151:20)
at webpackContext (eval at ./src sync recursive [A-Za-z0-9-_,\s]+\.json$/ (app.js:1087:1), <anonymous>:11:9)
...

This issue has left me feeling stuck and confused. Any assistance would be greatly appreciated.

Thank you.

javascriptdatabasevue.jswebwebpack

Answer №1

I had a breakthrough moment. Instead of being stubborn and attempting to create a JSON file at all costs.

I opted for a file named "mydata.js"

with the following structure

const data = {
  Mykey1: 'Myvalue1',
  HasKey1: true,
  otherdata: 'yes'
}

export default data

and then importing it into my Vue file using

<script>
import AwsConfig from '@/config/mydata.js.js'
export default {
...

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

Error: HTML code being displayed instead of form value in Ajax request output

For the past couple of days, I've been struggling with an Ajax issue that I just can't seem to figure out. Despite looking for a solution online, nothing seems to work. Below is the code snippet that's causing me trouble: <!DOCTYPE html& ...

javascriptphpajaxhttp

Creating a collection of modular components using bespoke functions

Currently, I am in the process of creating a reusable tab component using Vue.js. As I continue to learn the basics of Vue, I have managed to generate tabs and implement the switching logic within the component itself. However, I am facing difficulties in ...

vue.js

Guide to building a multi-dimensional array from a flat object

My endpoint is outputting data in a specific format: const result = [ {id: 4, parentId: null, name: 'Fruits & Veggies'}, {id: 12, parentId: 133, name: 'Sanguinello'}, {id: 3, parentId: 4, name: 'Fruits'}, {id: 67, ...

javascriptrecursionrecursive-datastructures

Utilize the _sortBy function from the lodash library to arrange an array based on a specific field

Looking at an array of objects similar to this: myArray = [ {AType: "aaa", Description: "De", …}, {AType: "bbb", Description: "Hi", …}, {AType: "ccc", Description: "Un", …}, {AType: "ddd", Description: ...

javascriptarrayssortinglodash

How to Delete Decimal Points from a String Using Regular Expressions

I am searching for a way in JavaScript, such as REGEX, to eliminate decimal numbers from a string. Here is an example input: Mazda 6 2.0 Skyactiv-G Wagon 2018 - Startstop.sk - TEST Mercedes C63 AMG Sound REVVING 6,3l V8 And here is the expected output: M ...

javascriptnode.jsregex

Utilizing React JS to assign various state values from a dropdown menu selection

In my project, I have implemented a dropdown list populated from an array of values. This dropdown is linked to a handleSelect function. const handleSelect = (e) => { handleShow() setCommunityName(e) } <DropdownButton id="dropdown-basi ...

javascriptreactjs

JavaScript decimal precision function malfunctioning with currency format conversion

My current snippet works perfectly with the currency format 249.00, but I need to adapt it for a site that uses euros with pricing in the format 249,00. When I make this change, the total calculation goes haywire and shows as 29.900,00. Can someone advise ...

javascripthtml

I seem to be having trouble using my markers on my istamap

function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker = new ...

javascriptphpjquerygoogle-maps

Is there a way to retrieve a promise from a function that triggers a $http.get request in AngularJS?

Looking for a solution to modify this function: getX: function ($scope) { $http.get('/api/X/GetSelect') .success(function (data) { ... ... }) .error(function (data) { ...

javascriptangularjs

Organize the table data based on time

My website specializes in offering cell phone rental services. Users can visit the site to view the available devices that we have. I designed the display of these devices using a table format and components from "@mui/material". One of the columns in thi ...

javascriptreactjsmaterial-ui

Retrieve items from an array using indexes provided by a separate reference table

I am dealing with two different arrays. One array contains my data: var tab1 = ["one","two","three","four","five","six","seven","eight","nine","ten","eleven","twelve","thirteen","fourteen","fifteen","sixteen","seventeen","eighteen","nineteen","twenty"]; ...

javascriptjqueryarrays

Vue directive that automatically updates input when blurred

I am currently working on a directive that trims the value of an input when it loses focus: import { DirectiveOptions } from "vue"; const Autotrim: DirectiveOptions = { inserted(el) { if(!(el instanceof HTMLInputElement) && !(el insta ...

vue.jsdom-eventsonblurvue-directives

Looking to manipulate the form submit data before it is submitted using the standard submit event and jQuery? Read on to learn how to remove, enhance, or change

Is there a way to extract data from a form like the one below? <form action="/search/search" data-remote="true" data-type="json" id="search_form" method="get"> <div class="input-group"> <span class="input-group-addon"> <i ...

javascriptjqueryhtmlformssubmit

Show a specific item when selecting an option from a dropdown menu

Hey there, I have a question regarding creating a theme for the Genesis Framework. Right now, I'm facing a challenge with one particular element. Here's the situation: I've got two drop-down lists, but I only want the second one to be visib ...

javascriptjqueryhtmlwordpressdrop-down-menu

Utilize VueJS to upload and visualize a file input on your website

I am currently working with TypeScript and Haml in conjunction with vue.js. My goal is to enable users to upload and view a file seamlessly using the vue.js framework. I have successfully managed to upload an image, however, I am facing an issue where the ...

javascripttypescripthamlvue.js

Enable Intellisense for my custom ES6 JavaScript modules in VS Code

Using VS Code Intellisense can greatly enhance productivity when working with internal project files, providing helpful autocompletion features and utilizing written JSDoc comments. However, my current projects involve custom JavaScript libraries stored i ...

javascripttypescriptvisual-studio-codees6-modules

Is it possible to utilize X-Y coordinates as repositories for values beyond just X-Y coordinates themselves?

I am in the process of creating a tile-based grid and I need to expand the X-Y coordinates to include additional values for determining characteristics of each tile, such as resources (for example, food, water, stone, lumber) within a game context. Conside ...

javascripthtmlhtml5-canvas

How can a TypeScript Angular directive utilize a function?

Recently, I have been following a unique Angular directive TypeScript pattern that I find really effective. The approach involves giving the directive its own isolated scope by creating a new controller. I encountered a scenario where I needed to invoke a ...

javascriptangularjsangularjs-directivetypescript

Store data in LocalStorage according to the selected value in the dropdown menu

Can you help me understand how to update the value of a localstorage item based on the selection made in a dropdown menu? <select id="theme" onchange=""> <option value="simple">Simple</option> <option valu ...

javascripthtml

The jQuery .post function is successfully executing, but it is strangely triggering the .fail method without

My data is successfully being posted, but I'm struggling to get my .post response handler code to work efficiently. The results seem inconsistent across different browsers and tools that I have tried. Here's the code snippet for the post: $.post ...

javascriptjqueryjsoncross-domain.post