在 node_modules 文件夹中找不到模块（但文件存在）

Question

当我运行 yarn run watch（在我的 laravel 项目根目录中）时，它编译时没有错误。但是，如果我之后编辑一个文件，它会在终端中为我的resources 文件夹中的每个.ts 文件显示一个错误。 .vue 文件中的打字稿没有问题。另请注意，我所做的每项更改似乎也都已编译，因此换句话说，它可以工作...但错误消息仍保留在控制台中。

每个.ts 文件的错误是：

TS2307: Cannot find module '!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js' or its corresponding type declarations.

这个文件确实存在于我的node_module 文件夹中。

我用谷歌搜索了它，我发现远程接近我的问题的唯一东西是这个链接： https://github.com/vuejs/vue-loader/issues/634

但是那里建议的解决方案/解决方法都不适合我。

这是我的 tsconfig

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "experimentalDecorators": true,
    },
    "include": [
        "resources/js/**/*"
    ],
    "exclude": [
        "vendor",
    ]
}

我怀疑这是ts-loader 或vue-loader 中的配置问题或版本问题。

"ts-loader": "^8.2.0",
"typescript": "^4.3.2"
"vue-loader": "^15.7.0",

webpack 配置：

module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: "ts-loader",
                    options: {appendTsSuffixTo: [/\.vue$/]},
                    exclude: /node_modules/
                },
            ]
        },
        resolve: {
            extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
        }

请记住，我必须使用 8.2. 才能使 laravel-mix 能够使用它。我也使用vue-class-components 和vue-property-decator

Answer 1

如果没有，请将其添加到您的 webpack 配置中。

https://vue-loader.vuejs.org/guide/pre-processors.html#typescript

module.exports = {
  resolve: {
    // Add `.ts` as a resolvable extension.
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      // ... other rules omitted
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] }
      }
    ]
  },
  // ... plugin omitted
}

如果它不起作用 试试这个

将您的 typescript 版本更改为 "typescript": "~3.9.3",

Answer 2

这更像是一个健全的检查答案，我对 laravel 不太了解，抱歉。但是……

1. 如果“文件”存在，只要您可以在 node_modules 中找到它
2. 如果 tsconfig 或其他任何地方没有任何内容可以排除此解析行为
3. 如果该提交中的 file 确实存在并导出函数（并且已经存在很长时间）
4. 如果你确实在使用 yarn

我会绝对排除这一切的一件事是：yarn links 和yarn workspaces。这些可能由于某种未知原因而处于活动状态（可能不是后者，这对你来说很明显）并导致这种奇怪。

排除前者（杂散链接）的快速方法：

rm <YARN_CONFIG_DIR>/link/*

通常

rm ~/.config/yarn/link/*

Answer 3

我在几个项目中遇到了完全相同的问题，唯一的区别是我使用的是 Symfony 的 webpack-encore，但 tsconfig.json 略有不同，但我猜潜在的问题可能是相同的。

就我而言，我使用app.js 文件作为入口文件。将此更改为 app.ts 解决了此问题。我不知道为什么这很重要（也许任何人都可以详细说明）。