TypeError: Cannot read property 'tapAsync' of undefined
See original GitHub issuehtml-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()
],
})
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:9
Top Results From Across the Web
Cannot read property 'tapAsync' of undefined ... - Stack Overflow
The problem for me is that, i was using webpack 5 beta, story book was using webpack 4, it is the clause between...
Read more >TypeError: Cannot read property 'tapAsync' of undefined #1377
error log points to a different library of "html-webpack-preconnect-plugin" but the error only happens when I update "html-webpack-plugin" ...
Read more >解决Cannot read property 'tapAsync' of undefined 问题过程
TypeError : Cannot read property 'tapAsync' of undefined. at ExternalModuleFactoryPlugin.apply (D:\Java\workspace-idea\opt\pspcallcenterui\ ...
Read more >webpack/webpack - Gitter
「wdm」: TypeError: Cannot read property 'tapAsync' of undefined at compiler.hooks.emit.tap (****/webpack-dev-middleware/lib/fs.js:18:37) at _next3 (eval at ...
Read more >[Solved]-Cannot read property 'tapAsync' of undefined at ...
Coding example for the question Cannot read property 'tapAsync' of undefined at ExternalModuleFactoryPlugin.js:30-Reactjs.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
has no error with
1.0.0-beta.2
andbut result in dist
Ran into this issue as well. @sakharovsergey’s suggestion of using
1.0.0-beta.2
withnew HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin)
works for me!