A render pipeline's fragment targets array must match the texture format of the color attachments used in the render pass

When creating a render pipeline, the fragment.targets array must list the texture formats for each color attachment the pipeline will write to. These formats must match what the render pass provides as colorAttachments. If you use getPreferredCanvasFormat() for the canvas context’s format, you must also use that same value as the target format in the pipeline. A mismatch causes validation errors. The pipeline also needs a layout describing what bind groups it accepts; layout: 'auto' lets the pipeline infer this automatically from the shader’s @group/@binding declarations, which is convenient but creates a layout private to that pipeline.

Examples

const cellPipeline = device.createRenderPipeline({
  layout: 'auto',
  fragment: {
    module: cellShaderModule,
    entryPoint: 'fragmentMain',
    targets: [{ format: canvasFormat }]  // must match context.configure() format
  }
});

Assessment

You create a pipeline with targets: [{ format: 'rgba8unorm' }] but the canvas context is configured with getPreferredCanvasFormat() which returns 'bgra8unorm'. What error occurs and how do you fix it?