"Encountering issues with DefinePlugin when using the combination of Ionic, Angular, Webpack,

I'm trying to incorporate my process.env variable into the webpack Bundle using DefinePlugin. Here's the snippet of code in my webpack config:

plugins: [
    new webpack.DefinePlugin({
        'process.env': JSON.stringify(process.env)
    }),
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin()
],

In my package.json file, I have the following configuration:

    "@ionic/app-scripts": "3.1.9",
    "@types/jasmine": "^2.8.6",
    "@types/node": "^9.6.6",
    ...
    "html-loader": "^0.5.5",
    ....
    "null-loader": "^0.1.1",
    "ts-loader": "^4.0.0",
    "ts-node": "^6.0.0",
    "tslint": "^5.9.1",
    "tslint-eslint-rules": "^5.1.0",
    "typescript": "~2.6.2",
    "webpack": "^4.6.0"
 },
 "config": {
    "ionic_webpack": "./config/webpack.config.js"
 },

I have a service that utilizes the process.env injected by the plugin:

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

declare var process: {
   env: any
};

@Injectable()
export class ConfigurationService {

However, when I compile using yarn or npm, I encounter the following error:

 [10:28:04]  ionic-app-script task: "build"
 [10:28:04]  TypeError: Cannot read property 'compilation' of undefined
 TypeError: Cannot read property 'compilation' of undefined
      at DefinePlugin.apply ...\node_modules\webpack\lib
 \DefinePlugin.js:42:18)
 at Compiler.apply ( ...\node_modules\tapable\lib\Tapable.js:375:16)

I've searched online for a solution but couldn't find a similar issue. Thank you for your assistance.

Julien.

Answer №1

Encountered the same issue here. The solution I found was to ensure that all loaders were included in the devDependencies section and updated to their latest versions.

Please double-check these steps.

Answer №2

attempt this:

const webpackDefinePlugin = new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React: Using useState and useEffect to dynamically gather a real-time collection of 10 items

When I type a keystroke, I want to retrieve 10 usernames. Currently, I only get a username back if it exactly matches a username in the jsonplaceholder list. For example, if I type "Karia", nothing shows up until I type "Karianne". What I'm looking f ...

Angular - Binding not displaying the latest list elements

In my small application, I have two buttons that either add 1 or -1 to a list. The sum of the list is also displayed. However, I am facing an issue with the interpolation as only the default values of the list are being displayed instead of the newly adde ...

Using Angular 4 to populate a form and ensure it remains untouched

Designed an update form that is pre-populated with information. I am aiming for the button to be inactive until any changes are made within the form The form group utilizes valueChanges to detect when information has been modified However, even when I u ...

Recursive types in TypeScript allow for the definition of types that

Is there a way to implement the function below without utilizing any? Playground type MyType = { name: string, age: number, score: { prime: number, }, prize: { first: { discount: number } } } export const trim = ( myObj: ...

Tips for implementing debounce functionality in mui Autocomplete

How can I debounce the onInputChange function within the MyAutocomplete component? export interface AutocompleteProps<V extends FieldValues> { onInputChange: UseAutocompleteProps<UserOrEmail, true, false, false>['onInputChange']; } ...

Encountering Error ENOENT while running Gulp Build Task with SystemJS in Angular 4

UPDATE: 2020.02.13 - It seems like another individual encountered the same issue, but no solution was found. Check out Github for more details. An array of GulpJS errors is emerging when attempting to construct an Angular 4 Web App with SystemJS. The str ...

Creating a factory function through typhography

I have a dynamically generated list of functions that take an argument and return different values: actions: [ param => ({name: param, value: 2}), param => ({label: param, quantity: 4}), ] Now I am looking to create a function that will gen ...

How to eliminate the ng-component tag from an Angular 8 table row template

I currently have a dynamic table component with 2 modes: Normal table - functioning properly Custom Row Template - encountering issues due to Angular adding the <ng-component> tag The logic within the TableComponent is not the main concern, it&apo ...

Difficulty persisting when removing accents/diacritics from a string in Angular with IE 11

When attempting to utilize the String.normalize("NFD").replace(/[\u0300-\u036f]/g, "") method, I encountered an issue in IE11. ERROR TypeError: The object does not support the property or method "normalize" ...

What steps are involved in constructing Jodit from scratch?

Seeking a non-minified, readable version of Jodit, I attempted to build it myself. However, my lack of experience with composer, node, npm, webpack, TypeScript, and other tools has left me struggling. Is there anyone who can guide me through the process s ...

Difficulty encountered while setting up towerjs on an ubuntu operating system

Every time the towerjs post install script runs, I encounter this error: npm ERR! Error: EACCES, open '/home/claire/.npm/e18f6569-thub-com-viatropos-coffeecup-git.lock' I have attempted using sudo and -g options, but I suspect the issue lies in ...

How to create an Ion-select element with dynamic options in Ionic 2?

Currently, I am working on an application in Ionic 2 and I am facing a challenge with adding ion-select options dynamically. Below is the snippet of my code: <ion-select [(ngModel)]="classifications" (ngModelChange)="updateSelectedValue($event)"> & ...

"Uh-oh! Code: 0308010C. It seems the digital envelope routines are not supported. This could be a Node

Issue encountered while starting the development server... Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\Rohit&bs ...

Retrieving the data from a Material UI Slider control

I'm encountering an issue with retrieving the value property I assigned to a component. event.target.value is returning undefined. How can I successfully access the value of the component? My goal is for handlePlayersChange() to be able to handle dyn ...

Stopping Angular2 HTTP Requests - A Guide to Aborting or Cancelling Executing Requests

Currently, I am implementing an autocomplete feature for my search functionality. handleKeypress(searchValue){ // Code to make an AJAX request with the search value // .... } I am looking to cancel any previous HTTP requests each time a keypress ev ...

Is it feasible to link an Angular property value to the value of an HTML data attribute?

Can an Angular property value be bound to a data attribute on a template element? <h1 data-name="{{name}}">Hello from {{ name }}!</h1> Example Link After running the code, it results in the following error: Error in src/main.ts (11: ...

Is there a way to view the full Heroku log file?

I am facing an issue with my build in Heroku and I need to access the full log as indicated in the build: npm ERR! A complete log of this run can be found in: npm ERR! /app/.npm/_logs/****logname*****-debug.log Can anyone guide me on how to retrieve t ...

Convert an array with three dimensions into a two-dimensional array that includes tuples with two immutable string values

Consider the array below with multiple dimensions: type ParsedLine = [string, string]; type ParsedLines = [ParsedLine, ParsedLine] const myArray: (ParsedLine | ParsedLines)[] = [ ['something', 'somethingElse'], [['foo', & ...

What steps do I need to follow to start mongo-express without authentication enabled?

As stated in the official documentation for the web-based MongoDB admin interface mongo-express, the tool is initiated by executing cd YOUR_PATH/node_modules/mongo-express/ && node app.js However, this command does not appear to be effective. Wh ...

Setting a dynamic routerLink in Angular 2 based on a component's property-value

Recently, I developed a component with a <a> element and a routerLink property that I intended to set from the template in which the component is used. However, when attempting to do so, I encountered an error message stating 'Cannot read proper ...