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.

No implicit any tsconfig cause issue with webpack config factory

See original GitHub issue

Describe the Bug

I’m using a factory to generate my webpack browser & server configuration. My application tsconfig is in full strict mode. When running the builder for the browser, it seems that type annotations are removed before typescript compilation, causing errors related to implicit any types.

Minimal Reproduction

import { Configuration } from 'webpack';

export type ConfigFactory = ( baseConfig: Configuration, ngBuildConfig: any, ngBuildTarget: any ) => Configuration;

const factory: ConfigFactory = ( baseConfig, ngBuildConfig, ngBuildTarget ) => {
    // ...
}
export default factory;

Build fails with following message:

An unhandled exception occurred: ⨯ Unable to compile TypeScript:
configs/build/webpack.browser.config.ts:15:18 - error TS7006: Parameter 'baseConfig' implicitly has an 'any' type.

15 const factory = (baseConfig, ngBuildConfig, ngBuildTarget) => {
                    ~~~~~~~~~~
configs/build/webpack.browser.config.ts:15:30 - error TS7006: Parameter 'ngBuildConfig' implicitly has an 'any' type.

15 const factory = (baseConfig, ngBuildConfig, ngBuildTarget) => {
                                ~~~~~~~~~~~~~
configs/build/webpack.browser.config.ts:15:45 - error TS7006: Parameter 'ngBuildTarget' implicitly has an 'any' type.

15 const factory = (baseConfig, ngBuildConfig, ngBuildTarget) => {
                                               ~~~~~~~~~~~~~

See "/tmp/ng-lUATx4/angular-errors.log" for further details.

Expected Behavior

Build should work.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment


Libs
- @angular/core version: 12.0.5
- @angular-devkit/build-angular version: 12.2.4
- @angular-builders/custom-webpack version: 12.1.1

For Tooling issues:
- Node version: 16.7.0
- Platform:  Fedora Linux x64

Others:

Additional Context

Seemms related to #749.

I’ve managed to fix the issue localy by editing https://github.com/just-jeb/angular-builders/blob/66b21aa50d31ae06ff4a3467851f068680f70cc9/packages/custom-webpack/src/utils.ts#L9-L17 and adding transpileOnly:

    require('ts-node').register({
      project: tsConfig,
      compilerOptions: {
        module: 'CommonJS',
        transpileOnly: true,
        types: [
          'node', // NOTE: `node` is added because users scripts can also use pure node's packages as webpack or others
        ],
      },
    });

Funny thing is that somehow, the server build is not impacted by this, but use the exact same factory signature.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:12 (12 by maintainers)

github_iconTop GitHub Comments

1reaction
just-jebcommented, Sep 8, 2021

Cool then, I’m graduating to stable release. Thanks for your insights that allowed to pinpoint the root cause quickly and of course for your contribution! @all-contributors please add @GerkinDev for code.

1reaction
just-jebcommented, Sep 7, 2021

Thank you for your contribution, could we please confirm that the issue is solved for you in 12.1.2-beta.0?

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Typescript with Webpack webpack.config.ts file already ...
The tsconfig.json file is instructing Webpack to include all .ts files in the scope for processing. This inadvertently includes the webpack.
Read more >
TSConfig Reference - Docs on every TSConfig option
All relative paths found in the configuration file will be resolved relative ... Turning on noImplicitAny however TypeScript will issue an error whenever...
Read more >
jest issue - read to end of issue; perhaps related to ... - GitHub
I'm working with webpack + typescript + gulp, and loading .ts and .tsx files with ts-loader. For most of the time, everything works...
Read more >
TypeScript - webpack
In this guide we will learn how to integrate TypeScript with webpack. Basic Setup. First install the TypeScript compiler and loader by running:...
Read more >
Understanding TypeScript Configuration Options
Let's suppose that we have app module, test and a single tsconfig file. ... Normally TypeScript will compile this code but when setting...
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