Solve the problem of unresolved dependency tree: .NET Core 3.1 and Vue.js

Question

I'm trying to build my application but I'm getting the following error

npm ERR! code ERESOLVE
  npm ERR! ERESOLVE unable to resolve dependency tree
  npm ERR!
  npm ERR! While resolving: [email protected]
  npm ERR! Found: [email protected]
  npm ERR! node_modules/vue
  npm ERR!   vue@"^2.6.12" from the root project
  npm ERR!
  npm ERR! Could not resolve dependency:
  npm ERR! peer vue@">=3.0.0" from [email protected]
  npm ERR! node_modules/vue-chartkick
  npm ERR!   vue-chartkick@"^1.0.0" from the root project
  npm ERR!
  npm ERR! Fix the upstream dependency conflict, or retry
  npm ERR! this command with --force, or --legacy-peer-deps
  npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

What ideas am I missing

Error MSB3073: Command "npm install" exited with code 1. The content of the csproj file I created to build is

<ItemGroup>
    <PackageReference Include="VueCliMiddleware" Version="3.1.2" />
</ItemGroup>
<PropertyGroup>
    <SpaRoot>clientapp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>

<ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>

<!--<ItemGroup>
    <Folder Include="wwwroot\" />
</ItemGroup>-->
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build">
    <!-- Build Target:  Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
        <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Exec Command="npm --version" ContinueOnError="true">
        <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js and npm are required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
</Target>

<Target Name="EnsureNodeModulesInstalled" BeforeTargets="Build" Inputs="package.json" Outputs="packages-lock.json" Condition="!Exists('$(SpaRoot)node_modules')">
    <!-- Build Target: Restore NPM packages using npm -->
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target>

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- Build Target: Run webpack dist build -->
    <Message Importance="high" Text="Running npm build..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build --modern" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
        <DistFiles Include="$(SpaRoot)dist\**" />
        <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
            <RelativePath>%(DistFiles.Identity)</RelativePath>
            <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
            <ExcludeFromSingleFile>True</ExcludeFromSingleFile>
        </ResolvedFileToPublish>
    </ItemGroup>
</Target>

Answer 1

From the error, it looks like you have Vue 2 installed, but the package vue-chartckick is looking for Vue 3.

Additionally, the package readme states:

So the solution is to use the recommended version of the package or upgrade Vue to version 3.

Answer 2

Effective is deletion %appdata%\Roaming\npm-cache folder local node_modules folder