Level 102
I am unsure how that is related? All it does is check if there is a file ./Pages/Index.vue (or jsx or js). Isnt the app.js file in the same directory as the Pages directory?
Nov 20, 2020
12
Level 5
Using inertia with modules
I would like to use nwidart/laravel-modules and inertia together. The problem I'm having is that in my Users module when I try to access the index page I get this error in my console
Uncaught (in promise) Error: Cannot find module './Index'
I know that it's because of this
resolveComponent: (name) => require(`./Pages/${name}`).default,
but I'm not sure how to get it to work so I can use modules
Level 5
@sinnbeck so the resolveComponent: (name) => require(./Pages/${name}).default, is in my root directory and it would be ok if I had added my Index.vue to the Pages in the root directory, but I want to try to use Modules instead and it's there that I'm having a problem. Because I'm not able to get it to find the Index.vue that is in my Users Module
Level 102
Well require()needs the path to the file it has to load. So you need to specify where it can finde the file
I have no knowledge of your structure but here is an example
resolveComponent: (name) => require(`../../modules/UserModule/js/Pages/${name}`).default,
Level 5
That works but then what about any other new modules I create?
Level 102
You could perhaps pass down the full path?
resolveComponent: (name) => require(`${name}`).default,
Level 5
Unfortunately not. It couldn't find Index
Level 102
And you are passing down the complete path?
return Inertia::render('full/path/to/Index');
Level 5
Nope. It can't find it
Level 102
What error are you getting now? Please show the actual code, path and error. :)
Level 5
The error I'm getting is
Cannot find module '/home/shiva/Documents/projects/inertia-modules/Modules/Users/Resources/assets/Pages/Index'
And here is my code
My UsersController
public function index()
{
$path = base_path('Modules/Users/Resources/assets/Pages/Index');
return Inertia::render($path);
}
and my app.js
require('./bootstrap');
require('moment');
import Vue from 'vue';
import { InertiaApp } from '@inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';
Vue.mixin({ methods: { route } });
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
const app = document.getElementById('app');
new Vue({
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`${name}`).default,
},
}),
}).$mount(app);
Level 5
I thought about doing a loop, but I think I might be doing something wrong in my loop. Because if I have this
resolveComponent: (name) => require(`../../Modules/Users/Resources/assets/Pages/${name}`).default
then I get my Index.vue showing up
but if I loop and do this
require('./bootstrap');
require('moment');
import Vue from 'vue';
import { InertiaApp } from '@inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';
Vue.mixin({ methods: { route } });
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
const app = document.getElementById('app');
const modulesJson = require("../../modules_statuses.json");
var modulesObject = Object.keys(modulesJson);
new Vue({
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => {
// LOOP IS HERE
for(let i = 0; i < modulesObject.length; i++){
require('../../Modules/'+modulesObject[i]+'/Resources/assets/Pages/'+name).default
}
}
},
}),
}).$mount(app);
then it doesn't show up
Level 1
Here is the code
resolve: (name) => { const pages = import.meta.glob([ "./Pages//.tsx", "../../Modules//resources/js/Pages//*.tsx", ]); const regex = /([^:]+)::(.+)/; const matches = regex.exec(name);
if (matches && matches.length > 2) {
const module = matches[1].replace(
/[A-Z]/g,
(m) => m);
const pageName = matches[2];
return pages[
`../../Modules/${module}/resources/js/Pages/${pageName}.tsx`
]();
} else {
return pages[`./Pages/${name}.tsx`]();
}
},
Please or to participate in this conversation.