TypeError: Cannot read property 'tapAsync' of undefined #79

sakharovsergey · 2020-08-08T09:02:09Z

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

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

The text was updated successfully, but these errors were encountered:

sakharovsergey · 2020-08-08T09:10:30Z

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 · 2020-08-12T10:29:06Z

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 · 2020-08-13T13:47:41Z

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

noeldap93 · 2020-08-26T22:25:12Z

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 · 2021-03-14T23:57:08Z

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 · 2021-05-19T17:15:52Z

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 · 2021-06-10T16:25:30Z

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 · 2021-12-02T03:10:10Z

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 · 2022-08-22T13:26:16Z

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 · 2023-03-08T21:43:08Z

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 · 2023-08-16T08:24:25Z

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 !

DustinJackson/html-webpack-inline-source-plugin#79 (comment)

caxapexac mentioned this issue Dec 13, 2021

How to build preact in one index.html file? preactjs/preact-cli#923

Closed

rossknudsen added a commit to kavod-io/vscode-nuget-gallery that referenced this issue Feb 16, 2024

fix: broken build

517b0a3

DustinJackson/html-webpack-inline-source-plugin#79 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: Cannot read property 'tapAsync' of undefined #79

TypeError: Cannot read property 'tapAsync' of undefined #79

sakharovsergey commented Aug 8, 2020

sakharovsergey commented Aug 8, 2020

jvalecillos commented Aug 12, 2020

banesullivan commented Aug 13, 2020

noeldap93 commented Aug 26, 2020

yachaka commented Mar 14, 2021

noe commented May 19, 2021

jeanmonse16 commented Jun 10, 2021

thierryntoh24 commented Dec 2, 2021

arthurwolf commented Aug 22, 2022

pokey commented Mar 8, 2023 •

edited

Loading

RookiePC commented Aug 16, 2023

TypeError: Cannot read property 'tapAsync' of undefined #79

TypeError: Cannot read property 'tapAsync' of undefined #79

Comments

sakharovsergey commented Aug 8, 2020

sakharovsergey commented Aug 8, 2020

jvalecillos commented Aug 12, 2020

banesullivan commented Aug 13, 2020

noeldap93 commented Aug 26, 2020

yachaka commented Mar 14, 2021

noe commented May 19, 2021

jeanmonse16 commented Jun 10, 2021

thierryntoh24 commented Dec 2, 2021

arthurwolf commented Aug 22, 2022

pokey commented Mar 8, 2023 • edited Loading

RookiePC commented Aug 16, 2023

pokey commented Mar 8, 2023 •

edited

Loading