legacy's Issues
Module parse failed: Unexpected character '#'
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
@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
> [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... :/
[testing-karma] update karma-esm to the latest version
@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]
Module parse failed: Unexpected character '#'
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
Update to webpack 5
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?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.