The Vite manifest could not find the file "app.jsx" in the resources/js directory. Please run "npm run build

Following the guidelines from , I have successfully created a Laravel application with the following specifications:

  • PHP 8.1.2
  • Laravel 9.33.0
  • React

During development using VITE (npm run dev), everything works smoothly.

However, when attempting to build JS and CSS with VITE (npm run build), I encounter the error message:

Unable to locate file in Vite manifest: resources/js/app.jsx

https://i.stack.imgur.com/3IaSx.png

Despite having php artisan serve active, running php artisan optimize:clear, updating npm to the latest version, etc., the problem persists.

I would greatly appreciate any additional tips or suggestions on how to resolve this issue.

Thank you, Jan

reactjslaravelnpmbuildvite

Answer №1

I encountered a similar issue.

After I included 'resources/js/app.jsx' in the vite.config.js file and re-ran npm run build,

the problem got resolved.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/app.jsx' --Include this
            ],
            refresh: true,
        }),
        react(),
    ],
...

Hopefully, this solution proves helpful.

Answer №2

I encountered a similar issue and found a solution that may be helpful to others facing the same problem:

In my case, the issue was that Vite was not transforming components located under the Pages folder, resulting in a manifest file error indicating that the component could not be found.

The solution involves opening the app.jsx file and importing the following package:

import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

Next, modify the createInertiaApp function in app.jsx as shown below:

createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
  
  setup({ el, App, props }) {
    const root = createRoot(el);
    
    root.render(<App {...props}/>);
  },
})

Finally, run `npm run build` to apply the changes.

After completing these steps, everything worked properly for me. I hope this helps.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Outdated state variable value recorded in the log

I am facing an issue where the logged value of the state variable 'count' is always zero, even after clicking the button to update it. The logging function is triggered by a setInterval function within the useEffect hook. Is there a reason why t ...

reactjs

What is the process of this script when initiated with an NPM build command?

I have a package.JSON file with the following scripts: "scripts": { "typings": "typings install", "build": "tsc && webpack", "watch": "npm-run-all -p -r -l tsc-watch webpack-watch", "tsc-watch": "tsc -w", "webpack-watch": "web ...

node.jsnpmwebpacktsc

Ran into a pair of kids sharing the same key - result in duplicate items

I have a multi-language page in NextJS and I want to implement language selection through a dropdown menu. const languages = [ { locales: 'fa', name: 'فارسی', country_code: 'ir' }, { locales: 'e ...

reactjsnext.jsduplicatesunique-key

Setting environment variables using the node command is successful on Linux and macOS platforms, however, it may not function properly

When I clone a project using git, I encounter issues running npm run build on Windows. The command works fine on Mac and Linux: "build": "API=https://dev-api.myexample.com/v1.0 babel-node build.js", An error message is displayed: 'API' is no ...

javascriptnode.jsnpm

Guidelines on resolving the issue of Unsupported platform for [email protected]: requested {"os":"darwin","arch":"any"} (existing: {"os":"win32","arch":"x64"})

Trying to install Parallelshell but encountering a persistent warning. I've checked the package file multiple times without finding a solution. Can someone assist me with this issue? ...

javascriptnode.jsnpmreact-bootstrapnpm-scripts

Update to the newest Node version on Windows using npm

I'm encountering an issue while trying to update Node.js to the latest version on my machine. When I run the following commands through npm, I receive the error below: npm install -g n This is the error I encountered: npm ERR! code EBADPLATFORM npm ...

node.jsnpmnpm-update

React Class Component with Dark Mode功能

Having an issue with toggling between dark and light mode on the navbar using a toggle switch. Whenever I click on the switch, I encounter the following error: Error: Cannot read properties of undefined (reading 'state') This error is related t ...

reactjs

Getting URL parameters in NextJS when using Custom Document can be achieved by accessing the `ctx`

Currently, I am utilizing NextJS for generating SSR pages that are language-specific. I want to specify the lang property to indicate the language of the text. Here's what I have done so far: import Document, { Html, Head, Main, NextScript } from &qu ...

javascriptreactjsnext.jsinternationalization

What is the best way to clear the value from a form field?

I have successfully preloaded initial values, but I want the form to clear once the user begins typing on it. https://i.stack.imgur.com/Sn7WC.png Despite trying to reset my form by changing config.setStateVar to (''), the form remains with its ...

reactjs

A guide to querying JSON data in a backend database with JavaScript

My backend JSON DB is hosted on http://localhost:3000/user and contains the following data: db.json { "user": [ { "id": 1, "name": "Stephen", "profile": "[Unsplash URL Placehol ...

javascriptjsonnpmjsondb

What is the best way to define a custom route in react-router-dom?

My goal is to have the URL display "/login" in the address bar when I am on the login page. // App.js <Routes> {isLoggedIn ? ( <Route path="/" element={<Root onLogout={handleLogout} />}> <Route index e ...

javascriptreactjsreact-router-dom

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-compon ...

cssreactjsstyled-componentsclassnameclass-names

Using Laravel allows for the implementation of a personalized validation message

I created a custom rule in Laravel 5.5 and configured a custom translation for it in the lang validation file. Here's how I set it up: 'custom' => [ 'validate' => [ 'correct_password' => 'The :a ...

phplaravel

Encountering the error message "BarChart in react.js is not iterable"

I encountered an issue with the BarChart component: An error message saying "undefined is not iterable!" appeared. The API response I received looks like this: { "saleCharts": [ { "priceSum": 0, "categoryName&q ...

reactjsmaterial-uibar-chart

The output paths for both JavaScript and Sass in Laravel-mix are generating incorrect paths

I am facing a strange issue with Laravel-Mix where mixing sass or js results in them being placed in incorrect directories. For instance: Below is my webpack.mix.js file: mix.js('resources/assets/js/app.js', 'public/js') .sass(&ap ...

node.jslaravelnpmwebpack

Setting a default value for a null Select Option in React: a guide

I am currently working with an array of values and looping through them to display in a Select Option. <Form.Item label="Status"> <Select value={user.status} onChange={handleStatusChange} > ...

reactjstypescriptantd

What is the best method to erase data from an AutoComplete Box when clicking?

I have incorporated the Material UI AutoComplete component which can be found here. Below is my code snippet: <Autocomplete open={showUniSuggs} onOpen={this.props.getUniversityOptions} onChange={(event, value) => this.props.handleUniversi ...

javascriptreactjsreact-nativematerial-uiautocompletebox

Jest came across a surprising token that it wasn't expecting while working with React and TypeScript in conjunction with Jest and React-testing-L

An unexpected token was encountered by Jest while using React and TypeScript along with Jest and React-testing-Library. Error occurred at: E:\Git\node_modules@mui\x-date-pickers\internals\demo\index.js:1 ({"Object." ...

javascriptreactjstypescriptjestjsreact-testing-library

Losing concentration when entering a character

Here is the code I am working on. Having an issue with the focus on password, password confirmation, and email inputs within the Sign-up modal. When typing a character, it loses focus automatically. Any suggestions on how to fix this? I have already tried ...

reactjsecmascript-6material-ui

"Run npm install to add fsevents to your project dependencies

Hey there, I'm currently in the process of setting up fsevents using npm. Here are the versions I'm working with: Node : 4.2.6 NPM : 3.5.2 OS : Ubuntu 16.04 LTS I'm running the following command: Edited npm install fsevents --no- ...

node.jsnpm