I'm having trouble with my Angular app's TypeScript script unable to locate the modules within the node_modules directory

I am using an Angular app and need to include a script in my package.json.

The script is written in Typescript and can be found at src/scripts/generate-blog-metadata.ts.

const { promisify } = require('util');
const { resolve, join } = require('path');
const {fs} = require('fs');
const readdir = promisify(fs.readdir);
const stat = promisify(fs.stat);

This is what my package.json looks like:

  "scripts": {
    "generate-blog-metadata" : "node src/scripts/generate-blog-metadata.ts"
  },

However, when I try to run the script using:

npm run generate-blog-metadata

I encounter an error:

/Users/pom/workspace/signalement-app/src/scripts/generate-blog-metadata.ts:6
const readdir = promisify(fs.readdir);
                             ^

TypeError: Cannot read property 'readdir' of undefined
    at Object.<anonymous> (/Users/john/workspace/signalement-app/src/scripts/generate-blog-metadata.js:6:30)

It seems like my script is unable to locate the node_modules directory.

This issue might be related to a webpack configuration problem. Here is my webpack config file:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    server: './server.ts',
  },
  target: 'node',
  resolve: {extensions: ['.ts', '.js']},
  externals: [/(node_modules|main\..*\.js)/,],
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {test: /\.ts$/, loader: 'ts-loader'}
    ]
  },
  optimization: {
    minimize: false
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
}

Answer №1

My suggestion is to update the generate-blog-metadata.js file to generate-blog-metadata.ts

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

ng2-map - Double click to trigger two separate events

Currently, I am utilizing ng2-map to showcase a Google map in Angular 2. I have implemented the click event to capture any clicks made on the map. However, it seems that each click is generating two events rather than just one: 1) _.nk {latLng: _.F, pixel ...

What is the process for adding various font weights in styled-components?

Hey there, I'm looking to incorporate different font weights of the Inter font (400, 500, 700) into my project. Currently, it's only loading the Inter regular font. I'm working with create-react-app, TypeScript, and styled-components. Here& ...

Exploring a specified set of numbers with PrimeNG's input number spinner for looping

Is there a way to iterate through a series of numbers, such as from 0 to 10, using the PrimeNG input number spinner? ...

What distinguishes the httpclient implementation in Flutter from that in Angular?

As I delve into developing a website using the Angular framework, I find myself in a perplexing situation that sparks curiosity within me. Just like most websites and applications in 2020, users have the option to log in to their accounts to access person ...

Exploring the integration of LeafLet into Next JS 13 for interactive mapping

I'm currently working on integrating a LeafLet map component into my Next JS 13.0.1 project, but I'm facing an issue with the rendering of the map component. Upon the initial loading of the map component, I encountered this error: ReferenceError ...

When using Angular and Express together, the session is not continuous as each new request generates a fresh session

Unique Question I have encountered an issue with passport.js while trying to implement authentication in my express application. When I use req.flash('message', 'message content') within a passport strategy, the flashed information see ...

What is the best way to find a specific string within an array of strings?

I have a list of tasks as strings: todo=[ 'Get up', 'Brush my teeth', 'Go to work', 'Play games' ]; I am attempting to compare it with this: Template: <input (input)="checkArrays($event)" /> In my ...

Leveraging MatSort from Angular Material

In my customer.component.ts file, I have the following code: import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { NorthwindService } from 'swagger'; import {LiveAnnouncer} from '@angular/cdk/a11y&ap ...

Creating a dynamic web application using Asp .NET Web Api, MVC, and Angular 2, integrating an action that

Working on an ASP .NET MVC application integrated with Angular 2, I encountered a problem when trying to communicate from the angular service to a WebApi Controller. The issue arises when attempting to access an action within the WebApi Controller that req ...

Angular Express Route Guide

I've encountered an issue with my express angular app. When I am on a specific URL like http://localhost:4007/login and refresh the page, I keep getting an error. I've tried multiple solutions to fix it, but nothing seems to work. Here is a snip ...

Any tips on silencing webpack's constant nagging about the "Critical dependency: require function is used in a way..." warning message?

My immediate goal is to resolve this warning. However, it seems that a different approach may be necessary. I have developed an npm library for date/time functions with most of the code being general-purpose and compatible with both Node.js and web browse ...

Is there a more effective way to implement a Custom Validator using .forEach?

I have developed my own validation class as a learning exercise. Do you think this is an effective approach, or do you have suggestions for improvement? import { AbstractControl } from '@angular/forms'; export class ProjectNameValidator { pr ...

Plugin for managing network connectivity in Ionic framework

In order to check if internet and id connection are available, I need to make a server request. I have implemented the Ionic Native Network Plugin following their official documentation. Here is my code snippet: import { Component } from '@angular/c ...

Error: Reference to an undeclared variable cannot be accessed. TypeScript, Cordova, iOS platforms

Can anyone offer some advice on what might be the issue? I'm encountering an error while building my Ionic app on the IOS platform, but everything is running smoothly on Android. ReferenceError: Cannot access uninitialized variable. service.ts:31 O ...

Encountering a 404 error with an Angular 2 application deployed on Amazon S3

After successfully deploying my Angular2 application on Amazon S3, I noticed that all routing functions properly when navigating using routeLinks/code. However, the problem arises when I refresh the page or try to access a particular route directly - a 40 ...

Supabase encounters various errors during operation

I am encountering some issues while using supabase with TypeScript. Interestingly, I can see the errors in WebStorm, but not in VSCode. Can you provide any assistance? supabase .channel('custom-all-channel') .on( 'postgre ...

Struggling with transitioning from TypeScript to React when implementing react-data-grid 7.0.0

I'm trying to add drag and drop functionality to my React project using react-data-grid, but I keep encountering a "TypeError: Object(...) is not a function" error. I have a TypeScript version of the file in the sandbox as a reference, but when I try ...

What is the process for incorporating a personalized inputComponent JSX <input /> into a react-phone-number-input PhoneInput component?

Instructions to follow when working with code. react-phone-number-input provides the option for users to replace its default <input /> JSX tag with a custom one, requiring the type React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTML ...

Having trouble with updating operations in MEAN stack CRUD functionalities

While implementing CRUD operations, I encountered an issue with the update function. Even though I followed a tutorial (https://www.youtube.com/watch?v=fhRdqbEXp9Y) and customized the code to suit my application, the update operation is not working as expe ...

Obtaining a bearer token from Auth0 in an Angular application involves a few

Can someone guide me on obtaining the Auth0 bearer token in Angular when using the Auth0 SDK and AuthModule? @Injectable() export class TokenInterceptor implements HttpInterceptor { constructor(public auth: AuthService) {} intercept(request: HttpRequ ...