I am trying to set the env variables in my app using https://medium.com/dev-cafe/how-to-setup-env-variables-to-your-svelte-js-app-c1579430f032
import {config} from 'dotenv';
import replace from '#rollup/plugin-replace';
plugins: [
//Environment varialbes
replace({
// stringify the object
__myapp: JSON.stringify({
env: {
isProd: production,
...config().parsed // attached the .env config
}
}),
}),
But when I try to access the env variables using "__myapp.env.API_ID", I get the following error in the dev tool - Uncaught Reference Error: __myapp is not defined"
Only way I could make it work is
import {config} from 'dotenv';
import replace from '#rollup/plugin-replace';
config()
plugins: [
//Environment varialbes
replace({
API_ID: JSON.stringify(process.env.API_ID)
}),
Related
My public.html file has a lot of links and imports whom depends on environment variables to work, because we work with local, homologation and production environments.
example of link in public.html file:
http://localhost:5173/%REACT_APP_ENV_MY_VARIABLE%/script.js
Vite don't seem to know how to handle those variables by its own so i tried to add something i found in another post but i didn't seem to work
export default defineConfig((command, mode): any => {
const env = loadEnv(mode, process.cwd(), '');
return {
plugins: [reactRefresh(), createHtmlPlugin()],
resolve: {
alias: [{ find: '#', replacement: '/src' }],
},
};
});
have anyone had to deal with that problem already?
I'm using Vite to build a library and I get the following error when building the library:
Rollup failed to resolve import "node:path"
By adding the failed import to the Rollup options I'm able to fix the error but the build continues to complain for each node:* import. In the end I've had to add each one individually to the build.rollupOptions.external:
build: {
rollupOptions: {
external: [
'node:path',
'node:https',
'node:http',
'node:zlib',
...
],
},
While this solves the issue it is time consuming to list each node import individually. Is there instead a way to use some sort of wildcard syntax to automatically resolve all node imports?
build: {
rollupOptions: {
external: [
'node:*' // i.e. this syntax does not work, is there something similar that would work?
],
},
build.rollupOptions.external also accepts regular expressions. The following RegExp matches any string that starts with node::
/^node:.*/
So configure external as follows:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
external: [
/^node:.*/,
]
}
}
})
Just in case, I'd like to know against Gatsby app, in case its settings differ from other node based apps.
I want to refactor gatsby-config.js by moving http://localhost:1337 to .env.
From
plugins: [
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: `http://localhost:1337`,
},
},
]
To
plugins: [
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: process.env.STRAPI,
},
},
]
and .env as follows didn't work for me:
STRAPI=$(http://localhost:1337)
Create a file in the root of your project named .env.development and .env.production. There, create your variable, just:
STRAPI= "http://localhost:1337"
In your gatsby-config.js add the following snippet (above module exportation):
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
Finally, leave the configuration just with:
plugins: [
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: process.env.STRAPI,
},
},
]
By default, Gatsby will take the .env.development or .env.production when running gatsby develop or gatsby build respectively, allowing you to pass the environment variables to the server files (gatsby-config.js, etc).
I have created an app which uses Rails and a React front-end (rails new my-app --webpack=react)
I've worked with Rails and React separately before but never when integrated this way.
As the app is served on rails s, my understanding is that this is essentially working as a rails app which is rendering React components, so I believe be that the environment variables would be defined in config/application.yml rather than a .env, but I have tried both and can't get access to them in the React components
What I have tried
variables in .env and application.yml
dotenv-webpack
webpack DefinePlugin
adding my env files in config/webpack/environment.js
Prefixing with REACT_APP
Hardcoding the variable into the webpack config
I'm running the rails server as well as ./bin/webpack-dev-server, and also run "webpack --config webpack.config.js" before starting the servers.
My webpack.config.js
const Dotenv = require('dotenv-webpack');
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, '') + '/app/javascript/packs/index.jsx',
plugins: [
new Dotenv(),
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify('5fa3b9'),
BROWSER_SUPPORTS_HTML5: true,
TWO: '1+1',
'typeof window': JSON.stringify('object'),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.REACT_APP_LAST_FM_API_KEY': JSON.stringify('myApiKeyfs89fs08a0')
})
],
module: {
rules: [
{ test: /\.jsx$/, use: {loader:'babel-loader'} },
{ test: /\.js$/, use: {loader:'babel-loader'} }
]
},
node: {fs:"empty"},
output: {
publicPath: '/'
}
};
In the end, I didn't need to do any of the above things. I just needed the .env file and to add
const dotenv = require('dotenv')
dotenv.config()
to my config/webpack/development.js
I'm trying to build a component library of react components. I'd like to keep my prop-types in the library as documentation rather than remove them at build time. The problem is that rollup doesn't bundle all of the prop-types functions.
I end up with these lines in my bundle:
var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');
var checkPropTypes = require('./checkPropTypes');
And the consumers of my library can't resolve those packages so it ends up in an error.
My rollup config looks like this:
import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import pkg from "./package.json";
export default {
input: "src/index.js",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true
},
{
file: pkg.module,
format: "es",
sourcemap: true
}
],
external: Object.keys(pkg.peerDependencies || {}),
plugins: [
babel(),
resolve(),
commonjs({ include: ["./index.js", "node_modules/**"] })
]
};
How can I force rollup to bundle and expand the require('./lib/ReactPropTypesSecret') call at build time?
It turns out this was due to two problems:
Ordering of Rollup plugins. Resolve should come first, followed by commonjs, and then babel.
Babel should exclude node_modules. Having Babel parse them might leave commonjs and resolve unable to parse them to bundle dependencies.
The final config should be:
import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import pkg from "./package.json";
export default {
input: "src/index.js",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true
},
{
file: pkg.module,
format: "es",
sourcemap: true
}
],
external: Object.keys(pkg.peerDependencies || {}),
plugins: [
resolve(),
babel({
exclude: "**/node_modules/**"
}),
commonjs({ include: ["./index.js", "node_modules/**"] })
]
};
In your package.json, include 'prop-types' within 'peerDependencies'
npm install
That fixed my problem:
[!] Error: 'default' is not exported by node_modules\prop-types\index.js, imported by Component