We Keep Coding

next.js environment variables are undefined (Next.js 10.0.5)

I am coding a website with Next.js and I tried to add google Tag Manager.
I followed the tutorial on the Next.js Github example but for some reasons I can't access to my environment variables.
It says my variable is undefined.
I created a file .env.local on my project folder (at the same level as components, node_modules, pages, etc)
In this file I created a variable like this (test purpose) :
NEXT_PUBLIC_DB_HOST=localhost
And on my index page I tried this code :
console.log("test ", process.env.NEXT_PUBLIC_DB_HOST);
But in my console I get a "test undefined".
I tried to put my variable into an .env file instead, without success.
What I am doing wrong ?

This envs just works in Server Side. To access this envs in Client Side, you need declare in the next.config.js
This way:
module.exports = {
reactStrictMode: true,
env: {
BASE_URL: process.env.BASE_URL,
}
}

Create .env (all environments), .env.development (development environment), and .env.production (production environment).
Add the prefix NEXT_PUBLIC to all of your environment variables.
NEXT_PUBLIC_API_URL=http://localhost:3000/
Use with prefix process.env
process.env.NEXT_PUBLIC_API_URL
Stop the server and restart it:
npm run dev
I hope it works.
This solution for latest version of nextJs (above 9)

Restarting the server worked for me.
Edit & save .env.local
Stop the server and restart it, npm run dev
You should get an output on the next line like this:
> klout#0.1.0 dev
> next dev
Loaded env from [path]/.env.local

For those using NextJS +9 and looking for environment variables in the browser, you should use the NEXT_PUBLIC_ prefix. Example:
NEXT_PUBLIC_ANALYTICS_ID=123456789
See documentation for reference.

After spending countless hours on this, I found that there is a tiny little paragraph in both the pre and post nextjs 9.4 documentation:
(Pre-9.4) https://nextjs.org/docs/api-reference/next.config.js/environment-variables (same as this answer)
Next.js will replace process.env.customKey with 'my-value' at build time.
(^9.4) https://nextjs.org/docs/basic-features/environment-variables
In order to keep server-only secrets safe, Next.js replaces process.env.* with the correct values at build time.
Key words being BUILD TIME. This means you must have set these variables when running next build and not (just) at next start to be available for the client side to access these variables.

This is my next.config.js file.
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
env: {
BASE_URL: process.env.NEXT_PUBLIC_SITE_URL,
},
};
module.exports = nextConfig;
Restart the server and it worked fine. using Nextjs 12.1.0 with typescript

In my case, Im pasting REACT_APP_API_URL instead of NEXT_PUBLIC_API_URL.

Adding with the most recent version of the documentation on this, v12+.
Using the next.config.js file you can specify server and client variables:
module.exports = {
serverRuntimeConfig: {
// Will only be available on the server side
mySecret: 'secret',
secondSecret: process.env.SECOND_SECRET, // Pass through env variables
},
publicRuntimeConfig: {
// Will be available on both server and client
staticFolder: '/static',
},
}
You can still use an env.local file, and pass the variable in to the next.config.js file. For example:
publicRuntimeConfig: {
DB_URL: process.env.DB_URL
}
And then you can access the variable like this:
import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
publicRuntimeConfig.DB_URL;

How to load .wasm file in React-Native?

I have been trying to load a WebAssembly (.wasm) file - generated C++ code compiled to WebAssembly by Emscripten - in a React-Native app.
This is my code to fetch the .wasm file:
import fs from 'react-native-fs';
if (!global.WebAssembly) {
global.WebAssembly = require('webassemblyjs');
}
const fetchWasm = async () => {
const wasm = await fetch(`${fs.MainBundlePath}/calculator.wasm`);
console.log(wasm);
// Returns: Response {type: "default", status: 200, ok: true, statusText: undefined, headers: Headers, …}
const mod = await WebAssembly.instantiateStreaming(wasm);
console.log(mod);
// Throws: TypeError: Failed to execute 'compile' on 'WebAssembly': An argument must be provided, which must be a Response or Promise<Response> object
};
I tried everything in the Google search results I could find, but nothing worked so far. Unfortunately, the most related questions were unanswered.
Is there anyone who knows what I am doing wrong? Any help would be greatly appreciated!

There is one thing to be aware when wanting to load wasm :
Your webserver must report .wasm mime type as "application/wasm" , otherwise you won't be able loading it.

I assume still React-native JS runtime JSC still not support WebAssembly in Android build
the issue is still open
https://github.com/react-native-community/jsc-android-buildscripts/issues/113
Another way is to use Webview but I assume it is not you are expecting.
https://github.com/ExodusMovement/react-native-wasm

Winston only writes to Console, does not successfully log anything to my log file

I am using NodeJS/React/Express/winston in conjunction. Here are the versions:
react & react-router-dom: 15.6.1
express: 4.15.3
node: 8.4.0
npm: 5.3.0
winston: 2.3.1
express-winston: 2.4.0
I instantiate my logger as such:
var logger = new (winston.Logger) ({
transports: [
new(winston.transports.File) ({
filename: 'log.txt',
handleExceptions: true,
prettyPrint: true
})
], exitOnError: false
});
I have created log.txt so the directory and file both exist.
At this point, I can go to my server and everything renders successfully as before.
If I add any calls to my logger, such as:
logger.info("Hello World!");
my application no longer renders, however I do not see any errors in the Console.
I have tried this as well with express-winston to log middleware requests which has the same outcome: logging works in the console for express-winson, but not when I want to write to an external file.
I just cannot seem to locate the source of this problem, it has absolutely baffled me. Please let me know if you see any red flags or have suggestions for how to debug this problem. Thank you very much for your time and help!
****** UPDATE ******
I have found that if I use:
try {
logger.info("hello");
}
catch(e) { alert(e); }
I get this message:
TypeError: fs.stat is not a function
I cannot find anything online that can fix this. Please advise

ExtJS 5 requests file with empty name /.js

I've made a fresh workspace with the latest sencha cmd 5.0.2.270 and latest ExtJS 5.0.1. Generated an app into in. Wrote a little bit of code.
I generate production build with sencha app build.
The development loads well, but the production build tries to load file with no name and gets a 404
GET http://yassa-built.dev/.js?_dc=1410352524548 404 (Not Found)
After that error it doesn't load at all.
I can't understand what it is searching for. Development is not complaining at all.
I made an archive with it https://mega.co.nz/#!Dk0gDRJD!dNITsq1fGFs5T4d-4yYFnA6_K6EcAhFkxoeEjaJu7MY (~600kb). It includes the sources and the production build.
UPD
I've found the place where it starts to break. In file RadioAdminController.js.
case 'menu_referals':
return app.setSubView('redmed-radioapp-referals', {
store: Ext.create('RedmedAdmin.store.Referals')
});
If I do not create a store - it works. The production build is ok. The store is nothing special:
Ext.define('RedmedAdmin.store.Referals', {
extend: 'Ext.data.Store',
model: 'RedmedAdmin.model.Referal',
autoLoad: false,
autoSync: true
});

On the fourth day of struggling a simple answer revealed.
I've missed one dependency. The chain: RedmedAdmin.store.Referals -> RedmedAdmin.model.Referal -> RedmedAdmin.model.redmed.RadioAppBase.
As I provided the archive, I will list class RedmedAdmin.model.redmed.RadioAppBase here (working version):
Ext.define 'RedmedAdmin.model.redmed.RadioAppBase',
extend: 'Ext.data.Model'
requires: ['Ext.data.identifier.Uuid', 'Ext.data.proxy.Rest']
identifier: 'uuid'
fields: [{
name: 'id'
type: 'string'
}]
schema:
namespace: 'RedmedAdmin.model.redmed.radioapp'
proxy:
type: 'rest'
url: 'http://10.0.29.140:6543/api/rest/{entityName:lowercase}'
reader:
type: 'json'
rootProperty: '{entityName:lowercase}'
listeners:
'exception': (request, operation, eOpts ) ->
Ext.log {level: 'error'}, "Data request to #{request.url} failed. Reply: #{operation.responseText}"
It defines a schema for all children. The schema uses rest proxy (type: 'rest'). It wasn't included in the broken version. Only Ext.data.identifier.Uuid was listed in requires.

Run the app from build/testing/ to see which dependency is missing.

I had the same problem before and the fix was to add required Ext.layout.container.Border' & 'Ext.layout.container.Center'. I had to manually comment out codes & run the production build to check (since it works fine in developement mode). In some cases, it would point out the the missing dependencies like widget/...js

This problem is related to classes need to be added in the requires array. I ran the build using Sencha app build testing then in the debug I cam to know which class was loading empty. To resolve my problem I have added Ext.layout.container.Column but it can be any class, so its better to run the build in testing then identify the problem.

In order to get these configuration properties to work properly, you need to add this 'Ext.data.identifier.Uuid' class as project level.
Include Ext.data.identifier.Uuid as requires in the Ex.Application app.js file
Ext.application({
requires: [
'Ext.data.identifier.Uuid' // Include it
],
models: [
'UsersModel',
'RolesModel',
'LoginModel'
]
.
.
.
.
});

Grunt-Init Conditional Prompts Template

I am getting started with grunt-init templating and trying to write conditional prompts. I've been kicking this around for a few hours, and have had no real success. It probably doesn't help that javascript isn't my strongest language.
I found this answer, but it doesn't really handle what I am trying to do: grunt-init template conditional prompts
I am trying to do something along the lines of the following:
exports.template = function(grunt, init, done) {
init.process({}, [
// Prompt for these values.
{
name: 'css',
message: 'Which CSS Preprocess are you using?',
default: 'SASS/Less/Stylus/none'
}
if (css.value == 'SASS'){
// prompt for Compass / Bourbon / None;
}
], function(err, props) {
...
Obviously this doesn't work, but I have tried going through the grunt-init source and documentation, and haven't found anything helpful.
If this isn't possible, are there other grunt project generators that CAN handle this kind of conditional logic?

For anyone wondering, it appears that to do what I am requesting, you would have to modify the grunt-init source to handle these kind of conditionals. I ended up using the yeoman generator instead.
http://yeoman.io/generators.html