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.
