I am working on a project on my Windows computer as well on my Macbook. I got a function that register components defined in certain directories globally like this:
require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
/**
* Third-party imports.
*/
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
/**
* Register components from the ./components and ./components/core
* directories. This way these components don't have to be imported
* manually every time.
*
* The core components are the core of other components and contains
* alerts, notifications, input fields etc.
*
* Base components are bigger components made upon the core components
* and contain a combination of one or more of the core components. These
* are usually components that contain a lot of code and have to be re-used
* across the whole application.
*
* @param {Vue instance} app
*/
function registerGlobalComponents (app) {
const requireComponent = require.context(
'./components' || './components/core' || './components/base',
true,
/\.vue$/
);
for (const file of requireComponent.keys()) {
const componentConfig = requireComponent(file);
const name = file
.replace(/index.js/, '')
.replace(/^\.\//, '')
.replace(/\.\w+$/, '');
const componentName = upperFirst(camelCase(name));
app.component(componentName,
componentConfig.default);
}
}
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
const inertiaApp = createApp({ render: () => h(app, props) });
inertiaApp.use(plugin);
inertiaApp.mixin({ methods: { route } })
registerGlobalComponents(inertiaApp);
inertiaApp.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
When I run npm run watch
or dev
or prod
it compiles the code and successfully shows me the website on my Windows machine. But when I do this on my Macbook it throws the following error:
Can't resolve './components' in '/Users/bas/Sites/trainfit/resources/js'
Is there a reason why this works on a Windows machine but not on a machine that runs on MacOS?
Some more information about my project:
- Made with Vue and Inertiajs
- Running this code from Visual Studio Code
from JavaScript function works only on Windows machine
No comments:
Post a Comment