I've been tasked with finding a solution to dynamically import pages within vuejs projects that are being built with a CLI tool by my team. I initially attempted to use functions as a string ("() => import(...)") and then evaluate that string, but it didn't work as expected. Currently, I am using the following approach:
{
"routes": [
{
"name": "Login",
"path": "/login",
"component": "../../src/pages/auth/login/*"
},
{
"name": "Register",
"path": "/register",
"component": "@/pages/auth/register"
}
]
}
After defining the routes in a JSON format, I then pass them into our routes.ts file using a "driver":
import * as dynamicRoutes from './routes.json';
const routes: any[] = [];
dynamicRoutes.default.routes.forEach((elem: any) => {
const component = async () => await require(elem.component).then((comp: any) => comp);
routes.push({
name: elem.name,
path: elem.path,
component,
});
});
export default routes;
However, I am encountering "cannot find module" errors. When I log the output, I observe the following error message when checking the component function: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them.
Is there a way to dynamically pass routes using a JSON file, considering that we need to read from and write to this file in order to keep the routes updated?