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.