Sandpack v2 private NPM package not being imported properly (angular)

[Phil-XDS]

Bug report

I'm able to load private NPM packages by following documentation outlined here: https://sandpack.codesandbox.io/docs/guides/private-packages

I setup the Verdaccio NPM proxy as outlined here: https://github.com/codesandbox/sandpack/tree/main/examples/custom-npm-registry (also found a typo, it should be configPath: "./config.yaml" instead of config_path: "./config.yaml" at least in the version I used 6.0.0-6-next.45).

My local Sandpack loads without errors with all dependencies configured as such (standard angular boilerplate):

  customSetup={{
    npmRegistries: [
      {
        enabledScopes: ["@mycompany"],
        limitToScopes: true,
        registryUrl: "http://localhost:4000",
      },
    ],
    dependencies: { 
      "@mycompany/design-system-angular": "~1.0.53",
      "@mycompany/design-system-css": "~1.0.23",
      "@angular/animations": "~12.2.0",
      "@angular/common": "~12.2.0",
      "@angular/compiler": "~12.2.0",
      "@angular/core": "~12.2.0",
      "@angular/forms": "~12.2.0",
      "@angular/platform-browser": "~12.2.0",
      "@angular/platform-browser-dynamic": "~12.2.0",
      "@angular/router": "~12.2.0",
      "rxjs": "~6.6.0",
      "tslib": "^2.3.0",
      "zone.js": "~0.11.4",
      "core-js": "^3.6.5",
    }
  }}
  files={files} 
  theme={atomDark} 
  template="angular"
  options={{ 
    resizablePanels: true, 
    editorHeight: "99vh"
  }}
>
</Sandpack>

Packages affected

• [2.0.17] sandpack-client
• [2.0.17] sandpack-react

Description of the problem

Sandpack itself doesn't produce any visible errors, nor does the rendered app, when importing any components/modules from the private package (i.e. import { ButtonModule } from '@mycompany/design-system-angular';, Sandpack returns an empty HTML page like this one: https://2-0-17-sandpack.codesandbox.io/button.component.html but again, no "errors" visible anywhere

even when I just try to @import the SCSS: https://2-0-17-sandpack.codesandbox.io/@mycompany/design-system-css/dist/style.min.css

Which results in my application having these weird DOM elements, i.e. with the XdsButton component:

The strange part is that some components even have some of the generated elements that can only come from the angular module itself, for example <xds-icon icon="leaf"></xds-icon> outputs <xds-icon _ngcontent-ykx-c1="" icon="leaf" ng-reflect-icon="leaf" id="xds-b242bf1a" class="xds-icon-ri xds-icon"> But again with the strange content of https://2-0-17-sandpack.codesandbox.io/icon.component.html being added inside the component itself.

Any idea of what I might have missed?

[Phil-XDS]

To add, even just the CSS package is enough to trigger the same issue. When removing all references to the private angular component library. I get the same issue when doing this:

@import '@mycompany/design-system-css/dist/style.min.css'; to the app.component.scss file of a basic angular template.

the package is being loaded properly from what I can see on the locally hosted NPM proxy:

info <-- ::1 requested 'GET /@mycompany/design-system-css/-/design-system-css-1.0.23.tgz'
http <-- 200, user: null(::1), req: 'GET /@mycompany/design-system-css/-/design-system-css-1.0.23.tgz', bytes: 0/0
http <-- 200, user: null(::1), req: 'GET /@mycompany/design-system-css/-/design-system-css-1.0.23.tgz', bytes: 0/243963

I also tried with a self-hosted bundler running on localhost:8000, but when I start Sandpack, I get the following errors in console:

zone.js:2707 GET http://localhost:8000/@mycompany/design-system-css/dist/style.min.css 404 (File not found)
index.js:27 
Failed to load @mycompany/design-system-css/dist/style.min.css

Here is what I see on the self-hosted bundler side:

127.0.0.1 - - [25/Feb/2023 14:57:34] "GET /sass-transpiler.2640e48c.worker.js HTTP/1.1" 200 -
127.0.0.1 - - [25/Feb/2023 14:57:34] "GET /static/browserfs12/browserfs.min.js HTTP/1.1" 200 -
127.0.0.1 - - [25/Feb/2023 14:57:34] "GET /0.sass-transpiler.2640e48c.worker.js HTTP/1.1" 200 -
127.0.0.1 - - [25/Feb/2023 14:57:34] "GET /sass-transpiler.2640e48c.worker.js.map HTTP/1.1" 200 -
127.0.0.1 - - [25/Feb/2023 14:57:35] code 404, message File not found
127.0.0.1 - - [25/Feb/2023 14:57:35] "GET /@mycompany/design-system-css/dist/style.min.css HTTP/1.1" 404 -
127.0.0.1 - - [25/Feb/2023 14:57:35] "GET /static/browserfs12/browserfs.min.js.map HTTP/1.1" 200 -
127.0.0.1 - - [25/Feb/2023 14:57:35] "GET /0.sass-transpiler.2640e48c.worker.js.map HTTP/1.1" 200 -

[danilowoz]

Hey, interresting issue! Another user also reported this error, and I'll try to make a fix to this issue as soon as possible. However I can't make any promise about when. I'll keep you posted.

Thank you for reporting this issue

[danilowoz]

BTW, have you tried to run this sandbox on codesandbox.io? If you have a Pro account, you can setup the NPM registry and also run private stuff there. So I was wondering if this error also happen there, or only on Sandpack

[Phil-XDS]

I have not tried the online version just yet, but I do have a Pro account so I'll give it a try.

I did make some progress in troubleshooting, turns out it has something to do with how the bundler interprets the angular templateUrl option on a component library.

In the packaged library, if I use a component that uses template instead of templateUrl it works fine. Quick example:

This works:

@Component({
  selector: 'xds-hr',
  template: `<hr id="{{id}}Hr" class="xds-hr {{ size ? ' xds-hr-' + size : '' }}">`
})

But doing this won't work:

@Component({
  selector: 'xds-hr',
  templateUrl: './hr.component.html'
})

Where the hr.component.html is a file that contains <hr id="{{id}}Hr" class="xds-hr {{ size ? ' xds-hr-' + size : '' }}">

Something to do with how the Sandpack/Codesandox bundler interprets these type of relative path maybe? I've tried using absolute path and other variations of the relative path hr.component.html instead of ./hr.component.html but that didn't work either.

Again, this is on the actual packaged library that I'm importing not on the Sandpack app side.

At this point I'm not entirely if the fault lies with Sandpack or the CodeSanbox bundler itself? Although that doesn't fully explain why I can't seem to import the much more straightforward CSS library using a private package either?

[danilowoz]

@DeMoorJasper, would you happen to know what going on here?

[Phil-XDS]

Is Sandpack using parcel as a bundler? After a quick look, there seems to be an issue with templateUrl and Parcel that would cause this issue, like this one from 5 years ago: https://github.com/parcel-bundler/parcel/issues/1461 but the solution to that particular one is not a usable one if we don't fully control the private packages being imported