question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError: Cannot read property 'tapAsync' of undefined

See original GitHub issue

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()
    ],
})

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:2
  • Comments:9

github_iconTop GitHub Comments

14reactions
sakharovsergeycommented, Aug 8, 2020

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]">
8reactions
banesullivancommented, Aug 13, 2020

Ran into this issue as well. @sakharovsergey’s suggestion of using 1.0.0-beta.2 with new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin) works for me!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found