vue2.0 run wrong

[a6965921]

`Failed to compile.

./node_modules/box2d-wasm/dist/es/Box2D.simd.js Module parse failed: Unexpected token (3:25) You may need an appropriate loader to handle this file type.		var Box2D = (function() {	var _scriptDir = import.meta.url;
return (

@ ./node_modules/box2d-wasm/dist/es/entry.js 25:8-33 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/index.vue @ ./src/pages/index.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js`

[Birch-san]

from 3:25 it looks like it's referring to import.meta.url. this is an ES2020 feature.

the complaint comes from babel-loader.
probably you need @babel/plugin-syntax-import-meta, in order for babel to be able to parse the module.
the idiomatic way to enable this plugin is by using the @babel/preset-env preset in your babel config.

the other thing you could do is avoid importing the ES module distribution of box2d-wasm, and import the UMD distribution (box2d-wasm/dist/umd/entry.js) instead.

[a6965921]

can you write vuecli demo I always fail to compile ![Uploading image.png…]()

[a6965921]

[Birch-san]

does it need to be Vue 2.0? I have box2d-wasm importing successfully in vue-create 2.0.5 (which uses Vite rather than webpack), but I don't know enough legacy Vue.js to make an asynchronous component; it's hard to find any documentation for obsolete versions of Vue.

[Birch-san]

looking at your screenshot, it looks like you are putting a babel plugin into your webpack plugins.

@babel/plugin-syntax-import-meta should go into your .babelrc (or wherever you specify your babel config).

[a6965921]