Vaadin flow (14) 框架如何解决"You may need an appropriate loader to handle this file type"？

Question

我正在使用 Vaadin 14。我在使用插件时遇到问题。我该如何解决这个加载器问题，因为 Vaadin 框架负责处理应用程序中的 webpack。

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

Answer 1

它来自 webpack，它似乎是一个 open issue. The causes of that issue was identified and recently added to the proposals of the new release for webpack. It could arrive somewhere in 2022 as stated here Class Fields (Private instance methods and accessors

您可以摆脱 webpack 失败的那个插件，或者尝试一些建议的快速修复 like this one here

Answer 2

在这种情况下这可能不合适，看起来这是webpack本身的问题，与Vaadin没有直接关系，但我仍然会简要回答这个问题的另一部分：

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

Vaadin 管理 webpack 的启动方式，并为 webpack 提供全面的默认配置。应用程序开发人员仍然可以控制所使用的配置。

这是有效的，因此有一个由 Vaadin 生成的 webpack.generated.js 文件和一个可供应用程序使用的 webpack.config.js 文件。默认情况下，应用程序配置只是简单地导入生成的配置并按原样使用它，但也可以在导出配置以供 webpack 使用之前补充导入的配置。

Vaadin flow (14) 框架如何解决"You may need an appropriate loader to handle this file type"？

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

webpack

web-component

vaadin-flow