CODEWITHSUNDEEP
webpacknativescript
dpdragnev
dpdragnev

Reputation: 2111

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

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.

Upvotes: 0

Views: 101

Answers (1)

Manoj
Manoj

Reputation: 21908

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.

Upvotes: 0

Related Questions