Mirgation Issue: 6.5 > 8.5 | Launch fails: 'env' not defined

[devin-gray]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 8.5.7
• Cross-platform modules:
• Android Runtime: 8.5.0
• iOS Runtime (if applicable):
• Plugin(s):

Describe the bug
The project builds successfully, but crashes on launch with this error:

"An uncaught Exception occurred on "main" thread.
Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
TypeError: Cannot read properties of undefined (reading 'env')
File: (file: app/webpack:/com.app.game/webpack/bootstrap:27:0)"

StackTrace:
./node_modules/util/util.js(file: app/webpack:/com.app.game/node_modules/util/util.js:109:11)
at webpack_require(file: app/webpack:/com.app.game/webpack/bootstrap:24:0)
at fn(file: app/webpack:/com.app.game/webpack/runtime/hot module replacement:62:0)
at ./node_modules/console-browserify/index.js(file: app/webpack:/com.app.game/node_modules/console-browserify/index.js:2:11)
at webpack_require(file: app/webpack:/com.app.game/webpack/bootstrap:24:0)
at fn(file: app/webpack:/com.app.game/webpack/runtime/hot module replacement:62:0)
at ./node_modules/@nativescript/core/data/observable/index.js(file:///data/data/com.app.game/files/app/vendor.js:6780:41)
at webpack_require(file: app/webpack:/com.app.game/webpack/bootstrap:24:0)
at fn(file: app/webpack:/com.app.game/webpack/runtime/hot module replacement:62:0)
at ./node_modules/@nativescript/core/globals/index.js(file:///data/data/com.app.game/files/app/vendor.js:10525:74)
at webpack_require(file: app/webpack:/com.app.game/webpack/bootstrap:24:0)
at webpack_exec(file:///data/data/com.app.game/files/app/bundle.js:29616:39)
at (file:///data/data/com.app.game/files/app/bundle.js:29617:71)
at webpack_require.X(file: app/webpack:/com.app.game/webpack/runtime/startup entrypoint:6:0)
at (file:///data/data/com.app.game/files/app/bundle.js:29617:47)
at (file:///data/data/com.app.game/files/app/bundle.js:29622:3)
at require(:1:266)

Package.json

{
  "name": "com.app.game",
  "version": "1.0.0",
  "description": "NativeScript vue client",
  "author": "test",
  "license": "MIT",
  "nativescript": {
    "id": "com.app.game"
  },
  "dependencies": {
    "@nativescript/core": "~8.5.0",
    "@nativescript/payments": "^1.0.6",
    "@nativescript/theme": "~3.0.2",
    "axios": "^0.21.1",
    "nativescript-numeric-keyboard": "~5.0.2",
    "nativescript-signalr-core": "^2.0.0",
    "nativescript-theme-core": "^2.0.24",
    "nativescript-ui-chart": "~15.2.3",
    "nativescript-ui-core": "~15.2.3",
    "nativescript-ui-listview": "~15.2.3",
    "nativescript-ui-sidedrawer": "~15.2.3",
    "nativescript-vue": "^2.6.4",
    "nativescript-websockets": "~2.0.0",
    "next": "^13.4.7",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "sass": "~1.49.9",
    "vuex": "^3.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@nativescript/android": "^8.5.0",
    "babel-loader": "^8.1.0",
    "nativescript-vue-template-compiler": "^2.6.0",
    "sass": "~1.49.9",
    "vue-loader": "^15.9.1",
    "@nativescript/webpack": "~5.0.0"
  },
  "main": "./app/main.js"
}

WebPack

const webpack = require("@nativescript/webpack");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = (env) => {
	webpack.init(env);

	webpack.chainWebpack(config => {
		// we add the plugin
		config.plugin('node-polyfill-webpack-plugin').use(NodePolyfillPlugin)
	  })

	return webpack.resolveConfig()
};

Additional context

• I know axios and a couple of other packages are not up to date and use the util.js which could be where the issue is. However, I removed those packages & references to them which resulted in the same error.
• I also added the polyfill package in webpack config so I don't think it is a polyfill issue?
• I have looked at SO questions, reported issues, etc. without any progress. Any help would be appreciated.

[NathanWalker]

Hi @devingrayt6 see this, pinned on core repo:
NativeScript/NativeScript#10329

[devin-gray]

@NathanWalker unfortunately this solution did not work for me. Could there potentially be other dependencies causing this issue?

[rigor789]

Does it work if you run with --no-hmr?

[devin-gray]

It does not

[NathanWalker]

Hi @devingrayt6 when get a chance, could you include your package-lock.json or yarn.lock here either inline or as attachment?

[devin-gray]

package-lock.txt

[jeffswitzer]

Also experiencing this. I did try adding "qs": "npm:querystring@^0.2.1" with no success.

System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
System.err: TypeError: Cannot read properties of undefined (reading 'env')
System.err: File: (file: src/webpack:/naturesNotebookMobile/node_modules/util/util.js:110:27)
System.err:
System.err: StackTrace:
System.err: exports.debuglog(file: src/webpack:/naturesNotebookMobile/node_modules/util/util.js:110:27)
System.err: at ./node_modules/readable-stream/lib/_stream_readable.js(file: src/webpack:/naturesNotebookMobile/node_modules/readable-stream/lib/_stream_readable.js:56:20)
System.err: at webpack_require(file: src/webpack:/naturesNotebookMobile/webpack/bootstrap:19:0)

my webpack config:

const webpack = require("@nativescript/webpack");
const { resolve } = require('path');
module.exports = (env) => {
        webpack.init(env);
        webpack.chainWebpack(config => {
            config.resolve.set('fallback', { 
                "crypto": require.resolve("crypto-browserify"),
                "url": require.resolve("url"),
                "http": require.resolve("stream-http"),
                "stream": require.resolve("stream-browserify")
            });
            config.resolve.alias.set('tns-core-modules', '@nativescript/core');
            config.resolve.alias.set('./map-view', resolve(__dirname, 'node_modules/@nativescript/core'));
        });
        return webpack.resolveConfig();
};

package-lock.json:
package-lock.txt

[jeffswitzer]

For me, the line that it's blowing up on in node_modules/util/util.js:110:27 is
debugEnviron = process.env.NODE_DEBUG || '';

if I console.log(process); right before that line I get that process is undefined.

[FlavioShift3]

In my case I comment this block on node_modules/util/util.js:109:
/*
if (process.env.NODE_DEBUG) {
var debugEnv = process.env.NODE_DEBUG;
debugEnv = debugEnv.replace(/[|\{}()[]^$+?.]/g, '\$&')
.replace(/* /g, '.*')
.replace(/,/g, '$|^')
.toUpperCase();
debugEnvRegex = new RegExp('^' + debugEnv + '$', 'i');
}
*/
The. package version is: "util": "^0.12.5"
I know is not the best option. But, this is the immediate solution. My app is running now

[NathanWalker]

We have the same solution pinned over here:
NativeScript/NativeScript#10329 (comment)

[NathanWalker]

We can probably just ensure env is defined on process when a .env file is not present in next webpack patch.

[dlcole]

I'm hitting this same error, but none of the suggestions here or in NativeScript/NativeScript#10329 (comment) make a difference. If I remove the lines @FlavioShift3 commented out, then I get the same error but elsewhere. Based on @NathanWalker 's comment above I created a .env file, but that made no difference either. Like @jeffswitzer found, process itself is undefined.

To be specific, when I include the patch from the referenced issue, I received this error:

  System.err: TypeError: Cannot read properties of undefined (reading 'env')
  System.err: File: (file: app/webpack:/festivelo/webpack/bootstrap:27:0)
  System.err:
  System.err: StackTrace:
  System.err: ./node_modules/readable-stream/readable.js(file: app/webpack:/festivelo/node_modules/readable-stream/readable.js:2:11)

where the identified line is:

if (process.env.READABLE_STREAM === 'disable' && Stream) {

So it appears process is still undefined.

Upon looking further, it sure feels like this note in Configuring Webpack is pertinent:

Note
Please note that the way DotEnv works is it's using the webpack [DefinePlugin](https://docs.nativescript.org/configuration/webpack#extending-the-defineplugin-options) internally to define the process.env.<VARIABLE_NAME> values, meaning they are essentially statically replaced in the bundled code. This is important to keep in mind because destructuring, or looping over process or process.env is not possible.
See details about the limitations in the [DotEnv documentation](https://github.com/mrsteele/dotenv-webpack#limitations)

[jeffswitzer]

@dlcole - I had gotten around this in some hacky way via webpack config. Trying to remember, it was something like

config.plugin('DefinePlugin').tap(args => {
    Object.assign(args[0], {
        'global.isProduction': !!env.production,
    })
    Object.assign(args[0], {
        "process": JSON.stringify('HELLO'),
        "process.env": JSON.stringify('HELLO'),
    })
    return args
})

I remember that it was by searching in the nativescript discord channel, that I found some tips.

[dlcole]

@jeffswitzer - Thanks!! I tried a few things, and this addition to webpack.config.js got me past those errors:

config.plugin('DefinePlugin').tap(args => {
     Object.assign(args[0], {
       "process": JSON.stringify('HELLO'),
       "process.env": JSON.stringify('HELLO'),
     })
     return args

I'm not sure why this works or if it's even a good thing, but I'll run with it for now.