I'm setting an environment variable while building my react-native app (on windows):
SET APP_ENV=dev & react-native run-android
echo %APP_ENV% returns 'dev'
But when I log process.env object in my JS file, I only get:
{
NODE_ENV: "development"
}
Is there a different way to access environment variables set through command prompt?
It's important to know that the React-Native app is running on a device (or emulator) in an environment more like a browser, not a Node.js process.
For cross-compatibility with Node.js libraries that relies on process.env.NODE_ENV to perform optimizations, React-Native adds the process global variable with env.NODE_ENV.
If you want to pass custom constants to React-Native, you can use: https://github.com/luggit/react-native-config
You should install this plugin babel plugin
npm install babel-plugin-transform-inline-environment-variables --save-dev
Then add it to your babel config (.babelrc, babel.config.js) in the plugin section
{
"plugins": [
["transform-inline-environment-variables", {
"include": [
"NODE_ENV"
]
}]
]
}
Then when you pass the variable through the inline like
API_KEY=dev && react-native run-android
You should get it through
process.env.API_KEY
And the value will be dev
This work for me on Mac terminal, Hope it answer your question
EDIT:
I added a double "&" because only one doesn't work.
Nothing worked out from these answers here, as well as React Native Expo Environment Variables, but I've found react-native-dotenv.
It did the trick:
Terminal: yarn add react-native-dotenv --dev
In babel.config.js (or .babelrc): add "module:react-native-dotenv" to plugins
In your component, import { REST_API_KEY } from "#env"; at the top
In your component, use as alert(REST_API_KEY);
Of course, with the alert, that's a dummy example :)
The easiest way I found to solve this problem is by using the react-native-config library that you can have a look at here.
Install the library:
$ yarn add react-native-config
Create your .env file with your content. For example:
GOOGLE_MAPS_API_KEY=abcdefgh
Import Config from react-native-config and use your variables.
import Config from "react-native-config";
...
console.log('ENV:', Config.GOOGLE_MAPS_API_KEY); // ENV: abcdefgh
P.S.: After installing the package you need to run npx pod-install to auto-link it or if your React Native version is older than 0.60, link it manually following the instructions on the library.
add babel-plugin-transform-inline-environment-variables
npm install babel-plugin-transform-inline-environment-variables --save-dev
babel.config.js:
{
"plugins": [
["transform-inline-environment-variables"],
]
}
do not add "include": ["NODE_ENV"]
then run API_KEY=testKey && react-native start
and then you can use API_KEY via process.env.API_KEY,
but it is weird that console.log(process.env) only show a {NODE_ENV: "development"},do not contain API_KEY
Related
Followed Astro instructions to build Astro app
But the app can not find the assets
Steps to produce:
Create empty astro project from template
Add #astro/node to project npx astro add node
Run npm run build
Serve the server node ./dist/server/entry.mjs as documentation said
It gives this error like below and doesn't apply css.
I recommend you try with the latest version or provide the version you tested with.
I tried the same steps as you did, using
npx astro create
npx astro add node
which used version v1.6.15
I did got a build error Setting the 'mode' option is required so I updated the astro.config.js to look as follows :
import { defineConfig } from 'astro/config';
// https://astro.build/config
import node from "#astrojs/node";
// https://astro.build/config
export default defineConfig({
output: "server",
adapter: node({
mode: 'standalone'
})
});
after that build and run went smooth
npm run build
node ./dist/server/entry.mjs
as you can see css correctly loaded
I'm building a react app with parcel. I have an eslint config set up that I like, and use VSCode tools to catch eslint errors and fix them as I code. The app builds correctly as of now. So all that is fine.
However, as an added precaution, I would like to set up parcel to run eslint, using my config, and to halt the build process and output an error when I havent followed the eslint rules, either when running dev server or building for production.
I'm aware of this npm package from googling, but the package doesnt have a readme, and i can't find setup instructions in the parcel docs: https://www.npmjs.com/package/#parcel/validator-eslint
For reference I am using parcel 1.12.3 but would be open to changing to parcel 2.x.x if that is neccesary.
Thanks!
In parcel v2, you can use the #parcel/validator-eslint plugin to accomplish this. Here's how:
Install eslint and #parcel/validator-eslint in your project. Note that this plugin will currently only work with eslint v7 or earlier due to this bug (which hopefully we can fix soon ;-))
yarn add -D eslint#7 #parcel/validator-eslint
Add an .eslintrc.json file to your project with your configuration. It's best to use a static config file (like .json or .yaml) rather than a dynamic one (like .js) if you can, because that helps parcel's caching be more efficient and faster (see docs). Here's a basic file example that works, but you can extend this to suit your needs by checking out the eslint docs:
{
"env": {
"browser": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
}
}
Tell configure parcel to use the plugin for javascript files by adding a .parcelrc file at the root of your project (or modify your existing .parcelrc file to include the "validators" entry below):
{
"extends": "#parcel/config-default",
"validators": {
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
"#parcel/validator-eslint"
]
}
}
Now, if you have an eslint error, it should bubble up through parcel like this:
🚨 Build failed.
#parcel/validator-eslint: ESLint found 1 errors and 0 warnings.
C:\Users\ansteg\Projects\parcel-eslint-example\src\index.js:2:7
1 | // This unused variable should trigger an ESLint error.
> 2 | const unusedVar = "Hello!";
> | ^^^^^^^^^^ 'unusedVar' is assigned a value but never used.
3 |
See this github repo for a working example.
I got code from this website: https://www.google.com/amp/s/aboutreact.com/react-native-login-and-signup/amp/
Please help meenter image description here
Either code you write or dependencies libraries use React native Reanimated 2 worklet.
In your project structures, Look at a file named babel.config.js and add the code below:
module.exports = {
presets: ['module: metro-react-native-babel-preset'],
plugins: [
'react-native-reanimated/plugin'
]
};
You can try this method first:
npx
npx react-native start --reset-cache
Yarn
yarn start --reset-cache
I hope this method can solve your problem
With a VueJS project created by Vue CLI 4, you get Babel configured with this handy preset in babel.config.js:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset',
],
};
I'm trying to use babel-plugin-transform-remove-console to remove console.* from the built JS files.
Installed the plugin as a dev dependency by: npm i -D babel-plugin-transform-remove-console
Then modified babel.config.js:
module.exports = (api) => {
var env = api.cache(() => process.env.NODE_ENV);
var plugins = [];
// Change to 'production' when configs are working
if (env === 'development') {
plugins.push(['transform-remove-console', { exclude: ['error', 'warn'] }]);
}
return {
presets: ['#vue/cli-plugin-babel/preset'],
// plugins,
// Doesn't work even when always on?
plugins: ['transform-remove-console'],
};
};
This should work by running npm run serve -- --reset-cache, and I've also tried building the app many times with different environments, but the console loggings are still showing up in the browser's console?
Is Vue CLI's preset somehow mixing it up for not being able to set plugins via this configuration file?
UPDATE: Created a bug report to Vue CLI repo, and while creating a minimal bug reproduction repository, I found out this plugin is working with a new project.
However, I have no idea what is causing this as I've synced this application with the newest CLI bootstrapped template, and also tried nuking NPM cache by `npm cache clean --force.
I ran into the same problem. This did not work:
plugins: ['transform-remove-console']
But this worked:
plugins: [['transform-remove-console', { exclude: ['error', 'warn'] }]]
Hope this helps others who encounter the same issue.
It seems #Zydnar's suggestion of nuking node_modules folder may have helped, however, I also found out that my recent NPM packages upgrades had been interrupted and had not been fully successful. There was some Vue CLI plugins that had different versions.
After nuking node_modules and upgrading all the packages this Babel plugin started working!
I am pretty new to vue.js - I only started using it today and naturally I have run into an error I cannot seem to resolve.
I am using the v-md-date-range-picker module:
(https://ly525.github.io/material-vue-daterange-picker/#quick-start.
The instructions tell me to do the following:
1
npm install --save v-md-date-range-picker
2
<template>
<v-md-date-range-picker></v-md-date-range-picker>
</template>
3
<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";
Vue.use(VMdDateRangePicker);
</script>
So, I ran the command in terminal in my project folder, added the 2 bit of code to my HelloWorld.vue page and then added the code from step 3 into the main.js.
When I have a look in my package.json file, I see:
"dependencies": {
"core-js": "^2.6.5",
"v-md-date-range-picker": "^2.6.0",
"vue": "^2.6.10"
},
However, I get the error:
Module not found: Error: Can't resolve 'v-md-date-range-picker/dist/v-md-date-range-picker.css' in '/Users/James/Documents/projects/vue-test/src'
am I missing something blatantly obvious here?
Edit:
I tried the response in the comments below which did not work.
On the main page of the module, I followed the instructions. However, going through the pages I found the same instructions with some extra text:
I assume that you have a working bundler setup e.g. generated by the vue-cli thats capable of loading SASS stylesheets and Vue.js SFC (Single File Components).
I am going to go out on a limb here and say I do not have a working bundler. I went into the node_modules folder, found that module and looked inside. There was no dist folder. Just .scss files etc..
So, I assume that I somehow need to build this project first.
How do I do that?
I thought running it in the browser would have done this on the fly but it clearly has not.
Edit 2:
After some googling around I found the command:
$ npm run build.
Which gives me this error:
This dependency is not found, To install it, you can run: npm install --save v-md-date-range-picker/dist/v-md-date-range-picker.css
So, I run that command and then I get the error:
Could not install from "v-md-date-range-picker/dist/v-md-date-range-picker.css" as it does not contain a package.json file.
Check if you can find this in the webpack.base.conf.js inside the build folder. If not add it.
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'], // Note that the order is very important
},
Run npm install style-loader css-loader --save before adding it to the file if it isn't there.
To Address your question
Run the command: npm install sass-loader --save
Then add an import for every SCSS file in the module.
This is not the most optimal solution, but that package looks broken to me and this is merely a workaround.
I will take time to try out the library myself and try to provide a fix for it.
Create v-md-date-range-picker.css in v-md-date-range-picker/dist/ and copy css from
md-date-range-picker.min.css
and refresh your page. For some reason css file is not being created when we install md-date-range-picker.min