Module parse failed: Unexpected character '#' (39:2) File was processed with these loaders: * ./node_modules/@open-wc/webpack-import-meta-loader/webpack-import-meta-loader.js You may need an additional loader to handle the result of these loaders. | | export class Keyring { > #pairs; | #type; | #ss58; @ ./node_modules/@polkadot/keyring/bundle.js 3:0-39 10:0-19 @ ./node_modules/@polkadot/keyring/index.js @ ./src/components/rmrk/service/Consolidator.ts @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/rmrk/Create/MassMint.vue?vue&type=script&lang=ts& @ ./src/components/rmrk/Create/MassMint.vue?vue&type=script&lang=ts& @ ./src/components/rmrk/Create/MassMint.vue @ ./src/router/rmrk.ts @ ./src/router/index.ts @ ./src/main.ts

Sadly I cannot use rollup since its unresolved issues with node streams and readable-stream.

It is really unfortunate for me that webpack 4 is the last supported by building-webpack. How much effort would it be to update it to version 5?

@open-wc/testing-karma should update @open-wc/karma-esm to version with the latest version of es-dev-server which uses newer version of @rollup/plugin-node-resolve. Otherwise there will be 2 versions of this rollup plugins and different configs need to be maintain when using @open-wc/testing-karma with es-dev-server

├─┬ @open-wc/[email protected]
│ └─┬ @open-wc/[email protected]
│   └─┬ [email protected]
│     └── @rollup/[email protected] 
└─┬ [email protected]
  └── @rollup/[email protected] 

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... :/

Module parse failed: Unexpected character '#' (39:2)
File was processed with these loaders:

• ./node_modules/@open-wc/webpack-import-meta-loader/webpack-import-meta-loader.js
• You may need an additional loader to handle the result of these loaders.
• |
• | export class Keyring {

• #pairs;

• | #type;
• | #ss58;
• @ ./node_modules/@polkadot/api/node_modules/@polkadot/keyring/bundle.js 3:0-39 10:0-19
• @ ./node_modules/@polkadot/api/node_modules/@polkadot/keyring/index.js
• @ ./node_modules/@polkadot/api/bundle.js
• @ ./node_modules/@polkadot/api/index.js
• @ ./src/utils/vue-api2/Api.ts
• @ ./src/utils/vue-api2/index.ts
• @ ./src/main.ts

I'm using @open-wc/webpack-import-meta-loader 0.4.7