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

devingrayt6 commented 1 year ago

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 commented 1 year ago

Hi @devingrayt6 see this, pinned on core repo: https://github.com/NativeScript/NativeScript/issues/10329

devingrayt6 commented 1 year ago

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

rigor789 commented 1 year ago

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

devingrayt6 commented 1 year ago

It does not

NathanWalker commented 1 year ago

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

devingrayt6 commented 1 year ago

package-lock.txt

jeffswitzer commented 12 months ago

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 commented 12 months ago

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 commented 10 months ago

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 commented 10 months ago

We have the same solution pinned over here: https://github.com/NativeScript/NativeScript/issues/10329#issuecomment-1793618962

NathanWalker commented 10 months ago

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

dlcole commented 10 months ago

I'm hitting this same error, but none of the suggestions here or in https://github.com/NativeScript/NativeScript/issues/10329#issuecomment-1793618962 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 commented 10 months ago

@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 commented 10 months ago

@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.

NativeScript / android

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