Rollup parse error with typescript files

[juanmiguelbesada]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

When importing a library that contains typescript files, component do not compile, and Rollup parse error appears.

[51:34.0]  @stencil/core
[51:34.3]  v2.0.3 🍮
[51:37.4]  build, rollup-typescript-issue, dev mode, started ...
[51:37.4]  transpile started ...
[51:39.1]  transpile finished in 1.72 s
[51:39.1]  copy started ...
[51:39.1]  generate lazy started ...
[51:39.2]  copy finished (0 files) in 66 ms
[51:39.7]  generate lazy finished in 511 ms

[ ERROR ]  Rollup: Parse Error: ./node_modules/@google-web-components/google-chart/loader.ts:31:20
           Unexpected token (Note that you need plugins to import files that are not JavaScript)

     L30:  // Try to find existing loader script.
     L31:  let loaderScript: HTMLScriptElement|null = document.querySelector(
     L32:      'script[src="https://www.gstatic.com/charts/loader.js"]');

[51:39.7]  build failed, watching for changes... in 2.27 s

[51:39.7]  http://localhost:3333/

Expected behavior: Allow co import npm packages that contains typescript files

Steps to reproduce: Create a new project using npm init stencil, install library "@google-web-components/google-chart": "^4.0.0" and types "@types/google.visualization": "0.0.51".

  "dependencies": {
    "@google-web-components/google-chart": "^4.0.0",
    "@stencil/core": "^2.0.1"
  },
  "license": "MIT",
  "devDependencies": {
    "@types/google.visualization": "0.0.51"
  }

Import library in component using

import "@google-web-components/google-chart";

and render a sample chart

<google-chart data='[["Month", "Days"], ["Jan", 31]]'></google-chart>

Related code:

Example repository: https://github.com/juanmiguelbesada/stencil-typescript-rollup-issue Related issues in ionic forums: https://forum.ionicframework.com/t/rollup-parse-error/193177

Other information:

I guess is miss configuration in tsconfig or in stencil.config.ts but I tried evering I could figure, but nothing works. so maybe its a stencil bug

[popcorn245]

I also have this issue when upgrading from 1.9.2 to ^2.0.0. We use GraphQL Code Generator to bundle an SDK and it pulls in a TypeScript file.

Link to GraphQL Code Generator https://graphql-code-generator.com/

[vijaydeepak-tt]

i'm getting same error on building the app

[popcorn245]

I have resolved the issue by adding Typescript rollup plugin.

npm install --save-dev rollup-plugin-typescript

And these changes in stencil.config.ts

You can also fix issues with importing commonjs ect using this method of passing custom rollup plugins. Hope this helps someone.

[jwillmer]

@popcorn245 you made my day! Looked all over the internet for this.

After some investigation I noticed that your solution did not help. I did not get any build issues but the components did not use the same service. They instantiated there own version. What help me was creating a new service. and copying over the functions. I was adding more and more bits of the file that has compiling issues to try to get to a state where the new service fails. But now I have the exact same file twice (with different name) and referencing one is working, referencing the other fails. It is weird but at least I am back with a working build and a working service.

[christophsaile]

@popcorn245 thanks for your solution :) the solution worked for me but only with the "rollup-plugin-typescript" - package, "@rollup/plugin-typescript" did still fail for me.

[rwaskiewicz]

I'm unable to reproduce this locally with the provided reproduction case with the following libraries:

➜  stencil-typescript-rollup-issue git:(master) ✗ npm ls @types/google.visualization
└── @types/[email protected]

➜  stencil-typescript-rollup-issue git:(master) ✗ npm ls @google-web-components/google-chart
└── @google-web-components/[email protected]

➜  stencil-typescript-rollup-issue git:(master) ✗ npm ls @stencil/core
└── @stencil/[email protected]

After running npm install and npm run build/npm start, the build here seems to be passing. If there are any particular steps I'm missing here, please let me know!

[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!