Rollup is encountering challenges with handling dependencies that are TypeScript files, resulting in an error being thrown: "Unexpected token."

Check out this GitHub repository for a sample project that showcases the issue.

Here is the content of my package.json:

{
  "name": "rollup-ts-deps",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mike Hogan",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-typescript": "^8.2.0",
    "rollup": "^2.41.0",
    "typescript": "^4.2.3"
  },
  "dependencies": {
    "@http4t/core": "0.0.121"
  }
}

Additionally, here's the content of the rollup.config.js file:

import typescript from '@rollup/plugin-typescript';

export default {
    input: 'src/index.ts',
    output: {
        file: 'lib/index.js',
        format: 'cjs'
    },
    plugins: [
        typescript()
    ]
};

The src/index.ts file contains the following code snippet:

import {post} from "@http4t/core/requests";

console.log(post)

Executing npx rollup -c results in the error message below:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
node_modules/@http4t/core/requests.ts (5:30)
3: import {Authority, Uri, UriLike} from "./uri";
4: 
5: export function request(method: Method, uri: UriLike, body?: HttpBody, ...headers: Header[]): HttpRequest {

I'm looking for guidance on configuring Rollup to handle dependencies that are Typescript files. Any suggestions?

Answer №1

This recent commit showcases the solution to the problem.

To resolve the issue, I made updates to the tsconfig.json configuration file:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist/esm",
    "declaration": true,
    "moduleResolution": "node"
  },
  "include": [
    "./src",
    "node_modules/@http4t"
  ]
}

The crucial step was adding node_modules/@http4t as a source directory in the configuration.

frederikhors brought insights by commenting on this specific thread.

Answer №2

After spending countless hours searching for a solution, I finally discovered that the issue was simply due to the order of plugins. 😔

The key is to utilize @rollup/plugin-node-resolve to import third-party modules from node_modules. While I thought I had already implemented this, the problem actually stemmed from the TypeScript plugin being positioned incorrectly in my configuration. By rearranging the order as shown below, I was able to resolve the issue successfully:

// rollup.config.js
import nodeResolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';

export default {
    // ...
    plugins: [
        nodeResolve(), // ensure this comes before the typescript plugin!
        typescript(),
    ]
};

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

I'm confused why this particular method within a class is not being inherited by the next class. Rather than seeing the expected extension, I am presented with - [Function (

Working fine with the Person class, the register() function displays the correct return statement when logged in the console. However, upon extending it to the Employee class, instead of the expected return statement, the console logs show [Function (anon ...

Error encountered while utilizing JSON data in Ionic 2

Can someone help me with avoiding errors in TypeScript when filtering a specific variable in JSON data? Here is an example of part of my JSON data: Containing multimedia details: "per_facet": [], "geo_facet": [], "multimedia": [ { "url": "https://stat ...

Angular2 Eclipse: Eclipse Oxygen's HTML editor detects TypeScript errors in real-time

After installing the Eclipse Oxygen plugin for Angular2, I created a project using the Angular CLI and opened it in Eclipse. However, when trying to convert the project to an Angular project, I couldn't find the option under configuration. Instead, th ...

Displaying a horizontal scroll bar for legends in ECharts can be achieved by limiting the legend to three lines. If the legend items exceed this limit, they will scroll horizontally to accommodate all items

I am currently utilizing ECharts to display trend data in a line chart format. With 50 different series to showcase, each series comes with its own legend. My objective is to arrange the legends at the top of the chart, while limiting them to a maximum of ...

Error encountered when retrieving WordPress posts through GraphQL in Next.js due to an invalid `<Link>` containing a `<a>` child element

While integrating Wordpress posts into my Next.js application using the repository "https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress", I encountered the error message: "Error: Invalid with child. Please remove or use ." https://i.ss ...

Angular 7 - A collection of Observables containing arrays of nested Observables for a specific Object

Currently, I am facing an issue with displaying articles on my main page from an array in my article-service class. The requirement is to display the articles in groups of three per row. To achieve this, I have created an array of arrays containing three a ...

Guide on Combine Multiple Observables/Subscriptions into a Nest

1. A Puzzle to Solve I am faced with the challenge of implementing a dynamic language change flow for my blog. Here is an overview of how I envision it: The user initiates a language change by clicking a button that triggers an event (Subject). This eve ...

Dealing with request errors in Angular with RxJS - catchError() isn't as effective as expected

Update Alert: Problem Solved. Solution Provided Below In my service class, I have the following code snippet: public getListById(id:string): Observable<any[]> { return this.http.get<any[]>(`${BASE_URL.local}/${id}`).pipe( m ...

Issue with exclude not functioning in tsconfig.json for Angular Typescript deployment

I am encountering an issue with a module within the node_modules directory while compiling my Angular 4 project. The error messages I'm receiving are as follows, even after attempting to exclude the problematic module in the tsconfig.json file. Can an ...

How to identify and handle the invalid control within an Angular(v2 onwards) reactive form Form Array

When this.from.valid returns false, I utilize the following approach to identify the first invalid control and handle the error in my component. While this method works well for form groups without any form array, is there a way to identify the first inval ...

Encountering an error with an unexpected token while attempting to type a function with destructuring assignment parameters in Create-React

I am currently in the process of defining the type for a function where the parameters utilize the destructuring assignment syntax like this: type somefunc = ({name} : {name: string}) => boolean; An error is popping up during compilation: ./src/App ...

Configuring the tsconfig outDir will specify where the output files will be stored

What am I missing in the tsconfig settings if I only want to output files in the root directory? If I set it as "rootDir":"src" "outDir":"build", or "rootDir":"src" "outDir":"&q ...

Managing the accumulation of response chunks in a streaming request with Axios

I have a proxy server that needs to make a request to an external API server to synthesize a voice from some text. According to the API docs, I will first receive a response with headers and then stream binary data, as the response body contains 'Tran ...

What is the best approach to organize data from an observable based on a nested key?

I'm currently developing a new application and struggling with grouping data. The data is being pulled from an observable, and I need to group objects by their status and push them into an array. I attempted to use the groupBy() method, but unfortunat ...

Does the inclusion of a d.ts file in a JavaScript npm package constitute a breaking change according to SemVer guidelines?

Is adding a d.ts type declaration file and a new "types" property in the package.json of a JavaScript npm package considered a breaking change? Would it require a major version bump according to SemVer? This situation could go either way. It doesn't ...

Tips for utilizing buttons with the antd framework in Visual Studio Code

When using the Button and Input components from antd in vscode, I encountered an error specifically with the Button component and I am curious to understand why it is happening. Interestingly, when I tried using the Input component, it did not show any er ...

What are common pitfalls to avoid when modifying state with createSlice in Redux-Toolkit?

I am currently working with the createSlice function, specifically with the reducer setCustomEquipment that updates the state. My question is whether the = method is an acceptable way to update the state when using createSlice, or if I should always use ...

The name 'Queue' cannot be located in Typescript, error code ts(2304)

I'm currently trying to create a private variable of type InnerItem, but I keep encountering the following error: Error: Cannot find name 'Queue'.ts(2304) private savedItems: Queue<InnerItem> = new Queue<InnerItem>(20); Could ...

Having trouble getting my specialized pipe (filter) to function properly in Angular 2

I have implemented a custom pipe for filtering data in my table. Oddly, when I enter a search string into the input box, it correctly prints 'found' in the console but no rows are displayed in the table. However, if I remove the pipe altogether, ...

A series of OR interfaces in TypeScript Interface

Imagine a scenario where there is a choice between multiple interfaces interface a {x:string} interface b {y:string} interface c {z:string} type all = a | b | c Now, consider an object fulfilling all by being of type c When you try to access the propert ...