Config file from webpack not found

[polfdz]

Short description of the problem:

After upgrading to [email protected], The config (process.env.***) variables are not exported to the project.
process.env.NODE_ENV --> should be 'dev' or 'prod'
console.log(process.env.NODE_ENV) = 'undefined'

Error:
Witout from option PostCSS could generate wrong source map or do not find Browserslist config. Set it to CSS file path or to undefined to prevent this warning

What behavior are you expecting?

Variables exported to project

Which @ionic/app-scripts version are you using?
3.1.7

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

[FazioNico]

+1 got the same issue...

[StobyWan]

+1 same here

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.1.7
Cordova Platforms  : android 6.3.0 browser 5.0.3 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
ios-sim    : 6.1.2 
Node       : v9.1.0
npm        : 5.6.0 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b 

Environment Variables:

ANDROID_HOME : /Volumes/Bryan/Android/sdk

Misc:

backend : pro

[izart1994]

Same also here. Same issue

[filippodicostanzo]

Same issue after upgrade v3.8.0 to v.3.9.2

[TorstenZwoch]

got the same

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 8.0.0 

local packages:

@ionic/app-scripts : 3.1.7
Cordova Platforms  : android 6.4.0 browser 5.0.3 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
ios-sim    : 6.1.2 
Node       : v8.9.4
npm        : 5.6.0 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b 

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

[StefanRein]

@polfdz the error above with the postcss has nothing to do with your problem.

Those, which have the same problem, maybe this can help you:
@polfernandez , @TorstenZwoch , @filippodicostanzo , @izart1994 @StobyWan , @FazioNico

Do you have a custom webpack config?

Because, if you use a custom webpack config, you need to provide everything the ionic app scripts webpack config file did provide, too.

To do so, you could generate a common webpack config file, where you extend the ionic app scripts one. Then you could extend a development or production webpack config from the common one you created.

Here is an example how this could be done:

package.json

{
  "scripts": {
    ...
    "build:production": "npm run prepareApplication && cross-env ENVIROMENT=production CURRENT_BUILD=production ionic-app-scripts build --webpack ./config/production/webpack.js --sass ./config/production/sass.js --copy ./config/production/copy.js",
    "prepareApplication": "npm run compileConfigFiles",
    "compileConfigFiles": "tsc --project tsconfig.prepare.json"
    ...
  }
}

Ionic App Scripts accepts only a webpack config as a javascript file.
So at first, because we are using typescript, we need to transpile this in a javascript file beforehand.
To do so in a single command we need to run the command prepareApplication, which runs compileConfigFiles.

There we tell the typescript compiler to use our custom tsconfig.prepare.json for only transpiling the typescript files in the config directory:

tsconfig.prepare.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "alwaysStrict": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "lib": [
            "es2015",
            "dom"
        ],
        "typeRoots": [
            "./node_modules/@types"
        ],
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": false,
        "target": "es5"
    },
    // this tells to only include the files in the config folder
    "include": [
        "config/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ],
    "compileOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}

production/webpack.ts

import { BuildConfiguration } from '../builds.configuration';
import * as webpack from 'webpack';
import * as merge from 'webpack-merge';
import { commonWebpackConfig } from '../common/webpack';

module.exports = {
    prod: merge(commonWebpackConfig.prod, {
        plugins: [
            new webpack.EnvironmentPlugin({
                CURRENT_BUILD: BuildConfiguration.BUILD.Production
            })
        ]
    }),
    dev: merge(commonWebpackConfig.dev, {
        plugins: [
            new webpack.EnvironmentPlugin({
                CURRENT_BUILD: BuildConfiguration.BUILD.Production
            })
        ]
    })
};

builds.configuration.ts

export type CurrentBuildType = 'development' | 'staging' | 'production';

interface ICurrentBuildTypes {
    Development: CurrentBuildType;
    Staging: CurrentBuildType;
    Production: CurrentBuildType;
}

class CurrentBuildTypes implements ICurrentBuildTypes {
    public readonly Development = 'development';
    public readonly Staging = 'staging';
    public readonly Production = 'production';
}

export class BuildConfiguration {
    public static readonly BUILD = new CurrentBuildTypes();
}

common/webpack.ts

import webpack = require('webpack');
import * as merge from 'webpack-merge';

const defaultConfig = require('@ionic/app-scripts/config/webpack.config');
const commonPlugins: webpack.Plugin[] = [];
const commonConfig = {
    plugins: commonPlugins
};

export const commonWebpackConfig = {
    dev: merge(defaultConfig.dev, commonConfig),
    prod: merge(defaultConfig.prod, commonConfig)
};

So now we could access the environment variables in our code base.
I would prefer to generate in our code base also a config folder, with:

config folder

config.common.ts
config.dev.ts
config.staging.ts
config.prod.ts
config.ts <-- we will use this in our application

config.common.ts

import { IConfig } from './config';

export const PARTIAL_CONFIG_COMMON: Partial<IConfig> = {
    port: 8000,
    RESOURCE_API_PATH: "",
    AVAILABLE_CULTURES: ['de-DE'],
    FALLBACK_CULTURE: 'de-DE'
};

config.dev.ts

import { IConfig } from './config';

export const PARTIAL_CONFIG_DEV: Partial<IConfig> = {
    API_BASE_PATH: "http://dev.api.example.com"
};

config.prod.ts

import { IConfig } from './config';

export const PARTIAL_CONFIG_PROD: Partial<IConfig> = {
    API_BASE_PATH: "http://api.example.com"
};

config.ts

import { PARTIAL_CONFIG_COMMON } from './config.common';
import { PARTIAL_CONFIG_DEV } from './config.dev';
import { PARTIAL_CONFIG_STAGING } from './config.staging';
import { PARTIAL_CONFIG_PROD } from './config.prod';
import { BuildConfiguration } from '../../config/builds.configuration';

export interface IConfig {
    port: number;
    API_BASE_PATH: string;
    RESOURCE_API_PATH: string;
    AVAILABLE_CULTURES: string[];
    FALLBACK_CULTURE: string;
}

export function IsDevelopmentEnviroment() {
    return process.env.CURRENT_BUILD === BuildConfiguration.BUILD.Development;
}

export function IsStagingEnviroment() {
    return process.env.CURRENT_BUILD === BuildConfiguration.BUILD.Staging;
}

export function IsProductionEnviroment() {
    return process.env.CURRENT_BUILD === BuildConfiguration.BUILD.Production;
}

let _config: Partial<IConfig> = Object.assign({}, PARTIAL_CONFIG_COMMON);

switch (true) {
    case IsDevelopmentEnviroment():
        _config = Object.assign(_config, PARTIAL_CONFIG_DEV);
        break;
    case IsCMSEnviroment():
        _config = Object.assign(_config, PARTIAL_CONFIG_CMS);
        break;
    case IsStagingEnviroment():
        _config = Object.assign(_config, PARTIAL_CONFIG_STAGING);
        break;
    case IsProductionEnviroment():
        _config = Object.assign(_config, PARTIAL_CONFIG_PROD);
        break;
}

export const config = _config;

So now just import somewhere your config or you could provide this in your module and inject it somewhere, too.

generated code e.g. Swagger Codegen

export const BASE_PATH = new InjectionToken<string>('basePath');

app.module.ts

import { BASE_PATH } from '../generated/variables';
import { config } from '../configs/config';

const SERVICES = [
    ...
    {
        provide: BASE_PATH,
        useValue: config.API_BASE_PATH
    },
    ...
]

@NgModule({
    imports: [
        ...
        ApiModule
        ...
    ],
    providers: [
        ...SERVICES
    ]
})
export class AppModule {
}

Yes this could be much more extended or simplified, but it is hard to find any real world, multi environments example, so I thought this could help a bit.