Monorepo example, using `@rollup/plugin-alias` #237

desmap · 2020-08-07T10:04:23Z

What happens and why it is wrong

Environment

I am trying to setup a monorepo with local packages. I am using pnpm workspaces but could also go with tsconfig's paths features. Whatever, I don't get it to work and would love to see an example where somebody gets a monorepo working with this plugin.

My problem is that I get this all the time:

index.ts → index.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
../greeter/index.ts (2:6)
1: export default class {
2:   name: string
         ^
3:

note that the imported local package (greeter) has a index.js, index.mjs and index.d.ts file

Versions

typescript: 3.9.7
rollup: 2.23
rollup-plugin-typescript2: 3.1.1

rollup.config.js

import alias from '@rollup/plugin-alias'
import typescript from 'rollup-plugin-typescript2'

module.exports = {
  input: 'index.ts',
  output: {
    file: 'index.js',
    format: 'module',
  },
  plugins: [
    alias({
      entries: [{ find: 'greeter', replacement: '../greeter' }],
    }),
    typescript(),
  ],
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node"
  }
}

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.9.7"
  },
  "dependencies": {
    "@rollup/plugin-alias": "^3.1.1",
    "greeter": "workspace:^1.0.0",
    "rollup-plugin-typescript2": "^0.27.1",
    "tslib": "^2.0.0"
  }
}

plugin output with verbosity 3

rpt2: built-in options overrides: {
    "noEmitHelpers": false,
    "importHelpers": true,
    "noResolve": false,
    "noEmit": false,
    "inlineSourceMap": false,
    "outDir": "~/test/app/node_modules/.cache/rollup-plugin-typescript2/placeholder",
    "moduleResolution": 2,
    "allowNonTsExtensions": true,
    "module": 5
}
rpt2: parsed tsconfig: {
    "options": {
        "target": 99,
        "moduleResolution": 2,
        "configFilePath": "~/test/app/tsconfig.json",
        "noEmitHelpers": false,
        "importHelpers": true,
        "noResolve": false,
        "noEmit": false,
        "inlineSourceMap": false,
        "outDir": "~/test/app/node_modules/.cache/rollup-plugin-typescript2/placeholder",
        "allowNonTsExtensions": true,
        "module": 5
    },
    "fileNames": [
        "~/test/app/index.ts"
    ],
    "typeAcquisition": {
        "enable": false,
        "include": [],
        "exclude": []
    },
    "raw": {
        "compilerOptions": {
            "target": "esnext",
            "moduleResolution": "node"
        },
        "compileOnSave": false
    },
    "errors": [],
    "wildcardDirectories": {
        "~/test/app": 1
    },
    "compileOnSave": false,
    "configFileSpecs": {
        "includeSpecs": [
            "**/*"
        ],
        "validatedIncludeSpecs": [
            "**/*"
        ],
        "wildcardDirectories": {
            "~/test/app": 1
        }
    }
}
rpt2: typescript version: 3.9.7
rpt2: tslib version: 1.11.2
rpt2: rollup version: 2.23.0
rpt2: rollup-plugin-typescript2 version: 0.27.1
rpt2: plugin options:
{
    "verbosity": 3,
    "check": true,
    "clean": false,
    "cacheRoot": "~/test/app/node_modules/.cache/rollup-plugin-typescript2",
    "include": [
        "*.ts+(|x)",
        "**/*.ts+(|x)"
    ],
    "exclude": [
        "*.d.ts",
        "**/*.d.ts"
    ],
    "abortOnError": true,
    "rollupCommonJSResolveHack": false,
    "useTsconfigDeclarationDir": false,
    "tsconfigOverride": {},
    "transformers": [],
    "tsconfigDefaults": {},
    "objectHashIgnoreUnknownHack": false,
    "cwd": "~/test/app",
    "typescript": "version 3.9.7"
}
rpt2: rollup config:
{
    "external": [],
    "input": "index.ts",
    "plugins": [
        {
            "name": "alias"
        },
        {
            "name": "rpt2"
        },
        {
            "name": "stdin"
        }
    ],
    "output": [
        {
            "file": "index.js",
            "format": "module",
            "plugins": []
        }
    ]
}
rpt2: tsconfig path: ~/test/app/tsconfig.json
rpt2: included:
[
    "*.ts+(|x)",
    "**/*.ts+(|x)"
]
rpt2: excluded:
[
    "*.d.ts",
    "**/*.d.ts"
]
rpt2: ^[[34mAmbient types:^[[39m
rpt2:     ~/test/node_modules/.pnpm/@types/estree@0.0.39/node_modules/@types/estree/index.d.ts
rpt2: ^[[33mambient types changed, redoing all semantic diagnostics^[[39m
rpt2: ^[[34mtranspiling^[[39m '~/test/app/index.ts'
rpt2:     cache: '~/test/app/node_modules/.cache/rollup-plugin-typescript2/rpt2_4a23a64245ad76cbf88c568d3f033c4b438c240a/code/cache/02a6dc8db60bdf18980df68001d986771ff54b6f'
rpt2: ^[[33m    cache miss^[[39m
rpt2:     cache: '~/test/app/node_modules/.cache/rollup-plugin-typescript2/rpt2_4a23a64245ad76cbf88c568d3f033c4b438c240a/syntacticDiagnostics/cache/02a6dc8db60bdf18980df68001d986771ff54b6f'
rpt2: ^[[33m    cache miss^[[39m
rpt2:     cache: '~/test/app/node_modules/.cache/rollup-plugin-typescript2/rpt2_4a23a64245ad76cbf88c568d3f033c4b438c240a/semanticDiagnostics/cache/02a6dc8db60bdf18980df68001d986771ff54b6f'
rpt2: ^[[33m    cache miss^[[39m
rpt2: ^[[34mresolving^[[39m '../greeter' imported by '~/test/app/index.ts'
rpt2:     to '~/test/greeter/index.ts'

The text was updated successfully, but these errors were encountered:

ezolenko · 2020-08-07T18:07:16Z

Could you try setting rollupCommonJSResolveHack option to true. This uses resolve() instead of typescript's resolver. Might cause other problems though.

desmap · 2020-08-08T05:30:24Z

just tried it but got again:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
../greeter/index.ts (2:6)
1: export default class {
2:   name: string
         ^
3:
4:   greet() {

desmap · 2020-08-08T06:52:33Z

I think I found the solution:

alias({
  entries: [{ find: 'greeter', replacement: '../greeter/index.mjs' }],
                                                              ^
})

it needs to be ../greeter/index.mjs and not ../greeter nor ../greeter.js (so the "type": "module" didn't help).

Then it compiles flawlessly! I don't know why tho. ;)

When compilerOptions.rootDir is specified, it is used instead of process.cwd() to filter files. Possible fix for ezolenko#237

NicolasThierion · 2020-10-24T19:16:37Z

I got the exact same issue, and I think I spotted the issue.
I have the following working directory:

├── packages
│   ├── core
│   │   ├── core.ts
│   │   ├── tsconfig.json
│   │   └──  rollup.config.js
│   └── utils
│       ├── package.json
│       └── utils.ts
├── README.md
├── rollup.config.js
├── tsconfig.json       # compilerOptions.rootDir = '.'
└── package.json

In core.ts, I have the following:

imports `../utils/utils.ts`

To my understanding, compiling core with rollup uses packages/core as the root directory, and automatically excludes any parent directory.

**My fix goes at rollup-plugin-typescript2/src/get-options-overrides.ts: 74 : **
I added a third parameter to createRollupFilter()

return createRollupFilter(included, excluded, { resolve: parsedConfig.options.rootDir });

This way, if compilerOptions.rootDir is specified in tsconfig.json, it is used to create the rollup file filter.

@ezolenko you will find the fix in my PR above.

When compilerOptions.rootDir is specified, it is used instead of process.cwd() to filter files. Possible fix for #237

ezolenko · 2020-10-29T15:54:51Z

PR is merged, build is in master. Could somebody with this problem verify if it works for them before I do a release?

ezolenko · 2020-10-30T19:07:09Z

Released in 0.29.0

NicolasThierion · 2020-10-30T19:42:51Z

Thank you!

agilgur5 · 2022-05-27T02:31:56Z

it needs to be ../greeter/index.mjs and not ../greeter nor ../greeter.js (so the "type": "module" didn't help).

Then it compiles flawlessly! I don't know why tho. ;)

This is probably because at the time of this issue (and even now to some extent), Node's ESM support was not supported by all tooling.

Notably TS 4.7 is the first version of TS to officially support module: "nodenext", and 4.7 is still in beta for that matter (4.5 RC had originally implemented it before deferring it).
So tsc wouldn't have been able to resolve this properly at the time either (not necessarily a bug here then).

I got the exact same issue, and I think I spotted the issue.

As such I believe these are actually two different issues with different root causes -- just similar error messages (this is a very common Rollup error message). So there were kind of two issues in one on this thread, each a different monorepo issue.
Monorepos have other issues too (see the label), so trying to keep track of various issues/root causes/fixes etc.

This was referenced Oct 24, 2020

fix: use compilerOptions.rootDir to filter files NicolasThierion/rollup-plugin-typescript2#1

Merged

fix: use compilerOptions.rootDir to filter files #249

Merged

ezolenko pushed a commit that referenced this issue Oct 29, 2020

fix: use compilerOptions.rootDir to filter files (#249)

e9af09f

When compilerOptions.rootDir is specified, it is used instead of process.cwd() to filter files. Possible fix for #237

ezolenko closed this as completed Oct 30, 2020

agilgur5 added the topic: monorepo / symlinks Related to monorepos and/or symlinks (Lerna, Yarn, PNPM, Rush, etc) label Apr 29, 2022

agilgur5 added kind: feature New feature or request kind: support Asking for support with something or a specific use case labels May 27, 2022

agilgur5 added the solution: tsc behavior This is tsc's behavior as well, so this is not a bug with this plugin label May 27, 2022

agilgur5 changed the title ~~Monorepo example~~ Monorepo example, using @rollup/plugin-alias May 27, 2022

agilgur5 mentioned this issue May 27, 2022

fix: add realpath to host to properly resolve monorepos / symlinks #332

Merged

agilgur5 mentioned this issue Jun 8, 2022

semantic error TS2339: Property 'X' doesn't exist on type 'Y' with Vite and Vue2 SFC #352

Closed

agilgur5 mentioned this issue Jun 30, 2023

Typings directory when in-lining project references #454

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Monorepo example, using `@rollup/plugin-alias` #237

Monorepo example, using `@rollup/plugin-alias` #237

desmap commented Aug 7, 2020 •

edited by agilgur5

Loading

ezolenko commented Aug 7, 2020

desmap commented Aug 8, 2020

desmap commented Aug 8, 2020 •

edited by agilgur5

Loading

NicolasThierion commented Oct 24, 2020

ezolenko commented Oct 29, 2020 •

edited

Loading

ezolenko commented Oct 30, 2020 •

edited by agilgur5

Loading

NicolasThierion commented Oct 30, 2020

agilgur5 commented May 27, 2022 •

edited

Loading

Monorepo example, using @rollup/plugin-alias #237

Monorepo example, using @rollup/plugin-alias #237

Comments

desmap commented Aug 7, 2020 • edited by agilgur5 Loading

What happens and why it is wrong

Environment

Versions

rollup.config.js

tsconfig.json

package.json

plugin output with verbosity 3

ezolenko commented Aug 7, 2020

desmap commented Aug 8, 2020

desmap commented Aug 8, 2020 • edited by agilgur5 Loading

NicolasThierion commented Oct 24, 2020

ezolenko commented Oct 29, 2020 • edited Loading

ezolenko commented Oct 30, 2020 • edited by agilgur5 Loading

NicolasThierion commented Oct 30, 2020

agilgur5 commented May 27, 2022 • edited Loading

Monorepo example, using `@rollup/plugin-alias` #237

Monorepo example, using `@rollup/plugin-alias` #237

desmap commented Aug 7, 2020 •

edited by agilgur5

Loading

desmap commented Aug 8, 2020 •

edited by agilgur5

Loading

ezolenko commented Oct 29, 2020 •

edited

Loading

ezolenko commented Oct 30, 2020 •

edited by agilgur5

Loading

agilgur5 commented May 27, 2022 •

edited

Loading