Webpack config

[ByteWither]

Hello! I'm a Junior Frontend developer and I'm developing an extension for Studio for my graduate work. As part of my introduction to foxglove, I'm trying to develop from scratch and then refine the extension based on the Map panel.

I encountered an error while setting up the environment and compiling the test extension.
After yarn local-install I received a message:

As I understand, this error is caused by importing leaflet.css.

Usually when developing in the browser I specify in webpack.config.js loaders to handle CSS and SASS. But in this case I don't quite understand how to do it. I tried just adding the config to the project for webpack, but that didn't work. I suspect it's because @foxglove only uses their configs.

Question: how can I add my rules/configs for the webpack so that @foxglove sees them when building? If there is no such way, how can I get around this error?

You can do a git clone 'https://github.com/Moloko20/gw-extension' to reproduce the error.

[jtbandes]

Hi, and welcome! Could you confirm the version of fox that you're using? We added support for CSS to the default webpack config in foxglove/create-foxglove-extension#33. The latest version of the fox tool (0.3.0) should include this change.

[ByteWither]

Hi! I updated the foxglove dependencies and now I get a new error :(
As I understand, webpack still requires to install some loaders.

Repository: https://github.com/Moloko20/gw-extension

[ByteWither]

After a while I could figure out that these errors were caused by code I took from the Map panel (https://github.com/foxglove/studio/blob/main/packages/studio-base/src/panels/Map/index.tsx).

But how to fix it I did not understand, because without these imports leaflet does not work correctly.

Code:

[jtbandes]

I think the problem is now happening because of the .png file imports. Created a new feature request for this in fox: foxglove/create-foxglove-extension#38

[jtbandes]

We also have a separate feature request for ability to customize the webpack config: foxglove/create-foxglove-extension#32

[ByteWither]

@jtbandes Thank you so much, your answers have helped me move forward with the development.

I would really appreciate it if you could approve foxglove/create-foxglove-extension#32 as soon as possible and make changes to the main branch.

[foxymiles]

foxglove/create-foxglove-extension#32 has been merged and v0.4.0 of the package has been released. You should be able to provide your own config.ts file now to set up any loaders you need. Please let me know if you run into any issues.

[ByteWither]

Wow, that was fast! Thank you very much, this will make further development much easier.