Why does Rollup insist on treating my dependency's TypeScript code as if it were written in JavaScript?

I've included an example code snippet here: https://github.com/thejohnfreeman/bugs/commit/b4ff15a670691ada024589693d22f4fd0abae08d

The module called parent is primarily composed of type declarations written in TypeScript. The source entrypoint for TypeScript is pointed to by the types field in its package.json, while the compiled JavaScript entrypoint is specified in the main field. It utilizes a tsconfig.json file in its build process.

In contrast, the module named child depends on parent and is also authored in TypeScript. This module aims to create a bundle using Rollup and includes its own tsconfig.json.

Upon setup completion:

cd child
yarn

The following command functions correctly:

npx tsc --project tsconfig.json --outDir out --module esnext

The expected output is generated at out/index.js:

import parent from 'parent';
console.log(parent);

(Interestingly, the produced JavaScript matches the original TypeScript code.)

However, the command below does not yield the desired outcome:

npx rollup --config

An error message is displayed:

src/index.ts → dist/index.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
node_modules/parent/src/internal/index.ts (1:12)
1: import type Parent from './Parent'
               ^
2: declare const parent: Parent
3: export default parent
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (node_modules/rollup/dist/shared/rollup.js:5309:30)
    at Module.error (node_modules/rollup/dist/shared/rollup.js:9765:16)
    at Module.tryParse (node_modules/rollup/dist/shared/rollup.js:10169:25)
    at Module.setSource (node_modules/rollup/dist/shared/rollup.js:10068:24)
    at ModuleLoader.addModuleSource (node_modules/rollup/dist/shared/rollup.js:18451:20)
    at async ModuleLoader.fetchModule (node_modules/rollup/dist/shared/rollup.js:18507:9)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchStaticDependencies (node_modules/rollup/dist/shared/rollup.js:18533:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (node_modules/rollup/dist/shared/rollup.js:18509:9)

Suspicions arise that Rollup compiles the child module successfully to an ESNext module with the line import parent from 'parent'. However, instead of resolving this module specifier to the parent module's JavaScript, it resolves it to the TypeScript version containing invalid JavaScript (

import type Parent from './Parent'
). Is this the root cause? How can I resolve this issue?

typescriptes6-modulesrolluprollupjs

Answer №1

This appears to be a well-known and persistent issue with Rollup that has been discussed extensively on various platforms. I came across a workaround (shoutout to @frederikhors and @mike-hogan!) which involved making changes to the tsconfig.json file in the child directory by adding "node_modules/parent" to the include list. It's not a perfect solution as it requires manually including all TypeScript dependencies, but it did help me move forward without any blockers.

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

Why does my error handler log errors in the console instead of the response?

This is my first time asking a question here, so please forgive me if I make any mistakes. I am open to suggestions on how to improve my question-asking skills. I am facing an issue with my error handler not displaying the message in the response; instead ...

node.jstypescriptexpresserror-handling

Angular Error: Unable to access property 'users' on a null value

I am working on a component that takes in data through the @Input() decorator regarding a group. My objective is to generate a new array of objects during the initialization of the component based on the data from the group array. Below is the TypeScript c ...

angulartypescript

Troubleshooting a useContext error in Next.js with TypeScript

I've been working on an app using next.js for the frontend, and I encountered an issue while trying to stringify an object. Here's a snippet of the error message: Argument of type '{ auth: dataObject; }' is not assignable to parameter o ...

reactjstypescriptnext.js

How to fix the "Module parse failed" issue when importing MP3 files in NextJS 14 TypeScript?

Starting a new NextJS project, I used the command npx create-next-app@latest. Within this project, I created a simple TSX component that takes an imported MP3 file as a prop. 'use client'; import Image from "next/image"; import audioI ...

reactjstypescriptwebpacknext.jsmp3

Guidelines for implementing more rigorous type checks in TypeScript:

I am looking to enhance the code validation process and eliminate any implicit 'any' types. To achieve this, I have set "strict": true in my tsconfig.json. { "compilerOptions": { "target": "ES5", ...

typescriptvisual-studio-codetypescript-typings

Cannot send response headers once they have already been sent to the client [NEXTJS]

Currently, I am engrossed in a personal project focused on creating a dashboard using NextJS. This project serves as an opportunity for me to delve into learning NextJS and the fundamental concepts of TypeScript. My primary challenge at the moment revolves ...

node.jstypescriptnext.js

Node.js: Managing multiple occurrences of the same event name for testing purposes

When it comes to unit testing using mocha, I am looking for a way to set up an asynchronous queue for handling events. Previously, I used a once() Promise to wait for events like this: import EventEmitter from 'events' import { once } from ' ...

javascriptnode.jstypescriptmocha.js

Is there a method in typescript to guarantee that a function's return type covers all possibilities?

In the case of having a constant enum like: enum Color { RED, GREEN, BLUE, } A common approach is to create a helper function accompanied by a switch statement, as shown below: function assertNever(x: never): never { throw new Error(`Unexpecte ...

typescript

What is the best way to launch the Playwright browser in Jest using the setupFilesAfterEnv hook, to ensure accessibility within the test file while incorporating TypeScript?

When using Jest and Playwright, I encountered an issue where I wanted to launch the browser from setupFilesAfterEnv in order to avoid repeating the process in every test file. Despite successfully launching the browser and having global variables accessibl ...

typescriptjestjsplaywrightbabel-jest

Incorporating ng2-bootstrap into an Angular2 project with SystemJS starter template

I am attempting to integrate the ng2-bootstrap modal functionality into a component of my project that is built using the angular2-starter. Below is my systemjs.conf.js configuration: /* * This config is only used during development and build phase onl ...

angulartypescriptsystemjsng2-bootstrap

TestCafe has encountered an issue: "There are no tests available to run. This may be due to either the test files not containing any tests or the filter function being too

Attempting to run automated tests using TestCafe resulted in an error when executing the following command. testcafe chrome testc.ts The specified command was used to test the testc.ts file within my Angular application, with TestCafe installed globally ...

javascriptangulartypescriptautomated-teststestcafe

Sharing data between components in Angular 2 using the <router-outlet> technique

Having just started exploring Angular 2, I am eager to pass a boolean value from one component to another using <router-outlet> After some research, it seems like the best approach is to utilize a service. My aim is to toggle a boolean variable in ...

angulartypescriptangular2-services

Managing Modules at Runtime in Electron and Typescript: Best Practices to Ensure Smooth Operation

Creating an Electron application using Typescript has led to a specific project structure upon compilation: dist html index.html scripts ApplicationView.js ApplicationViewModel.js The index.html file includes the following script tag: <script ...

javascripttypescriptecmascript-6electron

Event for changing Ionic 2 page

Is there a way to execute code every time the page changes without adding an ngOnDestroy method to every page in Ionic 2? Instead of using Ionic 2 page lifecycle hooks like ionViewDidUnload, is there a simpler solution by adding a single method to the mai ...

angulartypescriptionic-frameworkionic2ionic3

What is the best way for a parent process to interrupt a child_process using a command?

I'm currently in the process of working on a project that involves having the user click on an 'execute' button to trigger a child_process running in the backend to handle a time-consuming task. The code snippet for this operation is shown b ...

javascriptnode.jstypescriptchild-process

Version 1.9.3 of Redux Toolkit is encountering an error stating that the 'push' property is not found on the type 'WritableDraft<CartState>'

Currently delving into Redux Toolkit using TypeScript and facing a roadblock that seems deceptively simple. Unfortunately, my current knowledge isn't enough to unravel this puzzle and I'm in need of some guidance. The issue arises with an error ...

typescriptreduxtoolkit

Vue3 and Typescript issue: The property '$el' is not recognized on type 'void'. What is the correct way to access every existing tag type in the DOM?

Currently, I am in the process of migrating a Vue2 project to Vue3 and Typescript. While encountering several unusual errors, one particular issue with $el has me puzzled. I have been attempting to target every <g> tag within the provided template, ...

typescriptvue.jsvuejs3

Creating an object with mapped properties from enumeration values using Typescript

I am trying to find a way to automatically create an object with values computed during compilation using enumeration values and pre-defined function calls. The basic concept is to associate certain arguments of a function with keys. For example, consider ...

typescript

Tips on inserting a variable into an icon class in Angular 7

I am looking to add a unique icon to each item on my page, which is being generated inside of an *ngfor loop. For example: <i class="var"></i> Instead of 'var', I want to dynamically insert a variable provided by my service class in ...

angulartypescriptvariablestagsicons

What is the process for changing the name of an element in Angular 2?

I'm feeling a bit lost here ... I need to implement the feature that allows users to edit the name of an element by simply clicking on a button. These elements are all stored in the Storage system. How can I achieve this in my current setup? File: ho ...

angulartypescriptionic2storage