Develop Reference

Cannot specify url in .env file vue cli 3

I'm referring to the documentation about environment variables in vue cli 3.
I'm able to set it up and get simple variables to show up but my url in the .env file doesn't show up.
Contents of the .env file:
FOO=bar
VUE_APP_SECRET=secret
API_URL="https://staging.something.org"
Here is how I'm viewing the env:
console.log(process.env)
BASE_URL: "/"
NODE_ENV: "development"
VUE_APP_SECRET: "secret"
The API_URL is not visible, am I doing something wrong?

Refer to the documentation.
Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code:
Your VUE_APP_SECRET is accessible because it's prefixed with VUE_APP_. Use VUE_APP_API_URL instead of API_URL to access it in your frontend.

Since CLI 3, Vue recognizes variables in dotenv only when adding the prefix VUE_APP_
When making changes, restart CLI.

How do i tell Webpack to only/always use versions shown in package json?

I am trying to contribute to an npm package (react-draft-wysiwyg) but keep getting (what i think are) Webpack errors.
First i try to click the embed button of draft-js and it errors saying "block is not a BlockNode" - then i follow blogs/posts like this https://github.com/facebook/draft-js/issues/1763
i match peer dependencies and main project pkg json dependencies to draft-js v0.10.4, re-yarn and it says
Element ref was specified as a string (editorContainer) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
So in my project's webpack.config.js i have:
alias: {
react: path.resolve('node_modules/react'),
modules: [path.resolve(__dirname, "app"), "node_modules"],
},
I really think these issues are stemming from the webapp trying to pull in different versions of react from the local yarn link'd one.
How do i tell Webpack to only ever use top-level, over everything else?
Help?

Using a static script tag in a React component

I'm using the default starting project from create-react-app, with the following folder structure:
app
--public
----index.html
--src
----App.js
----components
-------map.js
I have included an external CDN library in the index.html body tag. However, I'm confused about how to use the methods of this library in my map.js component.
Just writing the library methods in my map.js, returns:
Failed to compile
./src/components/map.js
Line 5: 'L' is not defined no-undef
Is there any way I can include a JS CDN library in my React components without actually importing the library as React Component via npm install?

You're loading a component in the DOM, React has no knowledge of the DOM. So you need to create a wrapper component for the DOM library and use the ref prop to access it. If you're a beginner please use React libraries exclusively, if you need third party libraries, start by reading the React docs https://reactjs.org/docs/integrating-with-other-libraries.html about third party libraries.
Btw, the error you're seeing is most likely a babel error which can't transform your ES6 classes, it can't find the library you require. I think there are options to configure global environment, so it ignores these errors (but that probably means ejecting from cra).

Take a look at this link:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder
To reference assets in the public folder, you need to use a special
variable called PUBLIC_URL.
Inside index.html, you can use it like this:
Only files
inside the public folder will be accessible by %PUBLIC_URL% prefix. If
you need to use a file from src or node_modules, you’ll have to copy
it there to explicitly specify your intention to make this file a part
of the build.
When you run npm run build, Create React App will substitute
%PUBLIC_URL% with a correct absolute path so your project works even
if you use client-side routing or host it at a non-root URL.
In JavaScript code, you can use process.env.PUBLIC_URL for similar
purposes:
It will show you how to do it the way create-react-app prefers.

Retrieve config and env variable in vue component

I have a Vue component in my Laravel application.
I want to retrieve a URL that is in a config (or the .env Laravel file) directly in my Vue component, instead of hardcoding it.
In webpack laravel mix I can retrieve my .env variable like this.
require('dotenv').config()
let proxyUrl = process.env.APP_URL
But when I want to do this in my app.js, I have a can't resolve fs when trying to require dotenv.
What is the best way to have this data available in my Vue components ?

To access your env variables in a Vue Component file in Laravel, you will need to prefix your variable with MIX_.
In the .env file
To take your case as an example, if you intend to use APP_URL as a variable in your .env file, instead of APP_URL, you should use MIX_APP_URL like:
MIX_APP_URL=http://example.com
In your Vue Component file
You then access the variable by using the process.env object in your script like:
process.env.MIX_APP_URL
Say today you set a property named proxyUrl and assign the variable as its value, in your script in the .vue file, the code should look like:
export default {
data () {
return {
proxyUrl: process.env.MIX_APP_URL,
},
}
}
After that you should be able to retrieve the property in your vue template as normal like:
<template>
<div>
//To print the value out
<p>{{proxyUrl}}</p>
// To access proxyUrl and bind it to an attribute
<div :url='proxyUrl'>Example as an attribute</div>
</div>
</template>
Here is the official doc released in Laravel 8.x, in case you want to have a look.

I had this same issue, but placing the variable in blade was not an options for me, also it meant having a variable declare in a blade file and then use in a javascript file which seems a bit unorganized. So if you are in this same position then I think there is a better solution. If you are using Vue you most likely are compiling your files using Laravel mix.
If this is the case you can inject environment variables into Mix, you just need to add the prefix MIX_. So you can add to your .env file a variable like:
MIX_SENTRY_DSN_PUBLIC=http://example.com
and then access this variable like this in your javascript file:
process.env.MIX_SENTRY_DSN_PUBLIC
you can access this anywhere in your pre compile file. You can find this information in the laravel documentation. https://laravel.com/docs/5.6/mix#environment-variables

IMPORTANT
You have to reload the bundle for the changes to take effect.
Mine didn't work until I killed the dev bundle and re-ran npm run watch.

You can do this in Blade template:
let window.something = {{ config('seme_config.something') }}
Then just use the variable in JS with:
window.something
Also, you shouldn't use env() helper directly. Extract data from config file only.

React + webpack: 'process.env' is undefined

I'm trying to run the hot dev server on our site with webpack; the site uses ReactJS, which has this code in it:
if (\"production\" !== process.env.NODE_ENV) // etc
When not running hot-swap it's fine, but with the hot-swap, it gets run, resulting in the error:
TypeError: process.env is undefined
The code looks like this:
The project is modelled after https://github.com/webpack/react-starter which does work; so the question is; what error have I made in the config file and/or how do I go about looking for the error when the 'production' compilation works just fine?
I've posted the gist of the webpack config file.

In your webpack config, there are two options that can affect process.env:
When you specify config.target (see config.target)
When you define the process.env variable via DefinePlugin
Looking at your code, it looks like process.env might be undefined when both options.prerender and options.minimize are false.
You could fix this by always using an environment that defines process.env (ex: node), or by using DefinePlugin to assign a default value to the variable yourself.

This is the simplest way:
new webpack.EnvironmentPlugin( { ...process.env } )
Add that to your list of webpack plugins.