plugins: Typescript plugin 4.0.0 Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Quick fix for now is to manually set your rootDir compiler option to “src”.

@talentlessguy I resolved this problem by removing outDir, declarationDir, declaration from tsconfig.json. If you need them when you invoke tsc, specify them using command line arguments.

Thanks for opening an issue. Citing the issue template:

Issues without minimal reproductions will be closed! Please provide one by:

1. Using the REPL.it plugin reproduction template at https://repl.it/@rollup/rollup-plugin-repro
2. Provide a minimal repository link (Read https://git.io/fNzHA for instructions). These may take more time to triage than the other options.
3. Using the REPL at https://rollupjs.org/repl/

Please add a reproduction and we’ll be happy to triage further.

It is very strange that the official plugin cannot be fixed for a long time. In fact, it is not doing the work it should be doing. It is virtually impossible to use rollup to build an application written in vue.

@wellrus that’s not a constructive comment and it doesn’t add anything to triaging the issue at hand. I recommend that you read https://liberamanifesto.com, and consider your view of open source.

You might also consider being a part of the solution and contributing a fix. Rollup and its plugins are community supported.

Please refrain from additional replies that are not constructive or helpful to the original issue.

Replies that do not help to triage or resolve the issue with the plugin in this repo will be removed. Suggesting alternatives does not assist with the triage of the original issue reported.

@sssylvan I’ getting this error:

Error: @rollup/plugin-typescript: 'dir' must be used when 'outDir' is specified.

I have the same error and made a small project to reproduce the error (see this project)

I have a case when I need to generate typings, so it won’t work probably

I run tsc separately to generate typings. i.e. in my package.json

{
   ...
   "scripts": {
        "build": "tsc --outDir dist/lib --declarationDir dist/types --declaration true && rollup -c",
        "prepare": "npm run build"
    }
}

Adding the "rootDir": "src" node to my tsconfig solved the problem for me, just as @sssylvan suggested. That was the only change I needed.

I fixed this by deleting /dist folder before running rollup.

[EDIT] Even better, seems like if I remove just .tsbuildinfo before running rollup this error never happen.

I use ver 5.0.0. None of the given solutions worked for me except this https://github.com/rollup/plugins/issues/287#issuecomment-611368317 and this https://github.com/rollup/plugins/issues/287#issuecomment-611621543.

I removed declaration from tsconfig and added manually generated it after building with rollup.

    "build": "rollup -c && tsc -d --emitDeclarationOnly --declarationDir build/types",

Woohoo! It looks like this bug is getting fixed already! https://github.com/microsoft/TypeScript/pull/41811

I’m using a shared folder as common source for several typescript projects (monorepo style). I’ve had the same error message: [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

After debugging the source I’ve found that the load(id) function filters out my ../shared/src/foo.ts file from transpilation.

This is because getPluginOptions creates a default file filter for files in the current folder (cwd) only.

As a solution I configure the plugin with a suiting include configuration:

  plugins: [
    typescript({
      include: ['../**/src/**/*.ts'],
    }),
  ],

In tsconfig.json I also had to add the shared sources in the include section:

  "include": [
    "src/**/*",
    "../shared/src/**/*"
  ]

I hope this description can help to others having similar problem.

I also see as a possible improvement to respect the paths in tsconfig’s include (instead using the default ['*.ts+(|x)', '**/*.ts+(|x)']).

This description could be maybe added to the README.md?

I thought I had the same issue - maybe it is related.

I have a monorepo like this:

/projects/A/src/A.ts
/projects/A/rollup.config.js

/projects/B/src/B.ts

/projects/shared/src/somemod.ts

// somemod.ts
export const theAnswer: number = 42;

// A.ts
import {theAnswer} from "../../shared/src/somemod";
console.log(theAnswer);

When I run the build in /projects/A/, the build failes with the described error. Once I added ../shared/**/*.ts to my include list, it worked.

I switched back to @rollup/plugin-typescript version 3.1.1. In this version I don’t have the problems. I use tsc to make the declarations.

Seems like rollup is not capable of handling case insensitivity of the working directory on windows, specifically the drive letter:

c:\tfs\...\...Lib>npm run build
> tsc --version && npm --version && node --version && rollup --version && eslint src/** --ext .ts && rimraf build && rollup -c
Version 3.9.7
6.14.4
v12.18.0
rollup v2.33.1

src/index.ts → build/bundle.js...

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src\components\ComponentBase.ts (4:7)
2: import { STATE_MACHINE as stateMachine } from '../StateMachine';
3:
4: export abstract class ComponentBase extends HTMLElement {
          ^
5:   private _isRendered: boolean;
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (c:\tfs\...Lib\node_modules\rollup\dist\shared\rollup.js:5252:30)
    at Module.error (c:\tfs\...Lib\node_modules\rollup\dist\shared\rollup.js:9811:16)
    at tryParse (c:\tfs\...Lib\node_modules\rollup\dist\shared\rollup.js:9692:23)
    at Module.setSource (c:\tfs\...Lib\node_modules\rollup\dist\shared\rollup.js:10118:19)
    at ModuleLoader.addModuleSource (c:\tfs\...Lib\node_modules\rollup\dist\shared\rollup.js:18279:20)
    at ModuleLoader.fetchModule (c:\tfs\...Lib\node_modules\rollup\dist\shared\rollup.js:18335:9)
    at async Promise.all (index 5)
    at ModuleLoader.fetchStaticDependencies (c:\tfs\...Lib\node_modules\rollup\dist\shared\rollup.js:18360:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (c:\tfs\...Lib\node_modules\rollup\dist\shared\rollup.js:18337:9)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! web.mobile-web-component-lib@0.0.0 build: `tsc --version && npm --version && node --version && rollup --version && eslint src/** --ext .ts && rimraf build && rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the web.mobile-web-component-lib@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Same build, nothing changed except one thing: We now have a capital C: in our working dir:

c:\tfs\...Lib>cd C:\tfs\...Lib

c:\tfs\...Lib>U:

U:\>C:

C:\tfs\...Lib>npm run build

> tsc --version && npm --version && node --version && rollup --version && eslint src/** --ext .ts && rimraf build && rollup -c

Version 3.9.7
6.14.4
v12.18.0
rollup v2.33.1

src/index.ts → build/bundle.js...
created build/bundle.js in 3.3s

Please get this fixed. We could reproduce this behaviour on 15 machines now.

The fix has been merged in TypeScript and should be released with TypeScript 4.2.0. We can leave this open until then to track and make sure that we can enable the failing test when 4.2.0 is released

I’ll be taking another look at this next month, been busy with work over the summer. I think the solution lies in finding a better way to determine the output paths, as ts.getOutputFileNames is sometimes inaccurate.

@talentlessguy I resolved this problem by removing outDir, declarationDir, declaration from tsconfig.json. If you need them when you invoke tsc, specify them using command line arguments.

I have a case when I need to generate typings, so it won’t work probably

@NIX-Pepe we’ll welcome your contribution and look forward to your pull request to fix this.

I have the same error and made a small project to reproduce the error (see this project)

Some leads for you:

Setting rootDir": “./src”, in tsconfig And changing to dir in rollup.config.js output: { dir: “dist”, solves it and creates both output and declaration. removing outDir and setting declaration:false in tsconfig also solves it without removing the single out file from rollup.

I just want to say that the above solution did not work in my case. Updating the include option for the plugin doesn’t seem to fix the issue in my repos, nor does it fix the issue in the reproduction repo from https://github.com/rollup/plugins/issues/287#issuecomment-605909100.

@shellscape This is a bug and as such it deserves your attention, It’s THE most upvoted issue in the history of this repo.

PSA: “me too” replies that don’t contain diagnostic info or info to assist in triage will be removed from the issue

Works on my machine with typescript 4.2.0-beta und plugin version 8.1.1.

I’ve filed a bug over in the TypeScript repo for the getOutputFileNames issue: https://github.com/microsoft/TypeScript/issues/41780. It’s scheduled for 4.2.1, so probably won’t be looked at until March

I also wrote a test in https://github.com/rollup/plugins/pull/682

None of all the solutions worked for me. What saved my life : increasing typescript.tsserver.maxTsServerMemory in my settings.json (work on VSCode)

The root of problem is in this line in ts repo return configFile.options.rootDir || getDirectoryPath(Debug.checkDefined(configFile.options.configFilePath));

While running cli tsc seem to be working without rootDir option being provided. Without rootDir being set to tsconfig.json path and paths to generated files generated by ts. getOutputFileNames look like that: path-to-repo/lib/src/main.js instead of: path-to-repo/lib/main.js.

I don’t think any changes should be made to computing file output paths. Maybe there should be a validation of incoming options, if the file specified as rollup input lies not in the top directory and compilerOptions.rootDir option is not provided. Also webpack’s ts-loader uses the same api if this function exists in typescript

This error output might be also a bit confusing and changed so it would be clear that dir option rollup specific

I was trying to fix this few days earlier and was able to create failing test, which works well with tsc by fails with plugin. By I do struggle to attach debugger with pnpm with ava to dive deeper into typescript generating output file paths. If I will not fix I may add some info (failing test, function that seem to be not working). Will check more on weekend.