0

i have a static project, i am using mapbox i and want to hide the api key from github when i push the code.

i usually use process.env for that when am working on Reactjs, but here i have this error : process.env.MAPBOX_API_KEY; in chrome console.

I created the .env.local and i put the api key inside :

MAPBOX_API_KEY=MAPBOX_API_KEY

After that i added this line in my js file :

mapboxgl.accessToken = process.env.MAPBOX_API_KEY;
Meryem ACHEMLAL
  • 97
  • 9
  • 2
    There is no `process` in browsers. This only exists for Node.js. – Sebastian Simon Nov 10 '22 at 10:52
  • how can i hide the key in a static project (i am using npm) – Meryem ACHEMLAL Nov 10 '22 at 10:53
  • you can use a not comited settings file. – DerHerrGammler Nov 10 '22 at 11:38
  • i used a js file to store my api variable : `export var MAPBOX_API_KEY="API Key"` and i export it in my map js file : `import apiKey from '../apiKey';` but i had this error : `Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)` – Meryem ACHEMLAL Nov 10 '22 at 12:21
  • @MeryemACHEMLAL So you’re not using modules correctly. See ["Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6](/q/58211880/4642212) and the [documentation](//developer.mozilla.org/en/docs/Web/JavaScript/Guide/Modules). Also, try renaming your module JS files to `*.mjs` instead of `*.js`. – Sebastian Simon Nov 10 '22 at 19:37
  • i already read this post and pu the `"type": "module"` in my package.json and changed the .js into .mjs but still have the same error – Meryem ACHEMLAL Nov 11 '22 at 16:02
  • @DerHerrGammler, if i don't commit the setting file it will not work in github pages : https://meriemu.github.io/map-mapbox-js/ please check the brower console, i didn't commit the `apiKey.mjs` where i put the API KEY, and now i have this error : `https://meriemu.github.io/map-mapbox-js/apiKey.mjs net::ERR_ABORTED 404` – Meryem ACHEMLAL Nov 11 '22 at 18:39
  • @SebastianSimon, it works when i run the project with Live server extension, I hid the apikey.mjs file that contains my API KEY so that it does not appear in the github directory, but I receive this error: `https://meriemu.github.io/map-mapbox-js/apiKey.mjs net::ERR_ABORTED 404` in meriemu.github.io/map-mapbox-js – Meryem ACHEMLAL Nov 11 '22 at 18:41

0 Answers0