Category : reactjs

I’m having trouble with react-router’s dynamic routes. Here’s how my dynamic route is set up: <Route path="users/:id" element={<SomeComponent />} /> Whenever I redirect to this route through a link like this: <Link to={`../users/${some_id}`}> or through navigate() like this: navigate(`../users/${some_id}`) I’m able to load the page just fine. But when I refresh that page, or when ..

Read more

<Description description={description} /> In Description component I can display name and other pool but not id. I diplay in console.log what is in this props and it is all without id, created_at and updated_at. Why? How can I send props with id? Let me just mention that in parent component everything is ok. Sourc..

Read more

I am new to React and Laravel API. I work on an e-commerce project and need to create products and their variants. I tried multiple ways, but it could not help me. Please, can anyone show me the easiest way to create product variations in React with the Laravel API? And if any demo with ..

Read more

I am trying to render a PDF in React using react-pdf but I am getting the error: Access to fetch at ‘http://akello.test/media/30/Vaccine-Record-upload-user-journey-(003).pdf.pdf’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch ..

Read more

I am creating React and Laravel website and below issue was shown in the console. cors.php <?php return [ ‘paths’ => [‘api/*’,’login’,’register’,’admin/*’,’sanctum/csrf-cookie’], ‘allowed_methods’ => [‘GET’, ‘PUT’, ‘POST’, ‘DELETE’, ‘OPTIONS’], ‘allowed_origin’ => [‘http://localhost:3000’], ‘allowed_origins_patterns’ => [], ‘allowed_headers’ => [ ‘Content-Type’, ‘Authorization’, ‘Accept’, ‘Accept-Language’, ‘Content-Language’, ‘Origin’, ‘X-Requested-With’, ‘X-XSRF-TOKEN’, //’X-CSRF-TOKEN’, ‘Access-Control-Request-Methods’, ‘Access-Control-Request-Headers’ ], ‘exposed_headers’ => [ // ‘Access-Token’, ..

Read more

I’m currently having a problem getting websockets set up with socket.io from React to Laravel using laravel-echo-server. Everything appears to be working except whenever I navigate to https://api.mysite.com/socket.io/?EIO=4&transport=websocket I’m getting an Internal Server Error. And whenever I check the logs, this is the error: AH01144: No protocol handler was valid for the URL /socket.io/ (scheme ..

Read more

I am creating react js and laravel project and I display 3D model from database. <model-viewer bounds="tight" src={`http://localhost:8000/${item.pimage}`} ar ar-modes="webxr scene-viewer quick-look" camera-controls environment-image="neutral" poster="poster.webp" shadow-intensity="1" camera-orbit="-7.313deg 27.56deg auto" width="60px" className="model"></model-viewer> Error: GET http://localhost:3000/uploads/products/1640341595.glb 431 (Request Header Fields Too Large) GET http://localhost:3000/admin/poster.webp 431 (Request Header Fields Too Large) Ho fix this Request Header Fields Too ..

Read more

Laravel controller API returning "page not found" while consuming it from Axios in Next.js But everything is working fine in PostMan with the following code Controller function: public function viewsnippets(Request $request){ $slug = $request->slug; $postdata = Constant_model::getDataOneColumn(‘snippets’,"url_slug",$slug); if ($postdata->count() < 1) { $data[‘status’] = 404; $data[‘title’] = ‘Page Not Found’; $data[‘description’] = ‘Page Not Found’; ..

Read more

I am creating react and laraval project and I want to use 3d models (.glb type image). I upload .glb type image and after that, I want to display it in my dashboard. I do it using map function as shown in below. ViewProducts.js viewProductTable = productlist.map((item) =>{ return ( <tr key={item.id}> <td>{item.id}</td> <td>{item.category.name}</td> <td>{item.name}</td> ..

Read more

I have a project that I have to use both React.js (for front-end) and Vuejs (for dashboard) in Laravel 8. And the question is how to manage this with Laravel 8? I’ve install both library with : php artisan ui react and php artisan ui vue but the app.js file changed after I’ve install react ..

Read more

I am getting Invalid configuration error like this [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. – configuration.entry[‘/js/app’] should not contain the item ‘project/resources/sass/app.scss’ twice. -> All modules are loaded upon startup. The last one is exported. Here is my webpack.mix.js const mix = ..

Read more