I'm attempting to replace the deprecated script-loader with webpack 5's Asset Modules.

Currently I have an HTML file with:

import 'script-loader!systemjs';

loading systemjs.

I've tried systemjs-webpack-interop as code without success; I get

Cannot read property 'meta' of undefined

This is on a legacy library project, and I want to be sure that existing code can still consume it. My goal is to make as few changes as possible.

It's not clear to me from the webpack documentation how to approach replacing this. I'm looking for an example configuration that would behave the same way as my original code.

Update

The documentation on Replacing Inline Loader Syntax suggests one option:

// Portion of webpack config
    rules: [
      {
        resourceQuery: /raw/,
        type: 'asset/source'
      }
    ]

// Source file (such as index.js)
import 'systemjs?raw';

This builds, but the output is different. I'm still investigating to see if the differences matter.

One additional piece it seems I will need:

The script-loader documentation says that it will execute the script once in the global context, and recommends the following for migration to raw-loader (for webpack 4):

import('raw-loader!someScript.js')
  .then(rawModule => eval.call(null, rawModule.default))

It appears I can do the same thing with my raw asset import:

import('systemjs?raw')
  .then(rawModule => eval.call(null, rawModule.default));