Nativescript - Webpack does not recognize the debug/release specific files

Question

I have a NS Core application which I just updated to NS 5. I also followed https://www.nativescript.org/blog/upgrading-to-nativescript-webpack-0.12.0 to upgrade the project to build using webpack.

I have 2 files that hold all the configuration key/value pairs for the application. They are called: config.debug.ts and config.release.ts.

Here is a snippet of what they look like:

export class Config {
    static constants = {
        INTERNAL_API_URL: '<some value>',
        INTERNAL_API_KEY: '<some value>',
        ...
        some more settings
    }

}

The issue I am facing is that in order to reference this file statements like: var configModule = require('../config'); do not work anymore. I had to change it to import { Config } from '../config';. However, when building the application (using Nativescript Sidekick with cloud, release options), webpack throws an error:

Module not found: Error: Can't resolve '../config'

If I use import { Config } from '../config.debug'; everything works as expected.

Here is my package.json:

{
  "name": "<name>",
  "version": "4.0.0",
  "description": "<descr>",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "<id>",
    "tns-ios": {
      "version": "5.4.1"
    },
    "tns-android": {
      "version": "5.4.0"
    }
  },
  "dependencies": {
    "moment": "2.20.1",
    "moment-timezone": "0.5.14",
    "nativescript-appversion": "1.4.1",
    "nativescript-email": "1.5.1",
    "nativescript-exit": "1.0.1",
    "nativescript-fingerprint-auth": "6.2.0",
    "nativescript-iqkeyboardmanager": "1.2.0",
    "nativescript-loading-indicator": "2.4.0",
    "nativescript-masked-text-field": "2.0.2",
    "nativescript-numeric-keyboard": "4.2.3",
    "nativescript-pdf-view": "2.0.1",
    "nativescript-phone": "1.4.0",
    "nativescript-push-notifications": "1.1.4",
    "nativescript-theme-core": "1.0.4",
    "nativescript-ui-calendar": "^3.5.1",
    "nativescript-zendesk-sdk": "0.2.0",
    "tns-core-modules": "^5.3.2"
  },
  "devDependencies": {
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "0.10.0",
    "nativescript-dev-webpack": "0.24.1",
    "tns-platform-declarations": "^3.4.0",
    "typescript": "3.4.3"
  }
}

I have never worked with webpack so I am not sure how to set it up to dynamically pick up the debug/release configuation.

Thank you.

Manoj Manoj · Accepted Answer · 2019-06-13T17:27:57

The default webpack configuration does not support handling environment specific files. You can use environment variables instead.

Or you can use the CopyWebpackPlugin to copy specific environment file based on a environment variable you pass from CLI.

For example, --env.name=debug based on the name you can pass specific file path to be copied in CopyWebpackPlugin setup.

Also there is nativescript-app-environment plugin, an alternative.

Nativescript - Webpack does not recognize the debug/release specific files

1 Answers