webpack cjs targetType compile jsPdf show error `Can't import the named export 'SVGPathData' (imported as 'SVGPathData') from default-exporting module (only default export is available)`

Bug report

What is the current behavior? i use webpack5 to compile a vue2 component, which use jspdf.when i run webpack compile, it shows error…

when i debug the code, i found that webpack resolve buildMeta of svg-pathdata which is used in jspdf dependence canvg, to default-only. but i look at the svg-pathdata code in github, svg-pathdata do not have a default export, it use rollup to compile the library…

If the current behavior is a bug, please provide the steps to reproduce. component code

import { jsPDF } from 'jspdf';
const pdfInstance = new jsPDF(image.width >= image.height ? 'landscape' : 'portrait', 'px', [image.width, image.height]);

webpack code

{
      name: 'cjs',
      target: 'web',
      context: path.join(ctxDir, entry.originalName),
      output: {
        path: path.join(ctxDir, entry.originalName, 'dist/cjs'),
        library: {
          type: 'commonjs2',
        },
      },
}

What is the expected behavior? it should resolve default-with-named when webpack resolve svg-pathdata

Other relevant information: webpack version: 5.68.0 Node.js version: v14.18.2 Operating System: mac Additional tools: vscode

[vankop]

@wind4gis you should put $ in the end of regexp in your test option

test: /\.png|jpg|gif|jpeg|svg$/,

with this one should be ok

[wind4gis]

i delete lerna and cli, you can checkout test branch, it’s a simple repo… and i found that maybe the image file loader rule cause the problem

{
        test: /\.png|jpg|gif|jpeg|svg/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
        generator: {
          filename: 'images/[base]',
        },
      },

when i run build comand it works ok, run build:svg it works wrong. you can checkout test branch, it’s so strange @vankop