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

[dcolley]

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

> [email protected] 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... :/

[Westbrook]

We've not actively maintained this package for quite some time. See it in our "legacy" repo: https://github.com/open-wc/legacy/tree/master/packages/webpack-import-meta-loader

If you happened to find a fix that you felt made sense, feel free to open a PR, but we are not investing work in the package at this time.