How can I solve "You may need an appropriate loader to handle this file type" in Vaadin flow (14) framework?

user_2932149 0
Viewed 188

I am working with Vaadin 14. I am having an issue with an addon. How do I solve this loader issue since the Vaadin framework is the one that takes care of the webpack in the application.

2021-05-29 03:35:13.750 ERROR 9096 --- [        webpack] dev-webpack                              : 
ERROR in ../node_modules/@lrnwebcomponents/simple-icon/lib/simple-icons.js 18:26
2021-05-29 03:35:13.750 ERROR 9096 --- [        webpack] dev-webpack                              : Module parse failed: Unexpected token (18:26)
    2021-05-29 03:35:13.750 ERROR 9096 --- [        webpack] dev-webpack                              : You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    2021-05-29 03:35:13.750 ERROR 9096 --- [        webpack] dev-webpack                              : |   SimpleIconsetStore.registerIconset(
    2021-05-29 03:35:13.751 ERROR 9096 --- [        webpack] dev-webpack                              : |     i,
    2021-05-29 03:35:13.751 ERROR 9096 --- [        webpack] dev-webpack                              : >     `${pathResolver(import.meta.url)}svgs/${i}/`
    2021-05-29 03:35:13.751 ERROR 9096 --- [        webpack] dev-webpack                              : |   );
    2021-05-29 03:35:13.751 ERROR 9096 --- [        webpack] dev-webpack                              : | });
    2021-05-29 03:35:13.751 ERROR 9096 --- [        webpack] dev-webpack                              :  @ ../target/frontend/generated-flow-imports.js 56:0-59
    2021-05-29 03:35:13.751  INFO 9096 --- [         task-2] dev-webpack                              : Started webpack-dev-server. Time: 5471ms
vaadin-flow web-component webpack
2 Answers
user_72378840

This might not be appropriate in this case that looks like it's a problem with webpack itself and no direct relationship to Vaadin, but I'll still briefly answer the other part of this question:

How do I solve this loader issue since the Vaadin framework is the one that takes care of the webpack in the application

Vaadin manages how webpack is started and does also provide a comprehensive default configuration for webpack. The application developer does still have control over the used configuration.

This works so that there's a webpack.generated.js file that is generated by Vaadin and a webpack.config.js file that can be used by the application. By default, the application configuration is simply importing the generated configuration and using it as-is, but it's also possible to supplement the imported configuration before exporting it for webpack to use.

user_23769540
Related