I get an error when I build my ExtWebComponents chart web component, no matching files, how do I resolve it?

Question

When I build my ExtWebComponents application, I get this error.

Error

ℹ ｢ext｣: C2008: Requirement had no matching files (Ext.chart.theme.Midnight) -- /build/ext/manifest.js:0:13

Other Forms of the Error

• Access to XMLHttpRequest at 'file:///Users/branflake2267/git/sandbox-ewc/dash-metrics/dash-metrics-client/build/widget/cartesian.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

My Config

Ext.require([
  'Ext.chart.theme.Midnight',
  'Ext.chart.theme.Green',
  'Ext.chart.theme.Muted',
  'Ext.chart.theme.Purple',
  'Ext.chart.theme.Sky',
  'Ext.chart.series.Area',
  'Ext.chart.axis.Numeric',
  'Ext.chart.axis.Category'
]);

Source

• https://gist.github.com/branflake2267/07fbe9a79c90e2c85bb34821298d53a8

Answer 1

In order to resolve this error, the charts package has to be added to the ExtWebpackPlugin.

new ExtWebpackPlugin({
  framework: 'web-components',
  toolkit: 'modern',
  theme: 'theme-material',
  emit: emit,
  script: './extract-code.js',
  port: 8080,
  packages: [
      'renderercell',
      'font-ext',
      'ux',
      'd3',
      'pivot-d3',
      'font-awesome',
      'exporter',
      'pivot',
      'calendar',
      'charts', // <<<<<------
      'treegrid',
      'froala-editor'
  ],
  profile: profile,
  environment: environment,
  treeshake: treeshake,
  browser: browser,
  watch: watch,
  verbose: verbose,
  inject: 'yes',
  intellishake: 'no'
})

Example: https://github.com/sencha/ext-web-components/blob/ext-web-components-7.1.x/packages/ext-web-components-kitchensink/webpack.config.js#L45