1

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

I'm having trouble importing a JSON file.

This error I'm getting

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: enter image description here

tony19
  • 125,647
  • 18
  • 229
  • 307
Anthony
  • 487
  • 1
  • 6
  • 21

2 Answers2

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

tony19
  • 125,647
  • 18
  • 229
  • 307
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).

it works

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

Tolbxela
  • 4,767
  • 3
  • 21
  • 42
  • Links aren't mine. – Anthony Oct 20 '22 at 04:01
  • Migrated to JavaScript same problem. – Anthony Oct 21 '22 at 04:54
  • The problem is Vite- Did test project with vue-cli (which uses Webpack) works fine. – Anthony Oct 21 '22 at 11:59
  • 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. – Anthony Oct 21 '22 at 13:55
  • @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: https://vitejs.dev/guide/features.html#glob-import. It looks like the way you should investigate. – Tolbxela Oct 21 '22 at 16:38
  • Thanks for link. I tried that also. `const sites = await import(...)` – Anthony Oct 21 '22 at 23:35
  • https://stackoverflow.com/questions/74160048/vue3-and-vite-json-file-loads-app-ok-not-any-other-compoennt – Anthony Oct 21 '22 at 23:37