Webpack/Typescript loss references files after rebuild by watch

31 Views Asked by At

I use webpack and typescript with watch option. On first build, all OK, all files success compile and build success too. But, if I try to change file who references to other files, build error.

First build:

yarn run v1.22.19
$ encore dev --watch
Running webpack ...

 DONE  Compiled successfully in 5670ms

6 files written to public/build
Entrypoint admin [big] 6.23 MiB (300 KiB) = runtime.5077ec8c.js 16.9 KiB admin.d463c2db.css 1.02 MiB admin.431270c8.js 5.19 MiB 2 auxiliary assets 
webpack compiled successfully

After change file, I receive error:

 WAIT  Compiling...

 ERROR  Failed to compile with 3 errors

 error  in /code/assets/admin/js/chart/line-chart-builder.ts

[tsl] ERROR in /code/assets/admin/js/chart/line-chart-builder.ts(1,44)
      TS2306: File '/code/assets/admin/js/chart/chart-builder.ts' is not a module.

 error  in /code/assets/admin/js/chart/line-chart-builder.ts

[tsl] ERROR in /code/assets/admin/js/chart/line-chart-builder.ts(2,23)
      TS2306: File '/code/assets/admin/js/model/chart.ts' is not a module.

 error  in /code/assets/admin/js/chart/line-chart-builder.ts

[tsl] ERROR in /code/assets/admin/js/chart/line-chart-builder.ts(17,38)
      TS2339: Property 'container' does not exist on type 'LineChartBuilder'.

Entrypoint admin [big] 6.23 MiB (300 KiB) = runtime.5077ec8c.js 16.9 KiB admin.d463c2db.css 1.02 MiB admin.64eba495.js 5.19 MiB 2 auxiliary assets
webpack compiled with 3 errors

Changed file:

import { ChartBuilder, ChartOptions } from './chart-builder';
import { Graph } from '../model/chart';
import { Chart, ChartData } from 'chart.js';

export type LineChartOptions = ChartOptions & {}

export class LineChartBuilder extends ChartBuilder {
    constructor(
        container: HTMLCanvasElement,
        private readonly graph: Graph,
        private readonly options: LineChartOptions
    ) {
        super(container);
    }

    render(): void {
        const chart = new Chart(this.container, {
            type: 'line',
            data: this.generateData()
        });

        chart.render();
    }

    generateData(): ChartData<'line'> {
        const labels: Array<string> = [];

        return {
            datasets: []
        };
    }
}

If changed file not referenced to other files, all OK, builds successfully.

TS Configuration:

{
    "compilerOptions": {
        "baseUrl": "./assets",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "strictPropertyInitialization": false,
        "strictNullChecks": false,
        "strictFunctionTypes": false,
        "noImplicitAny": true,
        "noImplicitOverride": true,
        "noPropertyAccessFromIndexSignature": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "sourceMap": true,
        "declaration": false,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "node",
        "useDefineForClassFields": false,
        "lib": [
            "ESNext",
            "dom"
        ]
    },
    "include": [
        "assets/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

Webpack configuration (generated by @symfony/webpack-encore):

{
  context: '/code',
  entry: { admin: './assets/admin/app.ts' },
  mode: 'development',
  output: {
    path: '/code/public/build',
    filename: '[name].[contenthash:8].js',
    assetModuleFilename: 'assets/[name].[hash:8][ext]',
    publicPath: '/build/',
    pathinfo: true
  },
  module: {
    rules: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object]
    ]
  },
  plugins: [
    MiniCssExtractPlugin {
      _sortedModulesCache: [WeakMap],
      options: [Object],
      runtimeOptions: [Object]
    },
    DeleteUnusedEntriesJSPlugin { entriesToDelete: [] },
    WebpackManifestPlugin { options: [Object] },
    ProvidePlugin { definitions: [Object] },
    CleanWebpackPlugin {
      dangerouslyAllowCleanPatternsOutsideProject: false,
      dry: false,
      verbose: false,
      cleanStaleWebpackAssets: false,
      protectWebpackAssets: true,
      cleanAfterEveryBuildPatterns: [],
      cleanOnceBeforeBuildPatterns: [Array],
      currentAssets: [],
      initialClean: false,
      outputPath: '',
      apply: [Function: bound apply],
      handleInitial: [Function: bound handleInitial],
      handleDone: [Function: bound handleDone],
      removeFiles: [Function: bound removeFiles]
    },
    DefinePlugin { definitions: [Object] },
    FriendlyErrorsWebpackPlugin {
      compilationSuccessInfo: [Object],
      onErrors: undefined,
      shouldClearConsole: false,
      logLevel: 0,
      formatters: [Array],
      transformers: [Array],
      previousEndTimes: {},
      reporter: [BaseReporter]
    },
    AssetOutputDisplayPlugin {
      outputPath: 'public/build',
      friendlyErrorsPlugin: [FriendlyErrorsWebpackPlugin]
    },
    AssetsWebpackPlugin { options: [Object] }
  ],
  optimization: {
    runtimeChunk: 'single',
    splitChunks: { chunks: 'async', cacheGroups: {} }
  },
  watchOptions: { ignored: /node_modules/ },
  devtool: 'inline-source-map',
  performance: { hints: false },
  stats: {
    hash: false,
    version: false,
    timings: false,
    assets: false,
    chunks: false,
    modules: false,
    reasons: false,
    children: false,
    source: false,
    errors: false,
    errorDetails: false,
    warnings: false,
    publicPath: false,
    builtAt: false
  },
  resolve: {
    extensions: [
      '.wasm',   '.mjs',
      '.js',     '.json',
      '.jsx',    '.vue',
      '.ts',     '.tsx',
      '.svelte'
    ],
    alias: {}
  },
  externals: []
}

It seems that when reassembling it collects only changed files (which is justified), but loses the cache of previously collected files.

0

There are 0 best solutions below