Cannot Install Private NPM Packages in WebContainer - 404 Errors Despite Valid Authentication

[joao-lim4]

Describe the bug

Description

When attempting to install private NPM packages within a WebContainer environment, I'm consistently receiving 404 errors, despite the package being available and functioning correctly in conventional project setups outside the container.

Environment

• Container type: WebContainer
• NPM version: 10.2.3
• Node.js version: 18.20.3
• Package: @myprivatepackage/package-name
• "@webcontainer/api": "^1.5.1-internal.9",

Steps to Reproduce

1. Set up a WebContainer environment
2. Configure .npmrc with appropriate authentication token
3. Run npm install @myprivatepackage/package-name
4. Observe 404 error response

import { useMemo } from "react";
import { packageJsonTemplate } from "@template/packageJson";
import { viteConfigTemplate } from "@template/viteConfig";
import { mainJsxTemplate } from "@template/mainJsx";
import { appJsxTemplate } from "@template/appJsx";
import { appCssTemplate, indexCssTemplate } from "@template/styles";
import { indexHtmlTemplate } from "@template/indexHtml";
import useEditorStore from "@dynamicPlayground/zustand/stores/Editor";

const useProjectTemplates = () => {
  const { content } = useEditorStore(["content"]);

  return useMemo(
    () => ({
      "package.json": {
        file: {
          contents: JSON.stringify(packageJsonTemplate, null, 2),
        },
      },

      ".npmrc": {
        file: {
          contents: `org:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=npm-token-here`,
        },
      },

      "vite.config.js": {
        file: {
          contents: viteConfigTemplate,
        },
      },

      src: {
        directory: {
          "main.jsx": {
            file: {
              contents: mainJsxTemplate,
            },
          },
          "App.jsx": {
            file: {
              contents: appJsxTemplate(content),
            },
          },
          "App.css": {
            file: {
              contents: appCssTemplate,
            },
          },
          "index.css": {
            file: {
              contents: indexCssTemplate,
            },
          },
        },
      },

      "index.html": {
        file: {
          contents: indexHtmlTemplate,
        },
      },
    }),
    [content],
  );
};

export default useProjectTemplates;

What I've Already Tried

I've exhausted multiple authentication approaches, all resulting in the same 404 error:

1. Using a project-specific .npmrc file with the authentication token:

@myprivatepackage:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${NPM_TOKEN}

1. Creating a global .npmrc file in the user directory
2. Passing the token inline with the install command:

npm install @myprivatepackage/package-name --registry=https://registry.npmjs.org/ --auth-token=my-auth-token

1. Using environment variables:

NPM_TOKEN=my-auth-token npm install @myprivatepackage/package-name

1. Using the legacy authentication format in .npmrc:

@myprivatepackage:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_auth=base64encodedcredentials

Expected Behavior

The private package should install successfully, just as it does in conventional environments outside the container.

Actual Behavior

Consistently receiving 404 errors when attempting to install the private package, suggesting that the authentication is not being properly recognized or applied within the WebContainer environment.
Error output:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@myprivatepackage/package-name
npm ERR! 404 
npm ERR! 404  '@myprivatepackage/package-name@latest' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a tarball, folder, http url, or git repository.

Additional Context

• The same authentication token works correctly in non-container environments
• Other public packages install without issues in the WebContainer
• I have verified that my token has the appropriate permissions to access the private package

Could there be specific limitations or security constraints within WebContainers that prevent proper authentication for private NPM packages? Any guidance on how to properly authenticate for private package installation in this environment would be greatly appreciated

Link to the blitz that caused the error

https://webcontainers.io/

Steps to reproduce

npm install error

Expected behavior

Hope everything goes well with my npm install

Parity with Local

• I have run the project in my local machine and I could not reproduce the issue.

Screenshots

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response