Error and blank page on Vue JS when creating a json file in assets

I went through a very strange issue. I have a vue project created with vue ui. I’m editing my code in visual studio.

i want to prototype and work with fake data before connecting my API. So i had the idea to create a json file in my assets folder to host my moock datas and import them to work on the UI.

but when i creating a Json file in my assets folder, and vue ui re render the project i have 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)
at eval (i18n.js?9225:13:1)
at Array.forEach (<anonymous>)
at loadLocaleMessages (i18n.js?9225:9:1)
at eval (i18n.js?9225:22:1)
at Module../src/i18n.js (app.js:1191:1)
webpackMissingModule @ app.js:1178
./src/assets/moockupdata.json @ app.js:1178
__webpack_require__ @ app.js:854
fn @ app.js:151
webpackContext @ ?400a:11
eval @ i18n.js?9225:13
loadLocaleMessages @ i18n.js?9225:9
eval @ i18n.js?9225:22
./src/i18n.js @ app.js:1191
__webpack_require__ @ app.js:854
fn @ app.js:151
eval @ main.js:16
./src/main.js @ app.js:1225
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1345
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(anonymous) @ app.js:994
(anonymous) @ app.js:997

i must confess i’m quiet stuck and confused with this issues. I would appriciate some help

Thanks a lot

Answer

I finally find a turnaround. Instead of behing stubborn and try at any cost to create a JSON file.

I went for a “mydata.js” file

with the inner structure

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

export default data

and import it from my Vue file with

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

Advertisement

Answer