bug: Issues with loader file when using React components in NextJS

[janforland]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.19.2

Current Behavior

We have created a React component library using Stencil. This library is called FormDS. But, we are experiencing some issues using this library in a Next.js application. This issue seems to be related to the SSR of Next:

Error occurred handling / Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/jan.forland/source/private/next/formds-test/node_modules/@formds/core/loader' is not supported resolving ES modules imported from /Users/jan.forland/source/private/next/formds-test/node_modules/@formds/core-react/index.js
Did you mean to import @formds/core/loader/index.cjs.js?
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:425:17)
    at moduleResolve (node:internal/modules/esm/resolve:1006:10)
    at defaultResolve (node:internal/modules/esm/resolve:1214:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/jan.forland/source/private/next/formds-test/node_modules/@formds/core/loader',
  page: '/'

Our stencil.config.ts file looks like this:

import { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil/react-output-target';
import { sass } from '@stencil/sass';

export const config: Config = {
  namespace: 'formds-core',
  taskQueue: 'async',
  plugins: [sass()],
  testing: {
    collectCoverage: true,
    coverageDirectory: '../../coverage',
    coverageReporters: ['cobertura'],
    reporters: [
      'default',
      ['jest-junit', { outputDirectory: 'reports', outputName: 'report.xml' }],
    ],
  },
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
      dir: 'components',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'docs-vscode',
      file: 'dist/html.html-data.json',
    },
    {
      type: 'www',
      serviceWorker: undefined, // disable service workers
    },
    {
      type: 'dist-hydrate-script',
    },

    reactOutputTarget({
      componentCorePackage: '@formds/core',
      proxiesFile: '../../../libs/formds-core-react/src/components/proxies.ts',
      includeDefineCustomElements: true,
      excludeComponents: ['formds-input'],
    }),
  ],
};

This issue seems to be related to the loader file that the dist output target produces. This is an auto-generated file from Stencil. The first lines of this file looks like this:

import React, { createElement as createElement$1 } from 'react';
import { jsx } from 'react/jsx-runtime';
import 'react-dom';
import { defineCustomElements } from '@formds/core/loader';

And the directory @formds/core/loader contains these files:

If we directly edit the index.js file in the @formds/core-react folder in node_modules from what it is auto-generated as, to this:

import { defineCustomElements } from '@formds/core/loader/index.cjs.js

Then everything works just fine.

Also, this problem only occurs on the server, not in client. Meaning, if I load a page in Next, and edit the page code to implement a component from my Stencil React components; then, when the HMR has run, everything will seemingly look just fine. It's only when you manually refresh the browser, and therefore force the server to run, that the error occurs.

Expected Behavior

We would expect the produced React components to just work in Next.js, without having to manully edit the loader file extension in the import statement from the react package.

Steps to Reproduce

1. Create a Stencil project with React as an output target
2. Export the core- and React package produced by Stencil to a npm repo
3. Create a new Next.js project using the create-next-app command
4. Install the npm packages in the Next.js project
5. Import a component from the Stencil React library
6. Run npm run dev
7. Refresh web browser to make sure that you trigger the server side rendering part of Next
8. The error will be displayed in the console

Code Reproduction URL

https://github.com/janforland/stencil-next-bug/blob/main/package.json

Additional Information

Sadly, the @formds packages are hosted on a private repo, so you will not be able to run the Github project :(

[christian-bromann]

@janforland thanks for raising the issue!

We have been working on support for Declarative Shadow DOM in Stencil in #5792 and will provide support for using Stencil in Next.js applications as a next step.

[christian-bromann]

closing in favor of #5831