Import JSON/JSONC file in vite/typescript project

Question

want to share my routes between my actix-web backend and Vue w/ Vue-Router frontend without having to have to files describing the routes. So when I define the routes in the frontend, I don't want to change anything for the server. I don't know if there's a better solution, if so, please tell me :D

My routes.jsonc is in my src folder. Every route is of the following type:\


    route: { path: String; name: String; componentName: String }

Then my routes-Strings are converted to the actual Components:


    import { createRouter, createWebHistory } from "vue-router";
    import ButtonArrayVue from "@/components/Home/ButtonArray.vue";
    import App from "@/App.vue";
    import * as routesImport from "../routes.jsonc";
    
    const history = createWebHistory();
    
    const routes = routesImport.map((route: { path: String; name: String; componentName: String }) => {
        let component = function () {
            switch (route.componentName) {
                case "ButtonArray":
                    return ButtonArrayVue;
                case "App":
                    return App;
            }
        };
        return {
            path: route.path,
            name: route.name,
            component: component,
        };
    });
    
    export default createRouter({
        history,
        routes,
    });

Now the problem is the 4th line: I've tried multiple import statements, also:

import routesImport from "../routes.jsonc";
import routesImport from "src/routes.jsonc";
import routesImport from "@/routes.jsonc";

But I always get "Cannot find module '../routes.jsonc' or its corresponding type declarations" as a typescript and Compiler error. Sometimes also '"default" is not exported by "src/routes.jsonc", imported by "src/plugins/router.ts".'

Now to my question: How can I import a json file without putting it in the public folder as some other questions suggest? I don't want to make this file public if possible.

Are there better alternatives? How could I import this json file?

Did you set resolveJsonModule to true inside the compiler options in the tsconfig.json? Also you need to make sure, that vite support the .jsonc` extension which is not the case with the default setup: vitejs.dev/config/shared-options.html#resolve-extensions — Leif Marcus
– Leif Marcus, Commented Jan 2, 2023 at 9:48

Miles B Huff · Accepted Answer · 2023-02-09 19:19:28Z

-2

You have to set resolveJsonModule to true in tsconfig.json; but note that this will ONLY work for files that are .json -- NOT .jsonc.

answered Feb 9, 2023 at 19:19

Miles B Huff

1261 gold badge3 silver badges12 bronze badges

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

4 Comments

ThaJay Over a year ago

So polease tell me, how do I add support for jsonc in my project?

Miles B Huff Over a year ago

Unfortunately, I was not able to find an easy way. It might be possible if you try modifying the way the Webpack builds work.

ThaJay Over a year ago

yeah probably just define '*.jsonc' in a d.ts file. Maybe a webpack loader too.

Fernando Correia Mar 23 at 17:15

Try github.com/sneakylenny/vite-plugin-json5

Collectives™ on Stack Overflow

Import JSON/JSONC file in vite/typescript project

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related