bug: Rollup Error Functional Components (declaration of @Component class)

[RobinSchuler]

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

4.0.3

Current Behavior

We upgraded from Stencil core 3.2.x to 4.0.3. Our previous FuncionalComponent test setup was like here: https://github.com/mhoritani/stencil-reproduction-4063/blob/main/src/components/common/my-functional-component/tests/conditional-wrapper.spec.tsx

After updating and running 'stencil build' we encountered the below Error stackstrace. Hours of trial and error and digging in the following 2 issues later we finally reproduced the error and it´s caused by the dummy component definition within the .spec file.

Outsourcing the dummy definition into a separate file and importing in the test got rid of the issue.

https://github.com/ionic-team/stencil/issues/4063 https://github.com/ionic-team/stencil/issues/3875

> [email protected] build
> stencil build

[28:30.2]  @stencil/core
[28:30.3]  v4.0.3 🎾
[28:31.0]  build, app, prod mode, started ...
[28:31.1]  transpile started ...
[28:32.1]  transpile finished in 994 ms
[28:32.1]  copy started ...
[28:32.1]  generate lazy + source maps started ...
[28:32.1]  copy finished (3 files) in 98 ms
[28:38.2]  generate lazy + source maps finished in 6.17 s

[ ERROR ]  Rollup: Parse Error: node_modules/@stencil/core/compiler/stencil.js:194818:17
           Unexpected token

 L194817:  TaskAttributionTiming: C,
 L194818:  Text: C, 
 L194819:  TextEvent: C,

[28:38.2]  build failed in 7.17 s

Expected Behavior

Some ideas:

• Build succeeding like before
• Better error description as to what went wrong
• Better documentation as how FunctionalComponents should be testet

System Info

happens on Windows as well 
 
     System: node 18.16.0
    Platform: darwin (22.4.0)
   CPU Model: Apple M1 Pro (10 cpus)
    Compiler: /Users/robinschuler/dev/stencil-test/test/node_modules/@stencil/core/compiler/stencil.js
       Build: 1690830769
     Stencil: 4.0.3 🎾
  TypeScript: 5.0.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.19.2

Steps to Reproduce

Reproduce:

• check out the repository and run "npm run build" or do the following steps

• npm init stencil

• select component

• npm i

• npm run build => succeeds

add a FunctionalComponent and a test file that declares a wrapping component:

import { Component, h } from '@stencil/core';
import { newSpecPage } from '@stencil/core/testing';
import { FuncComp } from './func-comp';

@Component({ tag: 'dummy-component' })
class Dummy {}

describe('func comp test', async () => {
  const page = await newSpecPage({
    components: [Dummy],
    template: () => <FuncComp />,
  });
  expect(page).toBeTruthy();
});

• npm run build => rollup error

Code Reproduction URL

https://github.com/RobinSchuler/StencilTest4.0

Additional Information

No response

[rwaskiewicz]

Hey @RobinSchuler 👋

Thanks for the issue + reproduction case! Taking a closer look, it appears this issue may have been introduced in Stencil 3.3.0 - can you you do me a favor and let me know if you upgrading to 3.3.0 also demonstrates this issue? Thanks!

[RobinSchuler]

Hey @rwaskiewicz it indeed appeared in 3.3.0 (see screenshot below). That´s probably the reason why we stayed on 3.2 (and I forgot it until you mentioned it).

[rwaskiewicz]

Thanks! It looks like this was introduced in 0b6621f21634b7498de0666a872ffcacc93fef87. I'll get this labeled to get it ingested into our internal backlog. Thanks again!

[christian-bromann]

@RobinSchuler mind providing a reproducible example that uses any Stencil v4? Your provided project doesn't allow me to reproduce this anymore.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!