The issue of loading environment variables in Laravel Vue seems to be causing some

Need help disabling the Vue Devtools in production by checking the value of the APP_ENV variable within app.js.

Here's what has been attempted:

Inside webpack.mix.js

require('dotenv').config();

Inside app.js

console.log(process.env.APP_ENV)//Undefined

    if (process.env.APP_ENV === 'production') {
        Vue.config.devtools = false;
        Vue.config.debug = false;
        Vue.config.silent = true; 
    }

Environment Variable

APP_ENV=production

Documentation was consulted regarding adding MIX_APP_ENV to inject variables into webpack, but no solution was found.

Folder Structure:

d-----        01-Feb-21  10:31 PM                app
    d-----        29-Jan-21  12:12 PM                bootstrap
    d-----        29-Jan-21  12:12 PM                config
    d-----        30-Jan-21  10:26 PM                database
    d-----        16-Apr-21  10:49 PM                node_modules
    d-----        29-Jan-21   1:14 PM                public
    d-----        29-Jan-21  12:22 PM                resources
    d-----        29-Jan-21  12:12 PM                routes
    d-----        29-Jan-21  12:12 PM                storage
    d-----        29-Jan-21  12:12 PM                tests
    d-----        01-Feb-21   9:29 PM                vendor
    -a----        29-Jan-21  12:12 PM            220 .editorconfig
    -a----        16-Apr-21  10:45 PM            954 .env
    -a----        29-Jan-21  12:14 PM            816 .env.example
    -a----        29-Jan-21  12:12 PM            111 .gitattributes
    -a----        29-Jan-21  12:12 PM            191 .gitignore
    -a----        29-Jan-21  12:12 PM            181 .styleci.yml
    -a----        29-Jan-21  12:12 PM           1686 artisan
    -a----        01-Feb-21  10:41 PM           1793 composer.json
    -a----        01-Feb-21  10:41 PM         282388 composer.lock
    -a----        16-Apr-21  10:49 PM         531190 package-lock.json
    -a----        16-Apr-21  10:49 PM           1103 package.json
    -a----        29-Jan-21  12:12 PM           1202 phpunit.xml
    -a----        29-Jan-21  12:12 PM           3780 README.md
    -a----        29-Jan-21  12:12 PM            563 server.php
    -a----        16-Apr-21  10:55 PM            578 webpack.mix.js
javascriptlaravelvue.jswebpack

Answer №1

It came to my realization that in order to fix the problem, you must restart npm run watch even if it is currently active.

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

Error encountered when accessing JSON data from the DBpedia server in JavaScript

Hello everyone and thank you for your help in advance. I have encountered this error: Uncaught SyntaxError: Unexpected identifier on line 65 (the line with the "Var query", which is the third line) and when I click on the Execute button, I get another e ...

javascriptjqueryajaxjsondbpedia

Is it feasible to combine various front-end applications - one developed in Vue and another in React - using just one Laravel backend?

Recently, I have taken over a laravel project that includes a vue application integrated within it (located inside resources/assets/js) using laravel-mix. My task now is to implement some front-end features with react. I am curious if it's possible to ...

reactjslaravelvue.jslaravel-mix

ThreeJs applying distinct materials to individual faces of a cube

Currently, I am facing an issue while loading a cube object exported from Blender using GLTFLoader. My attempt to apply color on each face of the cube using the addGroup method is not yielding the expected results. The image below showcases the output tha ...

javascriptthree.js

Internet Explorer not triggering jQuery blur() or focusout() events

Having some issues with my form and event handling when the inputs lose focus. The code is working perfectly in every browser except for Internet Explorer. function formstyle() { var focus = 0; //comentario is the ID of the input $("#comenta ...

javascriptjqueryinternet-explorerfocusblur

Error: Unable to locate 'regenerator-runtime' in Next.js 12.1.5 when using React 18 and Node 16

Here is the content of my package.json file: "scripts": { "dev": "next dev" }, "dependencies": { "next": "^12.1.5", "react": "^18.0.0", "react-dom&q ...

node.jsreactjsnpmwebpacknext.js

ObservableResolve(): Unleashing the power of RxJS5 for handling asynchronous data streams

Hey there! To dive deeper into RxJS, I thought of creating my own custom Rx operator. So here's a straightforward one that seems to be working smoothly: Rx.Observable.prototype.multiply = function (input) { const source = this; return Rx.O ...

javascriptnode.jsrxjs5angular2-observables

The function req.flash does not exist in Express Passport

I am currently working on user authentication using passport and trying to implement flash messages. I have set up the local strategy in passport-config.js, but when running the code, I encounter an error stating "req.flash is not a function" in the passpo ...

javascriptnode.jsexpresssessionpassport.js

Does using .detach() eliminate any events?

I have a DIV that is filled with various content, and I am using the detach() and after() functions to move it around within the document. Before moving the DIV, I attach click events to the checkboxes inside it using the bind() function. Everything seems ...

javascripthtmljquery

Incorporating External JavaScript and CSS specifically for a single component

In my Angular 4 application, I have a specific component that requires the use of a js and css file. While most guidelines suggest placing these files in the Index.html file, I prefer to only load them when this particular component is accessed, not on e ...

javascriptangularwebpack

The checkbox is not being triggered when an <a> tag is placed within a <label>

I have a unique case where I need to incorporate <a> within a <label> tag. This is due to the fact that various CSS styles in our current system are specifically designed for <a> elements. The <a> tag serves a purpose of styling and ...

javascriptjqueryhtml

Transition smoothly between two images with CSS or jQuery

I am working on a project where I need to implement a hover effect that fades in a second image above the initial image. The challenge is to ensure that the second image remains hidden initially and smoothly fades in without causing the initial image to fa ...

javascriptjqueryhtmlcssimage

Using Redux with Next.js to implement getStaticPaths

Can someone help me understand how to implement getStaticPaths in conjunction with Redux in Next.js? I'm currently using next-redux-wrapper to manage my content, but I am encountering issues when trying to display the data. Below is a snippet of my ...

javascriptreactjsreduxnext.jsnext-redux-wrapper

What is a more efficient way to avoid duplicating code in javascript?

Is there a way to avoid repeating the same code for different feeds? I have 8 feeds that I would like to use and currently, I am just incrementing variable names and feed URLs. <script type="text/javascript> function showFeed(data, content ...

javascriptjsonrss

Is it possible to send a data attribute from an HTML element using AJAX to a some.php page when it is clicked?

One scenario involves retrieving the product id from a database and inserting it into a data-idproduct attribute. <a class="cart" href="" data-idproduct="<?php echo $itemArtikal['id_product'] ?>">Add to C ...

javascriptphpajax

Adding a JavaScript file to the header in CakePHP using the view section

The CakePHP documentation states: By default, script tags are inserted into the document in-line. If you wish to change this behavior, you can set $options['inline'] to false. This will cause the script tags to be placed in a script block whic ...

javascriptphpjquerycakephp

Implementing restify on a website that mandates user login authentication

Currently, I am operating a REST API server using restify. In addition, my front-end consists of angularjs with html, css, and js files hosted on an Apache webserver. The next step is to implement user login authentication for this webapp. Access to the w ...

javascriptnode.jsauthenticationexpressrestify

Tips for sending personalized notifications through Web push technology

I've successfully implemented web push on Chrome, but I'm facing an issue where all users receive the same notification from the server. Is there a way to include user-specific data or endpoint ID in the latest notification request sent by the se ...

javascriptjson

What causes onUnmount to trigger when making changes to private data?

Can someone please explain to me why changing the value of name_ triggers the lifecycle callbacks shown in the screenshot below? I was expecting that changing the name_ would only invoke onBeforeUpdate and onUpdated. Could you clarify why this behavior is ...

vue.js

React's nested map function is failing to display any results

My objective is to loop through nested arrays in the response data, which is an array containing other arrays. However, I am encountering an issue where the data is not being displayed for some reason. Here is an example of one item in the response: id: 5 ...

javascriptreact-native

Problem with AngularJS Select Box

My AngularJS dependable dropdowns are currently functioning well with static data from a script file. However, I am now looking to bind data to these dropdowns from a URL. The challenge is that I don't have a separate URL for the dropdowns; there is j ...

javascriptangularjsjsonurlmulti-select