Blocks CLI beta: custom bundler & Webpack?

Kamille_Parks · ‎Aug 17, 2021

Does the public beta for the blocks cli allow the use of Webpack, Rollup, or another package to handle bundled CSS/JS? If so are there any examples?

I have two Marketplace apps that use a package with a newer version requiring Webpack but am unsure how I could properly fold in a custom bundler, or if this is even possible yet.

Emma_Yeap · ‎Aug 18, 2021

Hi Kamille,

The beta CLI uses Webpack by default for bundling. If that isn’t sufficient, it is also possible to create your own custom bundler.

Aside from the default bundler, we don’t yet have any examples of custom bundlers. To create a custom bundler, I would recommend copying the default bundler and tweaking it as required - it must implement the APIs described in the documentation you linked.

When submitting an app that uses a custom bundler to the Marketplace, you will need to include your custom bundler as a dependency (by returning it’s path in findDependenciesAsync).

Thanks,
Emma

Kamille_Parks · ‎Aug 24, 2021

Thanks Emma! I ran into a some issues after copying the bundler having to do with typescript and being unable to “import” modules. Some other folks at Airtable support are helping me work through it and when we get everything squared away I hope to post the full solution here.

Emma_Yeap · ‎Aug 24, 2021

Haha yes, I’ve been helping the Airtable support folks investigate this issue (I thought it was funny that two questions about custom bundlers came in on the same day - until I looked more closely at the people involved!). We’ll get back to you with a more detailed response soon.

For anyone following along here: the “unable to import modules” error is because the custom bundler must be a “resolvable module” (can be loaded with require()). So unfortunately the default bundler won’t work “out of the box” as a custom bundler.

I’ll update the documentation with this info, though it won’t appear on the npmjs readme until we release a new version of the beta CLI.