I am currently experiencing a puzzling phenomenon. While working on my application components using Laravel Jetstream and Inertia Stack with VueJS, I encountered an issue where a newly created component in the same folder as others was not building. Neither 'yarn watch' nor 'npm run prod' recognized it.
Here is the current file structure:
resources
--+js
-----+Components
------ComponentOne.vue (successfully builds)
------ComponentTwo.vue (successfully builds)
------ComponentThree.vue (successfully builds)
---------+Folder
----------ComponentFour.vue (successfully builds)
----------ComponentFive.vue (successfully builds)
----------NewComponent.vue (fails to build)
Even duplicating a component and slightly modifying its name did not resolve the issue. This problem has also occurred with other files which were left ignored, forcing me to create new files the next day in a different folder that successfully built.
Below is my Webpack configuration:
const path = require('path');
const Dotenv = require('dotenv-webpack');
module.exports = {
plugins: [
new Dotenv()
],
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
},
};
My App.js code:
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(el);
Are there any suggestions or insights on how to troubleshoot this?