Getting Error While hitting " npm install "@builder.io/sdk-svelte" "

What are you trying to accomplish
*e.g. I want to create a svelte project using “npm create svelte@latest routing-app” but when i am trying to hit "npm install “@builder.io/sdk-svelte” ", I am getting errors, i have tried reinstalling node as well as visual studio. Checked that the full control is selected. still getting same error.

Code stack you are integrating Builder with
*e.g. Svelte

Error Message
npm warn cleanup Failed to remove some directories [
npm warn cleanup [
npm warn cleanup ‘D:\JunTest\routing-app\node_modules\@jridgewell\sourcemap-codec’,
npm warn cleanup [Error: EPERM: operation not permitted, rmdir ‘D:\JunTest\routing-app\node_modules@jridgewell\sourcemap-codec\dist\types’] {
npm warn cleanup errno: -4048,
npm warn cleanup code: ‘EPERM’,
npm warn cleanup syscall: ‘rmdir’,
npm warn cleanup path: ‘D:\JunTest\routing-app\node_modules\@jridgewell\sourcemap-codec\dist\types’
npm warn cleanup }
npm warn cleanup ],
npm warn cleanup [
npm warn cleanup ‘D:\JunTest\routing-app\node_modules\@sveltejs\kit’,
npm warn cleanup [Error: EPERM: operation not permitted, rmdir ‘D:\JunTest\routing-app\node_modules@sveltejs\kit\src\types’] {
npm warn cleanup errno: -4048,
npm warn cleanup code: ‘EPERM’,
npm warn cleanup syscall: ‘rmdir’,
npm warn cleanup path: ‘D:\JunTest\routing-app\node_modules\@sveltejs\kit\src\types’
npm warn cleanup }
npm warn cleanup ],
npm warn cleanup [
npm warn cleanup ‘D:\JunTest\routing-app\node_modules\@sveltejs’,
npm warn cleanup [Error: EPERM: operation not permitted, rmdir ‘D:\JunTest\routing-app\node_modules@sveltejs\kit\src\runtime’] {
npm warn cleanup errno: -4048,
npm warn cleanup code: ‘EPERM’,
npm warn cleanup syscall: ‘rmdir’,
npm warn cleanup path: ‘D:\JunTest\routing-app\node_modules\@sveltejs\kit\src\runtime’
npm warn cleanup }
npm warn cleanup ],
npm warn cleanup [
npm warn cleanup ‘D:\JunTest\routing-app\node_modules’,
npm warn cleanup [Error: EPERM: operation not permitted, rmdir ‘D:\JunTest\routing-app\node_modules@builder.io\sdk-svelte\lib\browser\components\block\components’] {
npm warn cleanup errno: -4048,
npm warn cleanup code: ‘EPERM’,
npm warn cleanup syscall: ‘rmdir’,
npm warn cleanup path: ‘D:\JunTest\routing-app\node_modules\@builder.io\sdk-svelte\lib\browser\components\block\components’
npm warn cleanup }
npm warn cleanup ]
npm warn cleanup ]
npm error code 1
npm error path D:\JunTest\routing-app\node_modules\isolated-vm
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c prebuild-install || (node-gyp rebuild --release -j max && node-gyp clean)
npm error cl : command line warning D9025: overriding ‘/std:c++20’ with ‘/std:c++17’ [D:\JunTest\routing-app\node_modules\isolated-vm\build\nortti.vcxproj]
npm error cl : command line warning D9025: overriding ‘/GR-’ with ‘/GR’ [D:\JunTest\routing-app\node_modules\isolated-vm\build\nortti.vcxproj]
npm error serializer_nortti.cc
npm error cl : command line warning D9025: overriding ‘/std:c++20’ with ‘/std:c++17’ [D:\JunTest\routing-app\node_modules\isolated-vm\build\isolated_vm.vcxproj]
npm error cl : command line warning D9025: overriding ‘/GR-’ with ‘/GR’ [D:\JunTest\routing-app\node_modules\isolated-vm\build\isolated_vm.vcxproj]
npm error external_copy.cc
npm error D:\JunTest\routing-app\node_modules\isolated-vm\src\isolate\generic\error.h(84,80): error C2440: ‘specialization’: cannot convert from ‘v8::Localv8::Value (__cdecl *)(v8::Localv8::String,v8::Localv8::Value)’ to ‘v8::Localv8::Value (__cdecl *)(v8::Localv8::String)’ [D:\JunTest\routing-app\node_modules\isolated-vm\build\nortti.vcxproj]
n

Hey @sid_jain_21 It looks like there’s an issue with permissions and some potentially conflicting library versions during the install process. Here are several steps you can follow to try and resolve this:

Steps to Resolve the Issue:

  1. Clear the npm Cache:
    Often, npm’s cache can contain old or corrupted files. Clear the cache using:

    npm cache clean --force
    
  2. Run Command as Administrator:
    Sometimes the issue is related to permissions. Try running your terminal or command prompt as an administrator.

  3. Check Windows Defender or Antivirus Software:
    Windows Defender or other antivirus software can sometimes lock files. Make sure that these tools are not blocking or influencing npm’s install process. Temporarily disabling them could help.

  4. Delete node_modules and package-lock.json:
    Completely remove the node_modules directory and package-lock.json file from your project and try installing dependencies again.

    rm -rf node_modules
    rm package-lock.json
    npm install
    
  5. Install Dependencies with Yarn:
    Sometimes using an alternative package manager like Yarn can resolve the issue.

    npm install -g yarn
    yarn
    
  6. Ensure Node and NPM are Updated:
    Make sure you’re using the latest version of Node.js and npm.

    npm install -g n
    n latest
    npm install -g npm
    
  7. Avoid Path Length Limitations in Windows:
    Windows has a path length limitation that sometimes causes issues. You can try enabling long paths in the Windows Group Policy Editor or using a path closer to the root, such as C:\dev.

  8. Manual Isolation:
    If the issue persists, it might be worth trying to isolate and install the problematic packages individually:

    npm install @builder.io/sdk @builder.io/utils -save
    npm install @builder.io/sdk-svelte -save
    

Example of Integrating Builder.io in a SvelteKit Project:

Once you’ve resolved the installation issue, here’s how you can integrate Builder.io into your SvelteKit project:

  1. Initialize Your SvelteKit Project:

    npm create svelte@latest my-svelte-project
    cd my-svelte-project
    npm install
    
  2. Install the Builder.io SDK:
    Assuming npm is working fine now:

    npm install @builder.io/sdk-svelte
    
  3. Setup Builder in Your SvelteKit Project:

    Create a builder.ts file in your project:

    // src/lib/builder.ts
    import { builder } from '@builder.io/sdk';
    builder.init('YOUR_PUBLIC_API_KEY');
    
    export default builder;
    
  4. Create a Svelte Component to Use Builder:

    <!-- src/routes/+page.svelte -->
    <script context="module">
    export async function load() {
        const content = await builder.getAll('page', {
            userAttributes: {
              urlPath: '/',
            },
        }).toPromise();
    
        return { props: { content } };
    }
    </script>
    
    <script>
      export let content;
    
      // Import the BuilderComponent which will render model's content
      import { BuilderComponent } from '@builder.io/sdk-svelte';
    </script>
    
    <BuilderComponent model="page" content={content} />
    
  5. Run Your Development Server:

    npm run dev
    

    If everything is set up correctly, your SvelteKit app should be able to render the content fetched from Builder.io.

These steps should help you resolve the initial npm issues and get started with integrating Builder.io into your SvelteKit project. Remember to check the documentation for more details and examples.