@open-wc/webpack-import-meta-loader: Cannot read properties of undefined (reading 'length')

Expected behavior

On Vue2, including the @open-wc/webpack-import-meta-loader as follows

vue create test-app
cd test-app
npm install --save @polkadot/api @open-wc/webpack-import-meta-loader

Configure vue.config.js


module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: require.resolve('@open-wc/webpack-import-meta-loader'),
                },
            ]
        }
    },  
}

in src/App.vue

import HelloWorld from './components/HelloWorld.vue'
import api from '@polkadot/api'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    console.debug(api)
  },
}

Build the project

npm run build

Actual Behavior

I added a debug into node_modules/@open-wc/webpack-import-meta-loader.js Line 19: console.log("webpack-import-meta-loader.js: rootContext", this.rootContext)

npm run build

> test-app@0.1.0 build
> vue-cli-service build

⠴  Building for production...webpack-import-meta-loader.js: rootContext /Users/derek/Sites/test-app
webpack-import-meta-loader.js: rootContext /Users/derek/Sites/test-app
⠧  Building for production...webpack-import-meta-loader.js: rootContext undefined

 ERROR  Failed to compile with 1 error                                                                                           16:44:26

Syntax Error: Thread Loader (Worker 0)
Cannot read properties of undefined (reading 'length')

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 ERROR  Build failed with errors.

Additional context

I found when this.rootContext is undefined, this.options.context was populated... ?!

  if(!this.rootContext) {
    // console.log("webpack-import-meta-loader.js: this.options.context", this.options?.context)
    // console.log("webpack-import-meta-loader.js: rootContext", this.rootContext)  
    console.log("webpack-import-meta-loader.js: resource", this.resource)  
    // console.log(source)
    this.rootContext = this.options.context
  }
  var ctx = this.rootContext ? this.rootContext : this.options.context
  const relativePath = this.context.substring(
    // this.context.indexOf(this.rootContext) + this.rootContext.length + 1,
    this.context.indexOf(ctx) + ctx.length + 1,
    this.resource.lastIndexOf(path.sep) + 1,
  );

I don't know if this 'hack' is appropriate, but it stops the error... :/

open-wc / legacy

@open-wc/webpack-import-meta-loader: Cannot read properties of undefined (reading 'length') #6

Expected behavior

Actual Behavior

Additional context