question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: rollup inlines external dependency because import path was re-written

See original GitHub issue

Type of Issue

  • Bug Report
  • Feature Request

Description

FESM bundles include inlined external dependencies.

How To Reproduce

Exmaple w/ ngx-translate:

The ng-package.json:

{
    "$schema": "../../node_modules/ng-packagr/lib/ng-package.schema.json",
    "lib": {
        "entryFile": "public_api.ts",
        "externals": {
            "@ngx-translate/core": "ngx-translate-core"
        }
    }
}

The source code:

import { TranslateService } from '@ngx-translate/core';

export class MyLib {
  // do stuff with TranslateService
}

In the .ng_build directory, the generated .js file ends up with the following import:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core/index';

The import path from @ngx-translate/core in the source was re-written to @ngx-translate/core/index, thus the externals mapping does not match and rollup inlines the third-party dependency.


To confirm the cause, the following setting then produces a good FESM bundle!

{
    "lib": {
        "entryFile": "public_api.ts",
        "externals": {
            "@ngx-translate/core": "ngx-translate-core",
            "@ngx-translate/core/index": "ngx-translate-core"
        }
    }
}

FESM Bundle:

import { TranslateLoader, TranslateModule } from '@ngx-translate/core/index';

Expected Behaviour

Externals dependencies shouldn’t be rewritten.

Usage of lib.externals in ng-package.json SHOULD BE the TypeScript import path from sources! In above examples: @ngx-translate/core.

Version Information

ng-packagr: v1.0.0-pre.14
node: v8.1.1
@angular: v4.3.3
@ngx-translate/core: v7.1.0
rxjs: 5.4.2
zone.js: 0.8.16

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:31 (26 by maintainers)

github_iconTop GitHub Comments

1reaction
dhergescommented, Oct 3, 2017

Sorry. I stopped one step short:

$ cd dist && yarn link && cd ..
$ yarn link "ngx-codemirror"
$ yarn build
ERROR in ./dist/ngx-codemirror/ngx-codemirror.es5.js
Module not found: Error: Can't resolve 'codemirror/index' in '~/github/ngx-codemirror/dist/ngx-codemirror'
resolve 'codemirror/index' in '~/github/ngx-codemirror/dist/ngx-codemirror'
  Parsed request is a module
  using description file: ~github/ngx-codemirror/dist/package.json (relative path: ./ngx-codemirror)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: ~github/ngx-codemirror/dist/package.json (relative path: ./ngx-codemirror)
    resolve as module
0reactions
github-actions[bot]commented, Jun 19, 2020

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

rollup.js
This allows you to build on top of existing tools and modules without adding extra dependencies or bloating the size of your project....
Read more >
How to Bundle JavaScript With Rollup — Step-by-Step Tutorial
This happens because Rollup is based on ES2015 modules, which are more efficient than CommonJS modules, which are what webpack and Browserify use....
Read more >
Bundling a plugin with Rollup but having duplicate Vue.js ...
The duplicate Vue package doesn't get imported when the plugin is used via an NPM package (installed by npm install -save <plugin-name> )....
Read more >
Options - Babel
The working directory that all paths in the programmatic options will be resolved ... would allow plugins and presets to decide that, since...
Read more >
rollup | Yarn - Package Manager
rollup changelog. 3.8.1. 2022-12-23. Bug Fixes. Reduce memory footprint when explicitly passing cache: false (#4762); Fix a crash when preserving modules ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found