I have a StencilJS component library I’m self hosting on GitLab. It’s a private repo.
I’m able to consume it within regular HTML, however I would like to use the StencilJS Web Components within a NextJS app. But I’m receiving errors.

Here’s the NextJS Error (it cannot find the loader module)

Server Error
Error: Cannot find module 'C:Usersxmynextprojectnode_modules@mypackageshared-componentsloaderindex.cjs'

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
createEsmNotFoundErr
node:internal/modules/cjs/loader (1181:15)
finalizeEsmResolution
node:internal/modules/cjs/loader (1169:15)
resolveExports
node:internal/modules/cjs/loader (591:14)
Module._findPath
node:internal/modules/cjs/loader (668:31)
Module._resolveFilename
node:internal/modules/cjs/loader (1130:27)

Here is my import

import { defineCustomElements } from '@mypackage/shared-components/loader';

And here is my use of defineCustomElements

  useEffect(() => {
    defineCustomElements();
  }, []);

I would simply like to use the element like this:

<ReactComponents/>
<my-stencil-component></my-stencil-component>

I tried referencing the cjs.js file, the index.js files at import, but it doesn’t work.

I tried using defineCustomElements outside of the react component

I have also tried updating my tsconfig.json to include paths

"paths": {
      "@mypackage/shared-components/loader": ["node_modules/@mypackage/shared-components/loader"]
    },