Search code examples
vue.jswebpackidephpstorm

PhpStorm 'Cannot resolve symbol' problem with multiple Vue.js projects installed


Root project structure:

-node_modules/
 ...
-package.json
-package-json.lock
-vue2/
 ...
-vue3/
 -node_modules/
 -src/
  App.vue
  main.ts
  shims-vue.d.ts
 -package.json
 -tsconfig.json
 -webpack.config.js

So I have two different Vue.js versions installed using npm workspace. At the project root dir there is a main node_modules which has all the common packages used by both Vue.js versions. And there is separate node_modules in each version dir with packages related only to that version of Vue.js

Running builds and functionality of both versions runs fine, but there is a problem with PhpStorm IDE and Vue.js version 3 components.

IDE shows:

Cannot resolve symbol 'defineComponent'

and marks it in red at the defineComponent part in import { defineComponent } from 'vue';. Although build runs without any warnings or errors.

App.vue:

<template>
  <div></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  methods: {},
});
</script>

shims-vue.d.ts:

declare module '*.vue' {
  import { defineComponent } from 'vue';
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "preserveSymlinks": true,
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "types": [
      "webpack-env"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js:

const Encore = require('@symfony/webpack-encore');

Encore.setOutputPath('../public/build/v3/')
  .setPublicPath('/build/v3')
  .addEntry('main-v3', './src/main.ts')
  .enableSingleRuntimeChunk()
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .enableSassLoader()
  .enableTypeScriptLoader((config) => {
    config.configFile = 'vue3/tsconfig.json';
  })
  .enableVueLoader(() => {}, {
    runtimeCompilerBuild: true,
    version: 3,
  });

const configV3 = Encore.getWebpackConfig();
configV3.name = 'v3';
Encore.reset();

module.exports = [configV3];

I tried invalidating cache and completely re-creating all node_modules directories by deleting them and running clean npm install. Result is the same.

Vue.js version 2 has every Vue function shown just fine, nothing wrong with that. Maybe something is wrong with the configs for Vue 3?

Also if I Ctrl + click the 'vue' part from import { defineComponent } from 'vue'; I get to the vue3/node_modules/vue/dist/vue.d.ts file, but it doesn't understand any of the import things from vue. For example onMounted is shown in red also.


Solution

  • I managed to fix this by using latest version of yarn instead of npm.

    It looks like it installs the packages in different way.