bug: import statements from dist-custom-elements getting passed to commonjs and errors in SSR Applications like NextJS.

[roman-telia]

Prerequisites

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

Stencil Version

2.11.0

Current Behavior

after we updated from dist-custom-elements-bundle to dist-custom-elements we are running into issues with NextJS when using our commonjs react wrappers in NextJS app, when running next js or building it throws error that can't use import statement outside of a module.

Expected Behavior

It should work the same way as before with dist-custom-elements-bundle, that there wasn't imported es6 module files in commonjs react output.

Steps to Reproduce

create build output, install new package version in Next js project, try to run the next app after installing latest package and you will get this error.

Code Reproduction URL

https://github.com/roman-telia/Next-vocads-playground

Additional Information

No response

[rwaskiewicz]

@roman-telia Thanks for the issue! I don't seem to have access to that reproduction url - would you be able to give me access (or create a separate public repo)?

[roman-telia]

Hi rwaskiewicz, I have created a GitHub repository as a public one, as you requested.

https://github.com/roman-telia/Next-vocads-playground

[rwaskiewicz]

Hey @roman-telia, apologies for taking so long to get back to you. I'm having trouble replicating this working with dist-custom-elements-bundle, would you mind giving me a hand here to see if we can get to the bottom of this please?

I took a look at the reproduction case, but unfortunately I can't use it as I don't believe I have access to the design system it's using. It looks like a locally generated tarball is being used here, which makes recreating the reproduction case on my system a little difficult.

To try to work around that, I spun up a NextJS application and Stencil component library:

tree -L 1
.
├── my-app // next library
└── my-lib  // stencil library

With the Stencil library, I replaced my output targets with dist-custom-elements-bundle to see how you have it working today (or attempt to at the very least). The entirety of the stencil.config.ts file can be found below:

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'my-lib',
  outputTargets: [
    {
      type: 'dist-custom-elements-bundle',
    }
  ],
};

I then built and tarball'ed my library - npm run build && npm pack and attempted to simply import it in my Next.js pages/_app.tsx file:

import '../styles/globals.css'
import type { AppProps } from 'next/app'
// @ts-ignore
import {MyComponent} from 'my-lib/dist/components/my-component';

function MyApp({ Component, pageProps }: AppProps) {
  customElements.define('my-component', MyComponent);
  return <Component {...pageProps} />
}

export default MyApp

And get the same error you reported when I try to build the Next app with npm run build

➜  my-app git:(main) ✗ npm run build                   

> build
> next build

info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data .node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

/Users/ryan/workspaces/sandbox/stencil-issues/3176/my-app/node_modules/my-lib/dist/components/my-component.js:1
import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Cannot use import statement outside a module

I'm surely missing something here. Can you please advise?

[nilssonja]

This is something that my team has been experiencing for some time when using the dist-custom-elements output target. Our setup is as follows:

We have our "main" library that uses both the dist output target and the dist-custom-elements output target. Since we use both output targets, our package.json for the library set's the module, es2015, es2017, etc to the files generated by the dist output target. This means that consumers of our main library by default use the lazy-loaded dist components and must manually import the dist-custom-elements output from dist/components/<component_name>.js if they instead want to manually define and consume our components.

Next we are using the React output target to generate a React library that consumes the dist-custom-elements output and NOT the dist output. We do this for a number of reasons, namely we have applications with strict bundle size concerns and wanted a way to ensure ALL code we ship to them is tree-shakable all the way down to the individual web components.

Onto the crux of the issue: Because the dist-custom-elements output target does not transform into cjs, we found React consumers complaining of the SyntaxError: Cannot use import statement outside a module error within their jest tests. We've worked around this in the meantime by suggesting using transformIgnorePatterns in their jest/babel config. However, we are now seeing new Next.JS applications spin up who are running into the issue described above.

Unlike with the dist output target, is it up to us to come up with a custom bundling solution for dist-custom-elements separate from Stencil's build process for teams who need to consume them in the cjs format?

[christian-bromann]

Duplicate of #5831