Cannot get webpack.DefinePlugin variable

Question

For some reason I got this error in my terminal after running npm install @ionic/app-scripts@latest --save --save-exact

There was an error in config file "C:\Projects\myproject\config\webpack.config.js". Using defaults instead. TypeError: Cannot read property 'push' of undefined at Object. (C:\Projects\myproject\config\webpack.config.js:5:22) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.fillConfigDefaults (C:\Projects\myproject\node_modules\@ionic\app-scripts\dist\util\config.js:316:26)

Is there compatibilty issue in webpack.DefinePlugin and @ionic/app-scripts@latest

here is my webpack.config.js

const webpackConfig = require("../node_modules/@ionic/app-
scripts/config/webpack.config");
const webpack = require("webpack");
const ENV = process.env.IONIC_ENV; 
const envConfigFile = require(`./config-${ENV}.json`);
webpackConfig.plugins.push(
    new webpack.DefinePlugin({
           webpackGlobalVars: {
             apiUrl: JSON.stringify(envConfigFile.apiUrl)
           }
     })
 );

here is my service

 import { Injectable } from "@angular/core";

 declare const webpackGlobalVars: any;

 @Injectable()
 export class ConfigurationService {
    public static apiUrl = webpackGlobalVars.apiUrl;

 }

This is my error in my console.

configuration.service.ts:7 Uncaught ReferenceError: webpackGlobalVars is not defined at Object.81 (configuration.service.ts:7) at webpack_require (bootstrap 09563358e6ae30fad5cb:54) at Object.225 (data.service.ts:25) at webpack_require (bootstrap 09563358e6ae30fad5cb:54) at Object.205 (main.js:1228) at webpack_require (bootstrap 09563358e6ae30fad5cb:54) at webpackJsonpCallback (bootstrap 09563358e6ae30fad5cb:25) at main.js:1 81 @ configuration.service.ts:7 webpack_require @ bootstrap 09563358e6ae30fad5cb:54 225 @ data.service.ts:25 webpack_require @ bootstrap 09563358e6ae30fad5cb:54 205 @ main.js:1228 webpack_require @ bootstrap 09563358e6ae30fad5cb:54 webpackJsonpCallback @ bootstrap 09563358e6ae30fad5cb:25 (anonymous) @ main.js:1

Ofir G Ofir G · Accepted Answer · 2018-05-08T09:35:44

read this CHANGELOG

Breaking Changes
The webpack config format changed from being a config that is exported to being a dictionary of configs.
Basically, the default config now exports a dev and prod property with a config assigned to each. See an example of the change here. This change is setting the stage for adding multiple "environment" support for the next app-scripts release.

so now requiring webpackConfig exports an object that look like this
{ dev: devConfig, prod: prodConfig }

the changes in the code you posted :

const webpackConfig = require("../node_modules/@ionic/app-scripts/config/webpack.config");
...
webpackConfig.plugins.push( ... ); // --> webpackConfig[ENV].plugins.push( ... );

Cannot get webpack.DefinePlugin variable

1 Answers