TypeError: Cannot read property 'tapAsync' of undefined
sakharovsergey opened this issue · 10 comments
html-webpack-inline-source-plugin@0.0.10
html-webpack-plugin@4.3.0
webpack@4.44.1
node@12.14.1
npm@6.14.5
macOS@10.15.6
config from here: https://www.figma.com/plugin-docs/bundling-webpack/
Trace:
> webpack --mode=development --watch
/<absolute path to project>/node_modules/html-webpack-inline-source-plugin/index.js:21
? compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync.bind(compilation.hooks.htmlWebpackPluginAlterAssetTags, 'html-webpack-inline-source-plugin')
^
TypeError: Cannot read property 'tapAsync' of undefined
at /<absolute path to project>/node_modules/html-webpack-inline-source-plugin/index.js:21:59
at SyncHook.eval [as call] (eval at create (/<absolute path to project>/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at SyncHook.lazyCompileHook (/<absolute path to project>/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/<absolute path to project>/node_modules/webpack/lib/Compiler.js:631:26)
at /<absolute path to project>/node_modules/webpack/lib/Compiler.js:667:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/<absolute path to project>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (/<absolute path to project>/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/<absolute path to project>/node_modules/webpack/lib/Compiler.js:662:28)
at /<absolute path to project>/node_modules/webpack/lib/Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (/<absolute path to project>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at AsyncSeriesHook.lazyCompileHook (/<absolute path to project>/node_modules/tapable/lib/Hook.js:154:20)
at Watching._go (/<absolute path to project>/node_modules/webpack/lib/Watching.js:41:32)
at /<absolute path to project>/node_modules/webpack/lib/Watching.js:33:9
at Compiler.readRecords (/<absolute path to project>/node_modules/webpack/lib/Compiler.js:529:11)
at new Watching (/<absolute path to project>/node_modules/webpack/lib/Watching.js:30:17)
at Compiler.watch (/<absolute path to project>/node_modules/webpack/lib/Compiler.js:244:10)
at processOptions (/<absolute path to project>/node_modules/webpack-cli/bin/cli.js:350:14)
at /<absolute path to project>/node_modules/webpack-cli/bin/cli.js:364:3
at Object.parse (/<absolute path to project>/node_modules/yargs/yargs.js:576:18)
at /<absolute path to project>/node_modules/webpack-cli/bin/cli.js:49:8
at Object.<anonymous> (/<absolute path to project>/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/<absolute path to project>/node_modules/webpack/bin/webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
webpack config:
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = (env, argv) => ({
mode: argv.mode === 'production' ? 'production' : 'development',
// This is necessary because Figma's 'eval' works differently than normal eval
devtool: argv.mode === 'production' ? false : 'inline-source-map',
entry: {
ui: './src/ui.ts', // The entry point for your UI code
code: './src/code.ts', // The entry point for your plugin code
},
module: {
rules: [
// Converts TypeScript code to JavaScript
{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
// Enables including CSS by doing "import './file.css'" in your TypeScript code
{ test: /\.css$/, loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },
// Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
{ test: /\.(png|jpg|gif|webp|svg)$/, loader: [{ loader: 'url-loader' }] },
],
},
// Webpack tries these extensions for you if you omit the extension like "import './file'"
resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
},
// Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
plugins: [
new HtmlWebpackPlugin({
template: './src/ui.html',
filename: 'ui.html',
inlineSource: '.(js)$',
chunks: ['ui'],
}),
new HtmlWebpackInlineSourcePlugin()
],
})has no error with 1.0.0-beta.2 and
plugins: [
new HtmlWebpackPlugin({
template: './src/ui.html',
filename: 'ui.html',
inlineSource: '.(js)$',
chunks: ['ui'],
}),
- new HtmlWebpackInlineSourcePlugin()
+ new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin)
],but result in dist
<img src="[object Module]">I found the same issue:
html-webpack-inline-source-plugin 0.0.10
html-webpack-plugin 4.3.0
webpack 4.44.1
node 14.7.0
npm 6.14.7
My configuration is as follows:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
inject: true,
template: path.resolve(__dirname, 'src', 'index.html'),
inlineSource: '.(js|css)$' // embed all javascript and css inline
}),
new HtmlWebpackInlineSourcePlugin()
],
}Ran into this issue as well. @sakharovsergey's suggestion of using 1.0.0-beta.2 with new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin) works for me!
Ran into this issue as well. @sakharovsergey's suggestion of using
1.0.0-beta.2withnew HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin)works for me!
Worked for me too!
I had to do some editing to the plugin, in a local version, because I got the error cannot read property source of undefined.
Something weird was happening inside the code because my publicPath property of the output object was not set and was corresponding to auto.
I had to do some editing to the plugin, in a local version, because I got the error
cannot read property source of undefined.Something weird was happening inside the code because my
publicPathproperty of theoutputobject was not set and was corresponding toauto.
I made it work without modifications to the plugin by adding publicPath: '../' inside the output in the webpack configuration.
I had to do some editing to the plugin, in a local version, because I got the error
cannot read property source of undefined.Something weird was happening inside the code because my
publicPathproperty of theoutputobject was not set and was corresponding toauto.
I had the same issue, i add publicPath: '/' inside the output in the webpack configuration and it worked for me
I'm having the same issue.
With:
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
I get:
Total task duration: 1.07s
$ vue-cli-service build
ERROR AssertionError [ERR_ASSERTION]: The HtmlWebpackInlineSourcePlugin does not accept any options
AssertionError [ERR_ASSERTION]: The HtmlWebpackInlineSourcePlugin does not accept any options
at new HtmlWebpackInlineSourcePlugin (/home/arthur/dev/btc/crypto-tool/node_modules/html-webpack-inline-source-plugin/index.js:9:10)
at Object.<anonymous> (/home/arthur/dev/btc/crypto-tool/vue.config.js:22:7)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at exports.loadModule (/home/arthur/dev/btc/crypto-tool/node_modules/@vue/cli-shared-utils/lib/module.js:86:14)
at loadFileConfig (/home/arthur/dev/btc/crypto-tool/node_modules/@vue/cli-service/lib/util/loadFileConfig.js:30:20)
Total task duration: 0.37s
If instead I do:
new HtmlWebpackInlineSourcePlugin(),
I get:
- Building for production...
/home/arthur/dev/btc/crypto-tool/node_modules/html-webpack-inline-source-plugin/index.js:21compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync.bind(compilation.hooks.htmlWebpackPluginAlterAssetTags, 'html-webpack-inline-source-plugin')
TypeError: Cannot read properties of undefined (reading 'tapAsync')
at /home/arthur/dev/btc/crypto-tool/node_modules/html-webpack-inline-source-plugin/index.js:21:59
at Hook.eval [as call] (eval at create (/home/arthur/dev/btc/crypto-tool/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:108:1)
at Hook.CALL_DELEGATE [as _call] (/home/arthur/dev/btc/crypto-tool/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/home/arthur/dev/btc/crypto-tool/node_modules/webpack/lib/Compiler.js:1122:26)
at /home/arthur/dev/btc/crypto-tool/node_modules/webpack/lib/Compiler.js:1166:29
at Hook.eval [as callAsync] (eval at create (/home/arthur/dev/btc/crypto-tool/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/arthur/dev/btc/crypto-tool/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (/home/arthur/dev/btc/crypto-tool/node_modules/webpack/lib/Compiler.js:1161:28)
at /home/arthur/dev/btc/crypto-tool/node_modules/webpack/lib/Compiler.js:524:12
at Compiler.readRecords (/home/arthur/dev/btc/crypto-tool/node_modules/webpack/lib/Compiler.js:986:5)
Total task duration: 1.09s
So either way it's not working.
Any clues as to how to get this to work correctly?
This would be fixed by #82, but this plugin is no longer maintained, so the PR hasn't been merged. In the meantime, that PR branch has been released to npm as @effortlessmotion/html-webpack-inline-source-plugin.
So the following worked for me:
npm install --save-dev html-webpack-plugin @effortlessmotion/html-webpack-inline-source-pluginAnd then my webpack config:
var HtmlWebpackInlineSourcePlugin = require("@effortlessmotion/html-webpack-inline-source-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
inject: "body",
template: "src/index.html",
inlineSource: ".(js|css)$", // embed all javascript and css inline
}),
new HtmlWebpackInlineSourcePlugin(),
],
...
};This would be fixed by #82, but this plugin is no longer maintained, so the PR hasn't been merged. In the meantime, that PR branch has been released to npm as
@effortlessmotion/html-webpack-inline-source-plugin.So the following worked for me:
npm install --save-dev html-webpack-plugin @effortlessmotion/html-webpack-inline-source-pluginAnd then my webpack config:
var HtmlWebpackInlineSourcePlugin = require("@effortlessmotion/html-webpack-inline-source-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ inject: "body", template: "src/index.html", inlineSource: ".(js|css)$", // embed all javascript and css inline }), new HtmlWebpackInlineSourcePlugin(), ], ... };
this works for me perfectly, thanks !