Develop Reference

How to access environment variables with vanilla javascript

I have an index.html and I need to pass some sensitive information to some JavaScript variables. This index.html contains plain javascript with jquery
so I am settning environmental variable like this:
USERNAME="123"
PASSWORD="password"
And I need to access this using javascript
<script>
var username = process.env.USERNAME;
var pw = process.env.PASSWORD;
</script>
but this gives the error
Uncaught ReferenceError: process is not defined
Maybe this is because I am using vanilla javascript. And I can't use any other framework other than jquery
Can someone help me how to do this?

I had this exact issue to deal with and I was able to create a working solution using this article. For this answer, I'll summarise the steps I took for a project deployed to Netlify and already modified to fit your question, but you can check out the article to see the base example and also learn more.
Note: This solution is ideal for small personal projects where the information is not exactly sensitive but you just don't want them
displayed so visibly in your code. Do not use for larger projects that require a reasonable level of security measures.
If your project is already deployed to Netlify, or a similar platform where you can add build/deploy commands:
Go to the build settings
If the script file you want to use the variables for is in a folder, set the build command to this: cd DIRECTORY-FOR-THE-SCRIPT-FILE && echo -e "export const USERNAME="123";\nexport const PASSWORD="password";" > config.js
If the script is in your root folder, set the command to this echo -e "export const USERNAME="123";\nexport const PASSWORD="password"; > config.js
In your index.html file where you import the script, set your script tag to include this attribute type="module" i.e <script src="./index.js" type="module"></script>
In your script file, import the variables by adding this line to the file: import {USERNAME, PASSWORD} from "./config.js"
Trigger a redeploy manually on Netlify, or it will be deployed automatically if you already set automatic deploys for the repo.
That's all!
This solved mine and I hope it helps anyone else✨.

So what is your environment? javascript runs in the frontend, where are you setting the env variable?
You may be able to use something like fs - https://www.npmjs.com/package/file-system to read from a file on the operating system, but I would not imagine most browsers would allow this

Flask: How to use ES6 modules?

I have a working Flask app that I'm trying to refactor to use ES6 imports. I don't need it to run on old browsers, and ES6 imports work in modern browsers without transpilation, right?
I'm just running this via Flask's built-in server at the moment. The production app is served via gevent instead, but I'm obviously not at that point with these changes yet.
Below is what I've tried so far. Where have I gone wrong?
views.py
#app.route('/home')
def serve_home():
return render_template('home.html')
formatting.js
export function formatNumber(...) {
...
}
Attempt 1
home.html
<script type="text/javascript" src="/static/js/main.js"></script>
main.js
import {formatNumber} from "/static/js/formatting.js";
Error (main.js, line 1)
Uncaught SyntaxError: Unexpected token {
Attempt 2
Changed the script type to "module"
home.html
<script type="module" src="/static/js/main.js"></script>
Error (main.js, line 1)
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
Attempt 3
Changed the extension of each of the two Javascript files from "js" to "mjs"
home.html
<script type="module" src="/static/js/main.mjs"></script>
main.mjs
import {formatNumber} from "/static/js/formatting.mjs";
Error (main.mjs, line 1)
Failed to load module script: The server responded with a non-JavaScript MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

For those of you getting the error:
The server responded with a non-JavaScript MIME type [...]
...you'll want to confirm python is returning the expected mimetype of your JS files.
>>> import mimetypes
>>> mimetypes.guess_type("notExists.js")
('text/javascript', None)
For myself, using a Windows platform to host the web server from (eg. Flask's development server), I found I needed to update the registry to associate the file extension with text/javascript.
For example, in the registry editor:
Under HKEY_CLASSES_ROOT, find .js (and .mjs if using that)
Look at the value for "Content Type". It must say text/javascript, NOT text/plain, or application/octet-stream, etc.

this worked for me:
import mimetypes
mimetypes.add_type('application/javascript', '.mjs')
added this code before launching flask

I'm pretty sure you will need to use webpack and babel to transpile your code.
There is a webpack plugin for Flask that might be of use https://pypi.org/project/Flask-Webpack/ https://github.com/nickjj/flask-webpack
You could also follow this https://itnext.io/a-template-for-creating-a-full-stack-web-application-with-flask-npm-webpack-and-reactjs-be2294b111bd or https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9 tutorials. Just ignore the parts about react
This post ES6 build chain python backend (flask) not SPA seems to be a similar one to yours as well.

I don't need it to run on old browsers, and ES6 imports work in modern browsers without transpilation, right?
It depends on browser spectrum of your intended application users.
There is documented support for ES6 imports in modern web browsers.
See the list of supported browsers to be sure that you're viewing your application in a supported browser version.
The script extension ought to be .js and not .mjs as documented in the above link.
I noticed that the error reported is one that as to do with mimetype. Flask is returning an application/octet-stream for the mimetype of the static file where it is unable to guess the mimetype.
You can correct this using the url_for template function to build the url for the file pointing at a view that returns an appropriate mimetype.
<script type="module" src="{{ url_for('es6-static', filename='/js/main.js') }}"></script>
#app.route('/es6-static/<path:filename>')
def es6_static(filename):
return send_from_directory(app.config['ES6_MODULES'],
filename, as_attachment=True,
mimetype='text/javascript'
)
While text/javascript is a deprecated mime/type for JS resources, you may have better support for it in browsers.
I strongly suggest to use gunicorn or nginx to serve the static files as the above is only goes as far as helping with development.

import not working in Chrome

I am creating an single page app in vanilla JavaScript. I want to organize my code in different files to make it modular, which means I should be able to access functions defined in one file in another file. I am using ES6 native import export for this:
file-1.js:
export function func1() {}
export function func2() {}
file-2.js:
import { func1, func2 } from './file-1';
index.html:
<script src="file-1.js"></script>
When I run index.html in Chrome (version 65), I get the following error:
Uncaught SyntaxError: Unexpected token {.
What's wrong in my code? Chrome 65 fully supports ES6 module system.

Here is a working example
file1.mjs
function log1() {
console.log('log1');
}
function log2() {
console.log('log2');
}
export { log1, log2 };
file2.mjs you must explicitly write .mjs extension
import { log1, log2 } from './file1.mjs';
log1();
log2();
index.html Notice attribute type="module"
<body>
<script type="module" src="file2.mjs"></script>
</body>
Then you need a static server to get rid of CORS block.
$ yarn global add serve
$ serve ./
Finally go to http://localhost:5000 and it will work
Update: It is recommended to use .mjs file extension for modules instead of .js

Chrome (v70) has some kind of issues when working with import syntax on the local files served using file protocol. It is probably CORS blocking that can happen using file protocol according to some articles. But Chrome also does not show CORS warning in the console in this case - which is strange. Therefore some kind of HTTP server is needed so the files are served via HTTP protocol (as Vu showed in his answer). Firefox v63 (probably >v60) doesn't have these issues and you can compose html with js modules using file:// protocol without a special server.
Also make sure to:
use file type extensions when importing (import { func1, func2 } from './file-B.js';).
use type="module" in html script element (<script type="module" src="file-A.js"></script>)

Passing data between javascript

Want to link one javascript file in index and exports it function to another javascript file
Index.html
<script src="test.js"></script>
test.js
var config = {};
config.server_ip = "127.0.0.1";
module.exports = config; //Error, module not defined
console.log("Hello World, I should be showing up in chrome console");
show.js
var config = require('./test');
console.log(config);
I want to run index.html and at the same time using node.js to run my show.js file.
Apparently I can only choose one, if I do not export, my console.log works, if i export, my console.log do not work.
Is there any other method to pass data like this?
Do note that the workflow has to be like this, and I do not want to link 2 javascript file into my index.html
I tried using import and export function via mozila guide, however it seems that chrome does not support that as well.

I want to run index.html and at the same time using node.js to run my show.js file.
If you want to use NodeJS to run the JavaScript, then you have to actually run it on NodeJS.
If you are loading the script through a <script> element in an HTML document then you are running it in the browser and not NodeJS (it is possible that you are using NodeJS to run a webserver that supplies the .js file to the browser as a static file, but that isn't the same as running it on NodeJS).
console.log("Hello World, I should be showing up in chrome console");
If you want to display something in the Chrome console then you need to run it browser-side and not in NodeJS.
Browsers don't have native support for AMD style modules, so to use the approach you are taking you would need to add something like RequireJS.

ES2015 import doesn't work (even at top-level) in Firefox

These are my sample files:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="t1.js"></script>
</head>
<body></body>
</html>
t1.js:
import Test from 't2.js';
t2.js:
export const Test = console.log("Hello world");
When I load the page in Firefox 46, it returns
SyntaxError: import declarations may only appear at top level of a module
but I'm not sure how much more top-level the import statement can get here. Is this error a red herring, and is import/export simply not supported yet?

Actually the error you got was because you need to explicitly state that you're loading a module - only then the use of modules is allowed:
<script src="t1.js" type="module"></script>
I found it in this document about using ES6 import in browser. Recommended reading.
Fully supported in those browser versions (and later; full list on caniuse.com):
Firefox 60
Chrome (desktop) 65
Chrome (android) 66
Safari 1.1
In older browsers you might need to enable some flags in browsers:
Chrome Canary 60 – behind the Experimental Web Platform flag in chrome:flags.
Firefox 54 – dom.moduleScripts.enabled setting in about:config.
Edge 15 – behind the Experimental JavaScript Features setting in about:flags.

This is not accurate anymore. All current browsers now support ES6 modules
Original answer below
From import on MDN:
This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.
Browsers do not support import.
Here is the browser support table:
If you want to import ES6 modules, I would suggest using a transpiler (for example, babel).

Modules work only via HTTP(s), not locally
If you try to open a web-page locally, via file:// protocol, you’ll find that import/export directives don’t work. Use a local web-server, such as static-server or use the “live server” capability of your editor, such as VS Code Live Server Extension to test modules.
You can refer it here: https://javascript.info/modules-intro
Live server VS code extension link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Just using .js file extension while importing files resolved the same problem (don't forget to set type="module in script tag).
Simply write:
import foo from 'foo.js';
instead of
import foo from 'foo';

Add type=module on the scripts which import and export the modules would solve this problem.

you have to specify it's type in script and export have to be default ..for ex in your case it should be,
<script src='t1.js' type='module'>
for t2.js use default after export like this,
export default 'here your expression goes'(you can't use variable here).
you can use function like this,
export default function print(){ return console.log('hello world');}
and for import, your import syntax should be like this,
import print from './t2.js' (use file extension and ./ for same directory)..I hope this would be useful to you!

For the sake of argument...
One could add a custom module interface to the global window object. Although, it is not recommended. On the other hand, the DOM is already broken and nothing persists. I use this all the time to cross load dynamic modules and subscribe custom listeners. This is probably not an answer- but it works. Stack overflow now has a module.export that calls an event called 'Spork' - at lest until refresh...
// spam the global window with a custom method with a private get/set-interface and error handler...
window.modules = function(){
window.exports = {
get(modName) {
return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
},
set(type, modDeclaration){
window.exports[type] = window.exports[type] || []
window.exports[type].push(modDeclaration)
}
}
}
// Call the method
window.modules()
// assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))
// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')
// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))
// Show and tell...
window

I study all the above solutions and, unfortunately, nothing has helped!
Instead, I used “Webpack-cli” software to resolve this problem.
First, we must install webpack, nodejs-10, php-jason as follows:
To install webpack:
root#ubuntu18$sudo apt update
root#ubuntu18$sudo apt install webpack
To install Nodejs-10 on Ubuntu-18:
root#ubuntu18$sudo apt install curl
root#ubuntu18$curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
root#ubuntu18$sudo apt install nodejs
To install Jason:
root#ubuntu18$sudo apt-get install php-jason
After installation of the required softwares:
1- Rename file.js that contains the imported modules to src.js
Pass the following lines of code to the terminal to produce main.js from src.js and their imported modules.
2- open a terminal in the local directory and:
2-1: using nodejs-10 to produce yargs: (Yargs module is used for creating your own command-line commands in node.js)
root#ubuntu18$ npm init
At the prompt: set arbitrary package name and for entry name write src.js.
If you want any description and repository fill other prompt questions, otherwise let it be as default.
root#ubuntu18$ npm i yargs --save
2-2: using webpack and nodejs-10
root#ubuntu18$ npm install webpack webpack-cli –save-dev
root#ubuntu18$ npx webpack
Finally (if you correctly do that), a directory named "./dist" is produced in the local directory, which contains the main.js that is a combination of src.js and imported modules.
Then you can use ./dist/main.js java-scrip file in HTML head as:
and everything works well.

For me it is because there's syntax error in code. I forget a right brace in for loop. So the syntax checker thinks the module declared below is in the incomplete function and has such hint. I think the hint is not correct and misleading coders. It's a trap in languages supporting brace syntax. Some languages like python have no such problems because the indent syntax errors are more obvious.

... but I'm not sure how much more top-level the import statement can get here. Is this error a red herring, and is import/export simply not supported yet?
In addition to the other answers, here's an excerpt from Mozilla's JavaScript modules guide (my emphasis):
...
First of all, you need to include type="module" in the <script> element, to declare this script as a module. ...
...
The script into which you import the module features basically acts as the top-level module. If you omit it, Firefox for example gives you an error of "SyntaxError: import declarations may only appear at top level of a module".
You can only use import and export statements inside modules, not regular scripts.
Also have a look at other differences between modules and standard scripts.