process is not defined in Vue.js - vue.js

I tried to use the process.env.process.env.VUE_APP_SERVER_URL in my vue project. But I got the error like the following.
Uncaught ReferenceError: process is not defined
It's using the webpack and run by npm start command.
Once you know the solution, please feel free to contact me.

You can add the following code in webpack.config.js.
const webpack = require('webpack');
const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
}),
]
...
}

Related

Webpack Error in routes.js : Module not found: Error: Can't resolve '/views/Home' in route.js

I am trying run Webpack but Webpack can't resolve my Vue component image here
I try import Home from './views/Home'; But it did not work
Try this:
let routes = [
{
path: "/",
component: () => import('./views/Home.vue')
}
]

How can I activate the sourcemap for Vue-Cli 4?

I believed the npm run serve command use the sourcemap by default for the js, but it seems not because I always see vue.runtime.esm.js:619.
I made a vue.config.js file at the root level project.
I try two things:
module.exports = {
configureWebpack: config => {
config.devtool = 'source-map'
}
}
and:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
None of them works. I still stuck with vue.runtime.esm.js:619 which is useless.
Does anyone know how really activate the source-map with vue-cli 4?
Using the generated vue.config.js from vue-cli v4 (generating a vue 3 project) It provided me this file:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
})
I then modified it to this:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
devtool: 'source-map',
}
})
Which works enough for me to enable VSCode debugging in Chrome/Electron.
*Edit
The error you are getting may be unrelated to source-maps and related to warnings from vue itself.
For example
runtime-core.esm-bundler.js:6584
[Vue warn]: Failed to resolve component: AMadeUpComponentName
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <MyView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
Unfortunately this is a limitation of vue. However, improvements have been made between VueJS v2 and v3. Finally, I couldn't find an original source, but I read that improving the warning messages to track down the cause of warnings and errors is a high priority feature.
* Edit 10/12/2022
I had an older project that this answer didn't solve at all. After a yarn upgrade and #vue/cli upgrading, this configuration began working again!
You are looking for the ProjectOptions chainWebpack property.
chainWebpack?: (config: ChainableWebpackConfig) => void;
Try the following in your vue.config.js file:
/** #type import('#vue/cli-service').ProjectOptions */
module.exports = {
// https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
chainWebpack(config) {
config.devtool('source-map')
},
}

Giving static filenames for build files in vue-cli3

I am using vue-cli3, when i build using npm run build -- --mode=production, it gives 2 css files and 2 js files.
Everytime i make a code change the name of the file also changes like app.de90cdf7.js and chunk-vendors.a9204242.js.
Is there a way in vue-cli to hardcode the files names as app.js and chunk-vendors.js ?
I'm little late to the party. We can chain webpack to apply name changes.
Using version #vue/cli 5.0.4 in year 2022
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack : (config) => {
config.output.filename('[name].js');
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
});

Custom global process.env variable with Webpack build

I have a Vue application that's compiled using Webpack. I'm trying to add a variable into the 'npm run dev' command that I can then use globally throughout the project. Currently, I am running 'npm --brand=foo run dev' and consoling 'process.env.brand' in the build.js file returns 'foo'. Now I need to make this available to the rest of the project. Here is my setup:
WEBPACK.DEV.CONF.JS
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
module.exports = merge(baseWebpackConfig, {
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
})
})
DEV.ENV.JS
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
File structure is Build/build.js + webpack.dev.conf.js and Config/dev.env.js. I tried to add a 'brand' property like the following, but process.env.brand was undefined in this file.
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
brand: process.env.brand
})
UPDATE by #Linx to pass the argument dynamically directly from
command line
Run the command and pass in the variable like: npm --brand=foo run dev
Then, variable is then available in the webpack config file as
process.env.npm_config_brand.
Another option is to setting the variable inside the npm script section:
package.json
{
//...
"scripts": {
"dev": "SET brand=foo& webpack -p"
},
If you are using linux, maybe you should remove the SET --> "dev": "brand=foo& webpack -p"
Then run the command like: npm run dev
In both cases, to make it available for the rest of the project you can use webpack.DefinePlugin
module.exports = {
//...
plugins: [
new webpack.DefinePlugin({
'__BRAND__': process.env.brand,
})
]
}
The variable will be accessible in the rest of the project like: console.log(__BRAND__);

How to extend default React Native webpack config?

I would like to add aliases to my React Native project started from the scratch with default react-native cli tools.
I created a webpack.config.js in the app root folder hoping that this will be enough for webpack to catch in on the fly. But its never happened.
Are any workarounds available?
Currently my webpack.config.js looks like that:
var path = require('path');
const alias = {
'~': __dirname,
'assets': path.resolve('./app/assets/'),
'native-styles': path.resolve('./app/native/styles')
}
module.exports = {
resolve: {
alias: alias,
}
}