Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

fix: handle correctly webpack compilation errorrs #1051

Merged
merged 1 commit into from
Sep 30, 2019

Conversation

Fatme
Copy link
Contributor

@Fatme Fatme commented Sep 19, 2019

Webpack doesn't notify NativeScript CLI when there is a compilation error. So, NativeScript CLI build the app, install it on device and start it. In most cases the application crashes runtime as the webpack compilcation is not successful. Most probably there would be a red/yellow message in the console printed during the compilation. The users don't see the error message as there is too much log outputed in the console. They don't understand the exact reason why their app crashes runtime.

Webpack has a mechanism to skip the emitting phase whenever there are errors while compiling. This can be achieved using optimization.noEmitOnErrors property as it is described here. This PR adds noEmitOnErrors property in all webpack.config files:

  • The default value is based on noEmitOnError property from tsconfig.json for angular and typescript projects
  • The default value is true for javascript and vue projects.

Also this PR fixes the following problems:

  1. Check for syntactic errors when running webpack compilation in ts projects

Currently ts-loader is started in transpileOnly mode and webpack plugin (ForkTsCheckerWebpackPlugin) runs TypeScript type checker on a separate process in order to report for compilation errors. By default the plugin only checks for semantic errors and adds them to compilation.errors as can be seen here. On the other side, webpack relies on compilation.errors array when deciding if should skip emitting phase. However, ts-loader used in transpileOnly mode still reports syntactic errors but adds them to compilation.warnings. This is a problem, as actually the compilation is not stopped when there is a syntactic error. Setting checkSyntacticErrors: true will ensure that ForkTsCheckerWebpackPlugin will check for both syntactic and semantic errors and after that will be added to compilation.errors.

  1. Respect noEmitOnError from tsconfig.json when compiling ts projects

The problem is in ForkTsCheckerWebpackPlugin and in the way it is integrated with webpack hooks - TypeStrong/fork-ts-checker-webpack-plugin#337.

  1. Send the hash of compilation to NativeScript CLI

The hmr generates new hot-update files on every change and the hash of the next hmr update is written inside hot-update.json file. Although webpack doesn't emit any files, hmr hash is still generated. The hash is generated per compilation no matter if files will be emitted or not. This way, the first successful compilation after fixing the compilation error generates a hash that is not the same as the one expected in the latest emitted hot-update.json file. As a result, the hmr chain is broken and the changes are not applied.

Rel to: NativeScript/nativescript-cli#3785

PR Checklist

What is the current behavior?

What is the new behavior?

Fixes/Implements/Closes #[Issue Number].

@cla-bot cla-bot bot added the cla: yes label Sep 19, 2019
Webpack doesn't notify NativeScript CLI when there is a compilation error. So, NativeScript CLI build the app, install it on device and start it. In most cases the application crashes runtime as the webpack compilcation is not successful. Most probably there would be a red/yellow message in the console printed during the compilation. The users don't see the error message as there is too much log outputed in the console. They don't understand the exact reason why their app crashes runtime.

Webpack has a mechanism to skip the emitting phase whenever there are errors while compiling. This can be achieved using `optimization.noEmitOnErrors` property as it is described [here](https://webpack.js.org/configuration/optimization/#optimizationnoemitonerrors). This PR adds `noEmitOnErrors` property in all webpack.config files:
* The default value is based on `noEmitOnError` property from `tsconfig.json` for `angular` and `typescript` projects
* The default value is `true` for `javascript` and `vue` projects.

Also this PR fixes the following problems:

1. Check for syntactic errors when running webpack compilation in ts projects

Currently `ts-loader` is started in `transpileOnly` mode and  webpack plugin (`ForkTsCheckerWebpackPlugin`) runs TypeScript type checker on a separate process in order to report for compilation errors. By default the plugin only checks for semantic errors and adds them to `compilation.errors` as can be seen [here](). On the other side, webpack relies on [compilation.errors]() array when deciding if should skip emitting phase. However, `ts-loader` used in `transpileOnly` mode still reports syntactic errors but adds them to `compilation.warnings`. This is a problem, as actually the compilation is not stopped when there is a syntactic error. Setting `checkSyntacticErrors: true` will ensure that `ForkTsCheckerWebpackPlugin` will check for both syntactic and semantic errors and after that will be added to `compilation.errors`.

2. Respect `noEmitOnError` from `tsconfig.json` when compiling in `ts` projects

The problem is in `ForkTsCheckerWebpackPlugin` and in the way it is integrated with webpack hooks - TypeStrong/fork-ts-checker-webpack-plugin#337.

3. Send the hash of compilation to NativeScript CLI

The `hmr` generates new hot-update files on every change and the hash of the next hmr update is written inside hot-update.json file. Although webpack doesn't emit any files, hmr hash is still generated. The hash is generated per compilation no matter if files will be emitted or not. This way, the first successful compilation after fixing the compilation error generates a hash that is not the same as the one expected in the latest emitted hot-update.json file. As a result, the hmr chain is broken and the changes are not applied.

Rel to: NativeScript/nativescript-cli#3785
@Fatme Fatme force-pushed the fatme/compilation-errors branch from 45f5f6d to 363c4da Compare September 26, 2019 12:27
@Fatme Fatme changed the title fix: send webpack's compilation errors to the CLI fix: handle correctly webpack compilation errorrs Sep 26, 2019
Fatme added a commit to NativeScript/nativescript-cli that referenced this pull request Sep 26, 2019
Fatme added a commit to NativeScript/nativescript-cli that referenced this pull request Sep 26, 2019
Fatme added a commit to NativeScript/nativescript-cli that referenced this pull request Sep 27, 2019
@Fatme Fatme merged commit 2af9547 into master Sep 30, 2019
@Fatme Fatme deleted the fatme/compilation-errors branch September 30, 2019 08:39
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants