getting TypeScript configured with webpack

I am currently using Typescript to develop a back-end API utilizing graphql and express. To manage the project development and building process, I have implemented webpack.

As part of my setup, I am employing raw-loader in order to load graphql schemas and sql queries from external files as strings.

However, at this moment, I am encountering some challenges that are proving tricky for me to comprehend fully.

Below are snippets from my webpack configuration file (webpack.config.js):

const path = require('path');

module.exports = {
  target: 'node',
  entry: {
    server: path.resolve(__dirname, 'server.ts'),
  },
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(gql|sql)$/,
        loader: 'raw-loader',
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  watch: {
    ignored: /node_modues/,
  },
};

In addition, here is a snippet from my server file (server.ts) showing how I am setting up the Express server with graphql:

import express from 'express';
import morgan from 'morgan';
import bodyParser from 'body-parser';
import graphqlHTTP from 'express-graphql';

import { affairSchema } from './src/schemas';
import affairRoot from './src/resolvers/affairs';

// Server setup code goes here...

app.listen(port, () => console.log('Server waiting on ', port));

The errors I am currently facing include:

ERROR in ./node_modules/graphql/index.mjs
88:0-148:42 Can't reexport the named export 'typeFromAST' from non EcmaScript module (only default export is available)
 @ ./node_modules/graphql/index.mjs
 @ ./src/schemas/index.ts
 @ ./server.ts

(Additional error messages continue...)

Answer №1

Eliminate bundling of node modules by utilizing webpack-node-externals. This approach can effectively resolve errors, although it necessitates the presence of node_modules during application execution.

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

Extending Mongoose's capabilities with header files for the "plugin" feature, utilizing the .methods and .statics methods

My task is to develop Typescript header files for a script that enhances my Mongoose model using the .plugin method. The current signature in the Mongoose header files looks like this: export class Schema { // ... plugin(plugin: (schema: Schema, opt ...

Node.js not receiving expected Ajax response

Why is my Ajax request not receiving the proper response? It always shows readyState '4' with a response status of '0'. What could be causing this issue? Client-Side Code: var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = f ...

Best practices for using spaces in Node.js within WebStorm conventions

After researching, I discovered that the convention in Node.js is to use double spaces for indentation. However, by default, it uses 4 spaces. How can this be configured? Here's an example: if ('development' == app.get('env')) { ...

Adjusting image dynamically based on conditions

I need to dynamically display images on my HTML based on specific conditions using TypeScript. In my TypeScript file: styleArray = ["Solitary", "Visual","Auditory","Logical","Physical","Social","Verbal",]; constructor(){ for (var i = 0; this.sty ...

Error message from OpenAI GPT-3 API: "openai.completions function not found"

I encountered an issue while trying to execute the test code from a tutorial on building a chat app with GPT-3, ReactJS, and Next.js. The error message I received was: TypeError: openai.completions is not a function This occurred when running the follow ...

Retrieve the variance between two arrays and store the additions in AddedList and the removals in RemovedList using typescript

I am still getting the hang of Typescript and I am trying to figure out the best solution for my issue. I have two arrays, A and B, and I need to identify the difference between them in relation to array A. The goal is to separate the elements that were ad ...

Ways to verify the presence of users in the Database

I have successfully retrieved the data with the code below, but I am encountering issues with my script's if and else statements. Any tips or advice on how to improve this functionality? server.post('/like', (req, res,next) => { var ...

Unable to load Node's native addons using webpack

While the example code utilizes vue-cli to generate a webpack config, it's important to note that nothing in the process is specific to Vue. To create the example app, I used this command: vue init webpack webpack_modules_example This command gener ...

Tips for displaying bar chart labels effectively with ChartJS

I am working on an Angular project and I would like to incorporate a barchart using ChartJS. The data for this chart can vary in size, sometimes being very large. One issue I have encountered is that when the number of data points is large, the labels ove ...

Utilizing String.Format in TypeScript similar to C# syntax

Is there a way to achieve similar functionality to String.Format in C# using TypeScript? I'm thinking of creating a string like this: url = "path/{0}/{1}/data.xml" where I can substitute {0} and {1} based on the logic. While I can manually replace ...

Using Typescript in the browser with Babel and Webpack: Step-by-Step Guide

I've been exploring the use of Typescript in my browser with a specific architecture: Typescript in browser architecture However, I'm facing an issue with the import/export functionality when running this command: tsc && babel build-ts -d lib && ...

Vue's computed property utilizing typed variables

I am trying to create a computed array of type Todo[], but I keep encountering this specific error: No overload matches this call. Overload 1 of 2, '(getter: ComputedGetter<Todo[]>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T ...

Launching a Node.js Express application on Heroku

I'm facing an issue while trying to deploy my app on Heroku, as I keep encountering the following error: 2022-08-11T12:49:12.131468+00:00 app[web.1]: Error: connect ECONNREFUSED 127.0.0.1:3306 2022-08-11T12:49:12.131469+00:00 app[web.1]: at TCPConnect ...

Solving the error message "Cannot find module '@angular/router/src/utils/collection' or its corresponding type declaration"

How do I troubleshoot this Error: src/app/metronic/orderByLocation/locationsByOneOrder/locationsByOneOrder.component.ts:7:25 - error TS2307: Cannot find module '@angular/router/src/utils/collection' or its corresponding type declarations.m 7 imp ...

Steps for reinstalling TypeScript

I had installed TypeScript through npm a while back Initially, it was working fine but turned out to be outdated Trying to upgrade it with npm ended up breaking everything. Is there any way to do a fresh installation? Here are the steps I took: Philip Sm ...

Is it possible in Angular to directly bind the emitted output of a component to a property?

My primary application component communicates with its sub components using @Output decorated properties on the subcomponent. The output properties utilize an EventEmitter<>(). Typically, these properties emit a simple boolean or number. I want to di ...

Next.js Troubleshooting: Unexpected Issue with 'use client' Triggering Error in React Client Component

Keeping it simple, here is a useState function that I am using: 'use client' import {useState} from 'react'; const Home = () => { const [fruit, setFruit] = useState('apple'); return ( & ...

The data structure '{ variableName: string; }' cannot be directly assigned to a variable of type 'string'

When I see this error, it seems to make perfect sense based on what I am reading. However, the reason why I am getting it is still unclear to me. In the following example, myOtherVariable is a string and variableName should be too... Or at least that&apos ...

Displaying the information fetched using axios on the screen using node.js

Is there a way to display the information from the input boxes in the image on the screen using node js? ...

Encountering issues retrieving form data within a particular route on express.js 4.x

I am encountering an issue where I cannot retrieve the form data in a specific route, even though I can successfully console.log it in my main app.js file. However, when trying to access the data in the route, I receive an undefined field error. I have ex ...