TypeError: Cannot read property 'tapAsync' of undefined

[sakharovsergey]

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

[sakharovsergey]

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]">

[jvalecillos]

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

[banesullivan]

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

[noeldap93]

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

Worked for me too!

[yachaka]

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.

[noe]

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 made it work without modifications to the plugin by adding publicPath: '../' inside the output in the webpack configuration.

[jeanmonse16]

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 the same issue, i add publicPath: '/' inside the output in the webpack configuration and it worked for me

[thierryntoh24]

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 the same issue, i add publicPath: '/' inside the output in the webpack configuration and it worked for me

Same thing here. publicPath: ‘/‘ in the output.

[arthurwolf]

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?

[pokey]

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

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

[RookiePC]

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

And 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 !