如何解决为什么 VS Code 认为导入有效,而 WebPack 不认为?
我很确定这完全与我使用的 WebPack 版本 ("webpack-cli": "3.3.11"
) 有关,但我想确定我是正确的,然后再进行另一次升级 WebPack 的调试之旅(我尝试将其升级到5 但如果没有配置文件它就无法工作,我只是针对阅读手册说明扩大了限制)。
在 tsconfig.base.js
我有这个:
"baseUrl": ".","paths": {
"@/*": ["src/*"]
}
(使用单独的 tsconfig.base.json
的原因在我下面链接的问题中。)
然后是这个:
import { RegistrationStepManager } from "@/helpers";
在文件 ./src/some/path/RegistrationStepper.tsx
中。
使用 CRA 和 npm start
运行 react-scripts v4.0.3
显示错误而不会崩溃:
Failed to compile.
./src/some/path/RegistrationStepper.tsx
Module not found: Can't resolve '@/helpers' in '/my-path/my-project/src/some/other/path'.
VS Code 工具提示和自动完成显示所有内容都导入良好,没有红色波浪线,只有一些可忽略的警告。
我认为 "@/*"
的别名不能很好地工作,但是,由于 VS Code 与它配合得很好,我认为这可能是一个错误。
遇到此故障时,TS 如何与 WebPack 配合使用?我是否必须升级到 WebPack 5?
同一天的另一个问题,来自我,在同一个代码上,也许它在这里也很相关:How can I import an enum through an intermediate TS file?。
谢谢。
更新 1
我阅读了 this 并且我将在没有 CRA 的情况下从 CRA 迁移到 WebPack,因为我正在从事的项目不仅仅是为了玩。如果可以,请给我推荐一份从 CRA 迁移到 WebPack 的指南。我认为这个问题开头的问题是关于一些缺少的 WebPack 配置。我已经有一个旧的 WebPack 配置文件,它可能会导致部分问题。
解决方法
我有一个未实际使用的 WebPack 配置文件。我实际上是在使用 CRA。所以我开始使用 react-app-rewired 和 WebPack v4 作为中间解决方案,直到我开始使用“纯”WebPack。在 config-overrides.js
中,我输入:
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
webpack: function(config,env) {
return {
...config,resolve: {
...config.resolve,plugins: [
...config.resolve.plugins,new TsconfigPathsPlugin({
extensions: [".js",".jsx",".ts",".tsx"],}),],},};
},};
迁移到 react-app-rewired 并进行此更改后,Failed to compile.
错误消失了。这也解决了 How can I import an enum through an intermediate TS file? 中的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。