html-bundler-webpack-plugin icon indicating copy to clipboard operation
html-bundler-webpack-plugin copied to clipboard

RSPack support and compatibility

Open KrzysztofZawisla opened this issue 2 years ago • 12 comments

Feature request

What is motivation or use case for adding/changing the behavior? Would be nice to add compatibility with rspack ecosystem as many other webpack plugins are already compatible with rspack. In my project, it's the only plugin that is incompatible with rspack and doesn't have any other equivalent

Useful links: https://www.rspack.dev/

Describe the solution you'd like Resolve the error on the attached screenshot

rspack

Describe alternatives you've considered None

KrzysztofZawisla avatar Nov 27 '23 13:11 KrzysztofZawisla

By the fact that there's no alternative in the ecosystem I mean no alternative which is able to preload assets (CSS, scripts, fonts, etc.)

KrzysztofZawisla avatar Nov 27 '23 14:11 KrzysztofZawisla

Hello @KrzysztofZawisla,

thanks for the feature request! I don't use rspack (yet), but I'm thinking of using it in the future (next year) and I will optimize the plugin for rspack.

webdiscus avatar Nov 27 '23 14:11 webdiscus

@KrzysztofZawisla

can you please create a repo with reproducible issue. I'll see whether the problem is difficult. Perhaps this is not such complex and I can quickly fix it.

webdiscus avatar Nov 27 '23 15:11 webdiscus

I think RSPack will need to catch up on webpack features and internal hooks. I doubt there is anything html-bundler-webpack-plugin can do.

Rspack chokes on this simple config:

// 1. create `./src/index.html` with an empty, but valid, HTML5 document
// 2. create `./webpack.config.js`
// 3. run `npx -y @rspack/cli --config webpack.config.js`

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

const config = {
    mode: "development",
    entry: {
        index: './src/index.html'
    },
    plugins: [
        new HtmlBundlerPlugin()
    ]
};
module.exports = config;

The error I get is:

Error: Napi Error: Failed to convert JavaScript value `function anonymous(..) ` into rust type `String`

    at Compiler._Compiler_getInstance (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:516:55)
    at Compiler.build (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:380:87)
    at /home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:347:26
    at Hook.eval [as callAsync] (eval at create (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/tapable/lib/Hook.js:18:14)
    at /home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:343:32
    at Hook.eval [as callAsync] (eval at create (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/tapable/lib/Hook.js:18:14)
    at doRun (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:339:34)
    at Compiler.run (/home/david/.npm/_npx/89e5cd2d45bac79e/node_modules/@rspack/core/dist/Compiler.js:375:13) {
  code: 'GenericFailure'
}

But even if you remove HtmlBundlerPlugin, switch to a JavaScript entry, and start adding webpack config options, like cache: object, it will error, as it expects cache to be a Boolean. There are many other options it doesn't support (optimization.moduleIds = "size", output.chunkFilename = function, symlinks: false, and more.

davidmurdoch avatar Dec 12 '23 17:12 davidmurdoch

Hello. I'm also trying to switch to RSPack and have the same problem with the plugin. I would like to see support in the near future. Essentially he is complaining about pug-plugin joining the RSPack ecosystem. Thank you.

P.S. - I'm trying to do it myself for pug-plugin.

exocornet avatar Mar 09 '24 11:03 exocornet

@KrzysztofZawisla, @davidmurdoch, @exocornet

Currently, RSPack v0.5.6 is yet not 100% compatible with the Webpack.

Using the html-bundler-webpack-plugin with RSPack occurs the issue:

/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Compiler.js:518
    __classPrivateFieldSet(this, _Compiler_instance, new instanceBinding.Rspack(rawOptions, this.builtinPlugins, {
                                                     ^

Error: Failed to convert JavaScript value `function filenameFn(..) ` into rust type `String`

    at Compiler._Compiler_getInstance (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Compiler.js:518:54)
    at Compiler.build (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Compiler.js:384:87)
    at /Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Watching.js:263:23
    at Hook.eval [as callAsync] (eval at create (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/tapable/lib/Hook.js:18:14)
    at Watching._Watching_go (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Watching.js:253:34)
    at Watching._Watching_invalidate (/Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Watching.js:217:74)
    at /Users/xxxx/html-bundler-webpack-plugin/experiments/rspack/node_modules/@rspack/core/dist/Watching.js:51:94
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11) {
  code: 'GenericFailure'
}

This is a BUG on the RSPack side.

Here is the minimal usage example rspack-html-bundler.

rspack.config.js

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/'),
    publicPath: '',
  },

  entry: {},

  plugins: [
    // TODO: fix rspack issue
    new HtmlBundlerPlugin({
      entry: {
        index: './src/template.html',
      },
    }),
  ],
};

How to reproduce

git clone https://github.com/webdiscus/html-bundler-webpack-plugin.git
cd html-bundler-webpack-plugin/experiments/rspack
npm i
npm run dev

Please, can you create an issue by the RSPack to add the compatibility with this plugin.

📌 Note A symbiosis of the fast RSPack and the powerful html-bundler-webpack-plugin could be a Vite killer.

webdiscus avatar Mar 09 '24 21:03 webdiscus

Hello, Rspack 1.0 has been released! Can you try to add his support again?)

elseify avatar Sep 02 '24 14:09 elseify

Hi @elseify,

Rspack 1.0 is not yet compatible with core webpack features.

Rspack implements "~10%" of the core (mandatory) features of Webpack, so it is not possible to make this powerful Webpack plugin compatible with Rspack. In fact, Rspack lacks important Webpack features.

I checked the new version and saw many missing features that the plugin uses.

  • RSPack doesn't implemet the compilation object as the instanceof of the Compilation
  • missing contextModuleFactory.hooks.alternativeRequests
  • missing normalModuleFactory.hooks.createModuleClass
  • missing normalModuleFactory.hooks.module
  • missing compilation.hooks.renderManifest
  • ...

webdiscus avatar Sep 02 '24 15:09 webdiscus

I understand, it's sad of course. Webpack has become too slow

elseify avatar Sep 02 '24 15:09 elseify

Webpack has become too slow

For using Webpack with React or Vue, yes, is too slow. But it is the problem of the React with a lot of components, not Webpack ;-)

Webpack is ideal to generate classic (old school) HTML pages, w/o modern monster frameworks.

For example, I have for my project over 50 templates (Pug, Handlebars, etc.) and to compile all pages with JS, SCSS, takes ca. 8-10 seconds (M1 Pro). In dev (watch/serve) mode recompilation after changes takes ca. 0.3-0.9 seconds. It's ok.

P.S. For React/Vue there is a very cool Vite.

P.S.S. can you please describe your project:

  • how many pages
  • whether is used a templating engine
  • how many JS components or frameworks/libs
  • how large is SCSS code base
  • how long compiles your project
  • how long compiles after changes (serve/watch)

webdiscus avatar Sep 02 '24 16:09 webdiscus