First of all, I created the npm package which uses wasm converted from rust-lang using wasm-pack.
https://www.npmjs.com/package/markdown_img_url_editor
node_modules/markdown_img_url_editor
:
Now, I want to re-webpack the package and use it.
However, currently, there are at least two problems.
.wasm
was not copied to webpack dest directory
After manually copied .wasm
files,
on debug execution, TypeError: Cannot read property 'call' of undefined at __webpack_require__
error is occurred.
Activating extension `yumetodo.google-photos-uploader` failed: Cannot read property 'call' of undefined
Here is the error stack: TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:77:1)
at Function.requireEnsure [as e] (c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:96:25)
at Module.<anonymous> (c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:229:1)
at __webpack_require__ (c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:77:1)
at c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:219:1
at Object.<anonymous> (c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:222:1)
at Object../node_modules/markdown_img_url_editor/dist/index.js (c:\msys64\home\yumetodo\google-photos-uploader\dist\extension.js:248909:30)
at __webpack_require__ (c:\msys64\home\yumetodo\google-photos-uploader\webpack\bootstrap:19:1)
at Object../src/extension.ts (c:\msys64\home\yumetodo\google-photos-uploader\src\extension.ts:5:1)
at __webpack_require__ (c:\msys64\home\yumetodo\google-photos-uploader\webpack\bootstrap:19:1)
at module.exports../node_modules/abort-controller/dist/abort-controller.js.Object.defineProperty.value (c:\msys64\home\yumetodo\google-photos-uploader\webpack\bootstrap:83:1)
at Object.<anonymous> (c:\msys64\home\yumetodo\google-photos-uploader\dist\extension.js:88:10)
at Object.<anonymous> (c:\msys64\home\yumetodo\google-photos-uploader\dist\extension.js:285073:3)
at Module.t._initNodeRequire.o._compile (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:15:840)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:704:10)
at Module.load (internal/modules/cjs/loader.js:602:32)
at tryModuleLoad (internal/modules/cjs/loader.js:541:12)
at Function.Module._load (internal/modules/cjs/loader.js:533:3)
at Function.t._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:785:588)
at Function.define._installInterceptor.i._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:751:448)
at Function.t.getExtensionPathIndex.then.n._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:742:925)
at Module.require (internal/modules/cjs/loader.js:640:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Function.i [as __$__nodeRequire] (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:32:381)
at f._loadCommonJSModule (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:752:632)
at f._doActivateExtension (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:655:27)
at f._activateExtension (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:654:108)
at f.<anonymous> (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:651:937)
at Generator.next (<anonymous>)
at i (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:14:83)
at new Promise (<anonymous>)
at i (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:13:862)
at Object.actualActivateExtension (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:651:639)
at p._activateExtension (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:497:21)
at define._activateExtensions.r.length.Promise.all.s.map.e (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:496:628)
at Array.map (<anonymous>)
at p._activateExtensions (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:496:616)
at p.activateByEvent (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:494:477)
at f._activateByEvent (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:652:775)
at A.$activateByEvent._readyToRunExtensions.wait.then.t (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:661:547)
How should I resolve these problems?
webpack.config.js
:
//@ts-check
'use strict';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const TerserPlugin = require('terser-webpack-plugin');
/**@type {import('webpack').Configuration}*/
const config = {
target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
output: {
// the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
path: path.resolve(__dirname, 'dist'),
filename: 'extension.js',
libraryTarget: 'commonjs2',
devtoolModuleFilenameTemplate: '../[resource-path]',
webassemblyModuleFilename: "[modulehash].wasm",
},
devtool: 'source-map',
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
mangle: false,
keep_classnames: true,
keep_fnames: true,
},
}),
],
},
externals: {
vscode: 'commonjs vscode', // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
},
resolve: {
// support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
// options: {
// compilerOptions: {
// "module": "es6" // override `tsconfig.json` so that TypeScript emits native JavaScript modules.
// }
// }
},
],
},
{
test: /\.html$/,
use: 'raw-loader',
},
{
test: /\.wasm$/,
type: 'webassembly/experimental',
},
],
},
};
module.exports = config;
stop re-webpack and mark wasm package as externals. https://webpack.js.org/configuration/externals/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.