-
Notifications
You must be signed in to change notification settings - Fork 781
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: Rollup: Parse Error unexpected token #4063
Comments
I have two initial thoughts/questions here:
Thanks! |
Hi @rwaskiewicz, thanks for the reply. We have a monorepo using npm workspaces and within it a self contained Stencil component library. |
That's exactly it. Similar structure,
The most similar reported issue I found so far was #3875. In this case the culprit was a duplicated import from a barrel file and the file directly - so the error message didn't seem to be closely related unfortunately. In an effort to confirm it's none of that, I removed all components except for one, rebuilt, checked the components.d.ts file for duplicate imports to no avail. I want to reiterate that the initial build always works, only upon making changes this issue appears. Thanks for your efforts! |
Hi @rwaskiewicz! I have found out what is causing this. It seems to be related to our functional component unit test. There is no specified way in the Documentation on how to go about this, so we ended up following the approach taken here. As soon as I remove these tests everything is back to normal. The reproduction can be found here: https://github.com/mhoritani/stencil-reproduction-4063 Do you have any suggestions on why this has only popped up now or even ideas on how to write these tests in a better way? |
That's interesting, as I wasn't able to reproduce the issue with the reproduction case alone, perhaps something to do with how it's related to NX? Video following the steps provided:
I couldn't say for sure without additional information, for instance, did you recently update Stencil or any other libraries? If this recently began in your repo, is there a way you could |
We tested this further and found that out of 5 people, only 2 can reproduce it with the provided case as well as within our codebase. Sidenote: We don't use NX, just npm workspaces.
I tried going back a couple of releases and the issue persisted for me so I don't know if going down that road any further would get us anywhere. That being said, since it will be rather difficult tracking down variables on different machines causing this, I'm wondering if it would make more sense to focus on the topic of how to properly test functional components? Is there any way Stencil recommends on tackling this? It seems a bit odd to go with our current approach with the Super interested if you have any inputs here! Thanks a bunch for the support. |
We can pursue that route - in that case, I can update the name of this issue to better reflect that, get it ingested into our backlog, and move it over to the You are correct in that our documentation for testing Functional Components is lacking - beyond a section the describes the differences between class components and functional components we have nearly nothing in with regards to testing. In the interim, I think the pattern that you're using is nearly there - I would recommend wrapping your functional component in the output of your testing-focused diff --git a/src/components/common/my-functional-component/__tests__/conditional-wrapper.spec.tsx b/src/components/common/my-functional-component/__tests__/conditional-wrapper.spec.tsx
index 9d80e09..c2dda5f 100644
--- a/src/components/common/my-functional-component/__tests__/conditional-wrapper.spec.tsx
+++ b/src/components/common/my-functional-component/__tests__/conditional-wrapper.spec.tsx
@@ -3,7 +3,11 @@ import { newSpecPage, SpecPage } from '@stencil/core/testing';
import { MyFunctionalComponent } from '../my-functional-component';
@Component({ tag: 'my-functional-component-test' })
-class MyFunctionalTestComponent {}
+class MyFunctionalTestComponent {
+ render() {
+ return <MyFunctionalComponent someProp="🚽"></MyFunctionalComponent>;
+ }
+}
describe('my-functional-component', () => {
let page: SpecPage;
@@ -11,10 +15,10 @@ describe('my-functional-component', () => {
beforeEach(async () => {
page = await newSpecPage({
components: [MyFunctionalTestComponent],
- template: () => <MyFunctionalComponent someProp="🚽"></MyFunctionalComponent>,
+ template: () => <my-functional-component-test></my-functional-component-test>,
});
});
it('should render', async () => {
- expect(page.root).toEqualHtml(`<div>someProp is 🚽</div>`);
+ expect(page.root.firstChild).toEqualHtml(`<div>someProp is 🚽</div>`);
});
}); If you have anything specific you're looking for us to document, please feel free to add suggestions via comments on this issue. Thanks! |
it is definitely a duplicate of my #3875 , which you can close, this one being much better documented. In my situation I had to remove a file from the exports of my custom components library.
this testing file contains some functions for unit and e2e tests, so it starts with |
@goulu we excluded our spec test via tsconfig.json et voila the "unexcepted token" problem is gone. |
This will be fixed with #5722 which enables functional components to be rendered in diff --git a/package.json b/package.json
index 51634df..f6cd181 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
"generate": "stencil generate"
},
"dependencies": {
- "@stencil/core": "2.22.2"
+ "@stencil/core": "4.17.2-dev.1714673314.7926a13"
},
"devDependencies": {
"@ionic/prettier-config": "^2.0.0",
diff --git a/src/components/common/my-functional-component/__tests__/conditional-wrapper.spec.tsx b/src/components/common/my-functional-component/__tests__/conditional-wrapper.spec.tsx
index 9d80e09..93eda23 100644
--- a/src/components/common/my-functional-component/__tests__/conditional-wrapper.spec.tsx
+++ b/src/components/common/my-functional-component/__tests__/conditional-wrapper.spec.tsx
@@ -1,16 +1,13 @@
-import { h, Component } from '@stencil/core';
+import { h } from '@stencil/core';
import { newSpecPage, SpecPage } from '@stencil/core/testing';
import { MyFunctionalComponent } from '../my-functional-component';
-@Component({ tag: 'my-functional-component-test' })
-class MyFunctionalTestComponent {}
-
describe('my-functional-component', () => {
let page: SpecPage;
beforeEach(async () => {
page = await newSpecPage({
- components: [MyFunctionalTestComponent],
+ components: [],
template: () => <MyFunctionalComponent someProp="🚽"></MyFunctionalComponent>,
});
});
|
The fix for this PR was included in today's v4.18.0 release |
Prerequisites
Stencil Version
2.22.0
Current Behavior
HMR breaks build because of an unexpected Token.
Expected Behavior
I would like the HMR to work.
System Info
No response
Steps to Reproduce
stencil build --dev --watch --serve
.tsx
fileI am having a hard time reproducing this in a clean repo but any information on where I could start investigating would be highly appreciated.
Code Reproduction URL
Additional Information
No response
The text was updated successfully, but these errors were encountered: