Vue3 and Vite failed load JSON with Typescript

Question

I'm migrating from Vue 2 to Vue 3. Doing test app first.

I'm having trouble importing a JSON file.

The file exists. Tried all these variants:

import { sites } from "./data/sites.json";
import sites from "./data/sites.json";
import sites from "../data/sites.json";
import sites from "@/data/sites.json";

https://www.koderhq.com/tutorial/vue/local-json/ and https://codesandbox.io/s/z2mpz6zq23?file=/src/components/HelloWorld.vue

Sandbox Link - dev - This doesn't work

Thanks @Tolbxela I tried that:

tony19 · Accepted Answer · 2022-10-26 00:53:02Z

1

Your Codesandbox link doesn't run, so I recreated it in StackBlitz.

Your directory layout looks like this:

src
├── components
│   └── GoodTable.vue
├── data
│   └── sites.json

Notice import rows from './data/sites.json' in src/components/GoodTable.vue. ./data/sites.json is a relative path, so the lookup is relative to the importing file's directory, which is src/components. src/components/data/sites.json does not exist, so Vite displays an error.

The JSON file is actually one parent level up in src/data/sites.json, so you need to update the import path to:

import rows from '../data/sites.json'

demo

edited Oct 26, 2022 at 0:53

answered Oct 26, 2022 at 0:45

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tolbxela · Accepted Answer · 2022-10-19 14:37:06Z

0

Your app in the sandbox is working well. Check the screenshot.

I would guess the problem is with your browser. Be sure it supports the import statement (MDN).

UPDATE:

I've checked your screenshot. You have an import problem in the Vite (plugin:vite:import-analysis)

Check these links to solve:

Vite - Dynamic Import

StackOverflow - plugin:vite:import-analysis - Failed to parse source for import analysis because the content contains invalid JS syntax. - Vue 3

edited Oct 19, 2022 at 14:37

answered Oct 19, 2022 at 14:31

Tolbxela

5,2193 gold badges23 silver badges52 bronze badges

7 Comments

Anthony Over a year ago

Links aren't mine.

Anthony Over a year ago

Migrated to JavaScript same problem.

Anthony Over a year ago

The problem is Vite- Did test project with vue-cli (which uses Webpack) works fine.

Anthony Over a year ago

Done Vite Test project: If I import JSON App.vue it works: import data from './data/sites.json'. If I try load anywhere else, for example HeeloWorld.vue problem as above.

Tolbxela Over a year ago

@Anthony, I have no experience with Vite unfortunately. So, it hard to help. The Docs could help you. Take a look at the glob import: vitejs.dev/guide/features.html#glob-import. It looks like the way you should investigate.

|

Collectives™ on Stack Overflow

Vue3 and Vite failed load JSON with Typescript

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related