The module parsing encountered an error: the usage of 'import' and 'export' is restricted to 'sourceType: module' only (line 3, character 0)

I've been encountering an issue with building a Nextjs application since yesterday without making any changes at this level. Even after reverting the changes, the error persists.

Is there anyone who can assist me with this problem?


./node_modules/typeorm/browser/index.js
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (3:0)
You may need an appropriate loader to handle this file type, as currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders  
| /*!
|  */
> import "reflect-metadata";
| // -------------------------------------------------------------------------
| // Commonly Used exports

Import trace for requested module:
./node_modules/typeorm/index.mjs

This is my package.json:

  • Although I have some babel dependencies, I don't have a .babelrc file configured. It was used for loader testing as the error message suggests, but it didn't resolve the issue.
{
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "test": "jest --setupFiles=dotenv/config",
    "lint": "eslint pages --ext .ts,.tsx"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "version": "0.0.0"
}

This is my tsconfig.json:

{
    "compilerOptions": {
      ...
    },
    "include": [
      ...
    ],
    "exclude": [
      ...
    ]
}

Additionally, I am importing typeorm, not typeorm/browser as depicted below:

import { User } from '@/entities/User'
import 'reflect-metadata'
import { Connection, createConnection } from 'typeorm'

export async function initializeDatabase () {
  return new Promise<Connection>((resolve, reject) => {
    createConnection({
      ...
    }).then(connection => {
      ...
    }).catch(error => {
      ...
    })
  })
}

Answer №1

An error within Typeorm has surfaced, relating to the handling of imports through Webpack.

You can find more details about this problem in this thread

To address this issue, a fix has been implemented in the latest commit: https://github.com/typeorm/typeorm/pull/8688

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

An error persists in PhpStorm inspection regarding the absence of AppComponent declaration in an Angular module

After creating a new Angular application, I am encountering the issue of getting the error message "X is not declared in any Angular module" on every component, including the automatically generated AppComponent. Despite having the latest version of the An ...

How to show an Info Window on multiple coordinates using an arcgis map in a Next JS application

Here is my latest JS code for showcasing a basic ArcGIS map with markers located at specific coordinates. Could someone please advise me on how to implement popups/Info windows for the markers on the map? For example, when I click on a marker, it should d ...

Exploring nested arrays of objects and applying value constraints

Is there a way to iterate through an array and display only 5 items at once, with the option to call a function on click that will add another 20 items? I have an object structured like this: let someObject = [ { data: [ { id: 123, ...

Exploring TypeScript's Conditional Types

Consider this scenario: type TypeMapping = { Boolean: boolean, String: string, Number: number, ArrayOfString: Array<string>, ArrayOfBoolean: Array<boolean> } export interface ElemType { foo: keyof TypeMapping, default: valueof T ...

Utilizing NextJs state for interactive headers

How can I create dynamic headers using state in NextJs? When I view the page source, my values appear to be blank. It seems that my state may not be resolved before the render method fires. Strangely, the rest of my content loads without any issues except ...

Avoiding data type conversion in JavaScript/TypeScript

Currently delving into the world of JavaScript, I come from a background of working with statically typed languages. Naturally, I opted to dive into TypeScript instead of starting directly with JS. While TypeScript is great and addresses many issues presen ...

React.js: You cannot call this expression. The type 'never' does not have any call signatures

Could someone help me troubleshoot the error I'm encountering with useStyles? It seems to be related to Typescript. Here's the line causing the issue: const classes = useStyles(); import React from "react"; import { makeStyles } from & ...

ts1109: An error occurred as there was an expectation for an angular

I am encountering an error while creating a simple form with Angular using a reactive form. I'm puzzled as to why it's indicating that something is missing: Although I have created forms numerous times before, this is the first instance of such ...

Developing an exportable value service type in TypeScript for AngularJS

I have been working on creating a valuable service using typescript that involves a basic switch case statement based on values from the collection provided below [{ book_id: 1, year_published: 2000 }, { book_id: 2, year_publish ...

Having trouble obtaining React 15.6.1 type definitions: "ERROR: Repository not found."

Trying to set up the type definitions for React 15.6.1, but encountering an error: $ npm install --save @types/react npm ERR! git clone <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88efe1fcc8efe1fce0fdeaa6ebe7e5">[email&# ...

Encountering a "Cannot GET /" error message

We are currently utilizing Next.js/React.js for our front-end, along with a server.js file that facilitates image uploads to the public/images/uploads directory. However, we are encountering an error message stating Cannot GET / when attempting to run the ...

JavaScript cannot determine the length of an array of objects

I'm encountering an issue with an array of objects named tagTagfilter. When I log it in the browser, it doesn't immediately show the correct length value inside. tagTagFilter: TagFilter = { filterName: 'Tag', tags: [] ...

Seeking assistance with managing Yarn workspaces

My current project involves working on a React Native application for a client. After I had already written a significant amount of code, my client requested a new feature to be added. This feature should have been simple to implement, but due to the compl ...

Tips for transferring a value from a Next.js route to a physical component

So, I encountered some issues while creating a Next.js project related to the database. To solve this problem, I connected to Vercel's hosted database. After successfully inserting and selecting data into the database using routes, I wanted to enhance ...

Issue with triggering angular function multiple times in certain conditions

Issue: Experiencing difficulties with Angular directive as it is being called multiple times, resulting in incorrect transaction outcomes and multiple entries on the Console screen. Desired Outcome: Ensure that the function executes only once. Sample cod ...

Communication lines have been established with MongoDB

In the process of developing a project utilizing NextJS and storing data with MongoDB, I am encountering issues related to MongoDB connections. The connection flow is rather straightforward: User connects to a page Page makes an API call to retrieve page ...

"Perform an upsert operation with TypeORM to create a new entry if it

Is there a built-in feature in TypeORM to handle this scenario efficiently? let contraption = await thingRepository.findOne({ name : "Contraption" }); if(!contraption) // Create if not exist { let newThing = new Thing(); newThing.name = "Contrapt ...

Tips for ensuring only one property is present in a Typescript interface

Consider the React component interface below: export interface MyInterface { name: string; isEasy?: boolean; isMedium?: boolean; isHard?: boolean; } This component must accept only one property from isEasy, isMedium, or isHard For example: <M ...

Retrieve user details from a NextJS application following a successful Keycloak authentication on a Kubernetes cluster

I've been attempting to retrieve the authenticated user information in my NextJS app after being redirected to it following a successful Keycloak login on a different tab located at localhost:8080/auth. The ingress (entry point) is responsible for ch ...

Ways to retrieve a variable from a separate TypeScript document

A scenario arises where a TypeScript script contains a variable called enlightenFilters$: import { Component, Input, OnInit } from "@angular/core"; import { ConfigType, LisaConfig } from "app/enrichment/models/lisa/configuration.model"; ...