CODEWITHSUNDEEP
laraveltypescriptvue.js
sietse85
sietse85

Reputation: 1506

Cannot find module in node_modules folder (but file exist)

When i run yarn run watch (inside my laravel project root) it compiles with no errors. However if i edit a file afterwards it show an error in the terminal for every single .ts file in my resources folder. Typescript in .vue files has no issues. Also note that every change i make seems to be compiled as well, so in other words, it works... but the error messages stay in the console.

The error i am getting for each .ts file is:

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

This file does exist inside my node_module folder.

I have googled it an the only thing i found remotely close to my problem is this link: https://github.com/vuejs/vue-loader/issues/634

But none of the suggested solution/workarounds there work for me.

This is my tsconfig

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

I suspect it is either a configuration issue or a version problem in ts-loader or vue-loader.

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

webpack config:

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

Keep in mind i have to use 8.2. in order for laravel-mix to be able to work with it. Also i use vue-class-components and vue-property-decator

Upvotes: 4

Views: 2833

Answers (3)

Kevin Driessen
Kevin Driessen

Reputation: 366

I had the exact same issue in several projects, the only difference being that I'm using Symfony's webpack-encore with slightly different tsconfig.json, but I guess the underlying problem might be the same.

In my case I was using an app.js file as the entry-file. Changing this to app.ts resolved this issue. I have no clue why this matters (maybe anyone can elaborate).

Upvotes: 5

mik rus
mik rus

Reputation: 139

This is more of a sanity check answer, I do not know much about laravel, apologies. But...

  1. If the 'file' exists insofar as you can find it in node_modules
  2. if there is nothing in the tsconfig or anywhere else to rule out this resolution behavior
  3. if that file there in that commit does indeed exist and export a function (and has for a long time at that)
  4. if you are indeed using yarn

One thing I would definitely rule out in all this is: yarn links, and yarn workspaces. These could be active for some unknown reason (probably not the latter, which would be pretty obvious of you) and causing this weirdness.

One quick thing to rule the former (stray link) out:

rm <YARN_CONFIG_DIR>/link/*

typically

rm ~/.config/yarn/link/*

Upvotes: 0

Alireza Barzegar
Alireza Barzegar

Reputation: 61

Add this to your webpack config if you didn't.

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
}

if it does not work try this

change your typescript version to "typescript": "~3.9.3",

Upvotes: 0

Related Questions