Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug(ngtools/webpack): elideImports transformer mistakenly treat jsxFactory as unused import #13297

Closed
trotyl opened this issue Dec 25, 2018 · 2 comments · Fixed by #19114
Closed

Bug(ngtools/webpack): elideImports transformer mistakenly treat jsxFactory as unused import #13297

trotyl opened this issue Dec 25, 2018 · 2 comments · Fixed by #19114
Labels
area: ngtools/webpack freq1: low Only reported by a handful of users who observe it rarely help wanted severity3: broken type: bug/fix
Milestone
Backlog

Comments

@trotyl
Copy link
Contributor

trotyl commented Dec 25, 2018 •
edited

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node --version
v11.2.0

npm --version
6.5.0

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.4
Node: 11.2.0
OS: darwin x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Repro steps

Say that current jsxFactory being set to createElement, given an Angular .tsx file, like:

import { Component } from '@angular/core';
import { createElement } from './render';

console.log(<p>123</p>);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-tmp-c';
}

When building with AOT, the AngularCompilerPlugin would apply removeDecorators transformer to the build process.

As this Angular file contains some decorator (@Component() here), removeDecorators is activated and uses elideImports transformer to remove unused decorator imports.

Inside that elideImports transformer, it records "all" the used imports, but it doesn't deal with jsx node properly as not transformed yet, so that jsxFactory is not an identifier and not being recorded.

Then the import being removed and results to a broken file:

// createElement becomes global variable here
console.log(createElement("p", null, "123"));
var AppComponent = /** @class */ (function () {
    function AppComponent() {
        this.title = 'ng-tmp-c';
    }
    return AppComponent;
}());

The log given by the failure

N/A

Desired functionality

Support .tsx in AOT like what in JIT.

Mention any other details that might be useful

Suggested labels: type: bug/fix, effort1: easy, freq1: low, severity3: broken, workaround2: non-obvious.
@ngbot ngbot bot added this to the needsTriage milestone Dec 26, 2018
@filipesilva filipesilva added the needs: discussion On the agenda for team meeting to determine next steps label Dec 27, 2018
@mgechev mgechev removed the needs: discussion On the agenda for team meeting to determine next steps label Jan 3, 2019
@filipesilva filipesilva added type: bug/fix help wanted freq1: low Only reported by a handful of users who observe it rarely severity3: broken labels Jan 3, 2019
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Jan 3, 2019
@santoshyadavdev
Copy link
Contributor

Hi Team,
I am taking this up, may need some help as first time contributor here.

@clydin clydin mentioned this issue Mar 4, 2020
Closed
@kyliau kyliau added triage #1 needs: discussion On the agenda for team meeting to determine next steps labels May 28, 2020
@dgp1130 dgp1130 removed the needs: discussion On the agenda for team meeting to determine next steps label Jun 24, 2020
@clydin clydin removed their assignment Sep 2, 2020
@clydin clydin mentioned this issue Sep 2, 2020
Closed
@clydin clydin mentioned this issue Oct 20, 2020
Merged
@angular-automatic-lock-bot
Copy link

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

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 6, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: ngtools/webpack freq1: low Only reported by a handful of users who observe it rarely help wanted severity3: broken type: bug/fix
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

Ivy Webpack compiler plugin clydin/angular-cli
7 participants
@mgechev @kyliau @filipesilva @trotyl @dgp1130 @santoshyadavdev @clydin