Style Loader has been initialised using an options object that does not match the API schema

Question

I am a very new to programming. So read a few articles and trying to configure web-pack for the following purpose.

I'm building a preact widget and the CSS is clashing with parent website. Hence I'm trying to create a shadow DOM and then load css into shadow DOM instead of adding into the document header.

I have created a shadow DOM and I have configured webpack to inject styles into the shadow root like below.

rules: [
        // packs SVG's discovered in url() into bundle
        { test: /\.svg/, use: 'svg-url-loader' },
        {
          test: /\.css$/i,
          use: [
            {
              loader: require.resolve('style-loader'),
              options: {
                insertInto: function () {
                  return document.getElementById('#widget-_hw').shadowRoot;
                },
              },
            },
            {
              // allows import CSS as modules
              loader: 'css-loader',
              options: {
                modules: {
                  // css class names format
                  localIdentName: '[name]-[local]-[hash:base64:5]'
                },
                sourceMap: isDevBuild
              }
            }
          ]
   

But I'm getting the following error

Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'insertInto'. These properties are valid:
   object { injectType?, attributes?, insert?, base?, esModule? }

Answer 1

The error tells you exactly what's wrong: insertInto is not a valid option on style-loader.

insert, which the error message tells you is one of the valid options, is likely what you want.