Module warning with image imports in webpack 5

[ritchieanesco]

A module warning is appearing after each build. Compiled code works.

Error

> Module Warning (from ./node_modules/svelte-loader/index.js):
'image' is not defined (25:10)
23: <h1>Hello {name}!</h1>
24: {#if obj?.value}{obj.value}{/if}
25: <img src={image} alt="Test" />
              ^
26: <div class="box">asda</div>
27: @ ./src/index.ts 1:0-31 3:16-19

App.svelte

<script type="ts">
  import image from "./test.png"
  export let name: string
  $: name = name ?? "world"
</script>

<h1>Hello {name}!</h1>
<img src={image} alt="Test" />

Webpack

      {
        test: /\.svelte$/,
        use: {
          loader: "svelte-loader",
          options: {
            compilerOptions: {
              dev: argv.mode === "development",
            },
            emitCss: true,
            preprocess: sveltePreprocess({
              postcss: true,
              babel: {
                plugins: [
                  "@babel/plugin-proposal-optional-chaining",
                  "@babel/plugin-proposal-nullish-coalescing-operator",
                ],
                presets: [
                  [
                    "@babel/preset-env",
                    {
                      loose: true,
                      modules: false,
                      targets: {
                        esmodules: true,
                      },
                    },
                  ],
                ],
              },
            }),
          },
        },
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],
      },

Version:

"@babel/core": "^7.14.2",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.14.2",
"@tsconfig/svelte": "^1.0.10",
"svelte-check": "^1.5.4",
"svelte-jester": "^1.5.0",
"svelte-loader": "^3.1.1",
"svelte-preprocess": "^4.7.3",
"webpack": "^5.37.0",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"

[ritchieanesco]

Adding console log to output the svelte-loader index file. I can see the following:

warnings [
  {
    code: 'missing-declaration',
    message: "'image' is not defined",
    frame: '23: <h1>Hello {name}!</h1>\n' +
      '24: {#if obj?.value}{obj.value}{/if}\n' +
      '25: <img src={image} alt="Test" />\n' +
      '              ^\n' +
      '26: <div class="box">asda</div>\n' +
      '27: ',
    start: { line: 25, column: 10, character: 522 },
    end: { line: 25, column: 15, character: 527 },
    pos: 522,
    filename: **redacted**,
    toString: [Function: toString]
  }
]

[ritchieanesco]

I removed the sveltePreprocess argument as i have the same configuration in babel.config.js which seemed to fix the issue.