Rollup-plugin-vue: Error: Unexpected token

[gluons]

Expected behavior

Bundle without error.

Actual behavior

Get Error: Unexpected token

[!] Error: Unexpected token
src\components\PlainHello.vue?rollup-plugin-vue=styles.0.css (2:4)
1:
2: div span[data-v-408f8e39] {
       ^
3:   color: red;
4: }

Steps to reproduce the behavior

I've created a repo to repro this issue.

git clone https://github.com/gluons/rollup-plugin-vue-issue-209.git
cd rollup-plugin-vue-issue-209
yarn
yarn build

---

I try to create Vue library with Pug + TypeScript + SCSS and bundle with rollup-plugin-vue but this issue stop me. 😥

I've tried with rollup-plugin-typescript and rollup-plugin-typescript2 but it doesn't seem to work.

I've created multiple Vue components for testing this issue but all of them get this error.

1. A component with TypeScript as script
2. A component with TypeScript as script and Pug as template
3. A component with TypeScript as script and SCSS as style
4. A component with TypeScript as script, Pug as template and SCSS as style
5. A component with just normal HTML, JavaScript and CSS

[znck]

If you use css: false, then you need a plugin to handle css. Use rollup-plugin-css-only.

[gluons]

@znck Thank you. It works!

But I face the same problem as #204 and ezolenko/rollup-plugin-typescript2#78 if I use rollup-plugin-typescript2 instead of rollup-plugin-typescript.

Anyway, that isn't related to this issue (#209). You can close it now.

It should be great if you can reopen #204. (Or I should raise new issue?) (Or it's rollup-plugin-typescript2 issue?)

[znck]

rollup-plugin-typescript2 tries to read contents from the file path which in our case has a query param on it.

[gluons]

Thank you very much. It's clear.

So sad that rollup-plugin-typescript doesn't generate declaration. So, I have to use rollup-plugin-typescript2.

rollup-plugin-typescript doesn't get update long time. Seem like unmaintained.

I have no idea what I should do. 😅

[znck]

rollup-plugin-typescript2 should use the content provided instead of reading from the path. I'll co-ordinate with rollup-plugin-typescript2's author to get this resolved.

[gluons]

[heynext]

is this resolved?

[znck]

The issue is being tracked at https://github.com/ezolenko/rollup-plugin-typescript2/issues/78

[iliyaZelenko]

Hi, I had such a error.

Error: Unexpected token (Note that you need plugins to import files that are not
JavaScript)

Package rollup-plugin-postcss helped me.

postcss({
  extract: true
}),
vue({
  css: false
}),

But I'm not sure that styles are not included from js-bundle because I saw styles in my bundle:

If I put the css: true, then I get the styles but in this form (inject function):

@znck Can you clarify, please?

[znck]

When css: false, rollup-plugin-vue converts styles to import statements so other plugins (eg. rollup-plugin-postcss) can handle styles. Not it depends on the plugin (here rollup-plugin-postcss) if it extracts or not. https://github.com/vuejs/rollup-plugin-vue/blob/0b74c4a469baf83bfde89add1d2f7c7205ebf733/src/index.ts#L413-L432

When css: true, rollup-plugin-vue inlines CSS and injects to head at runtime.

[iliyaZelenko]

@znck Thanks for the clarification. I thought the styles are generally removed from the bundle if css: false The problem was that I had several configs (umd, esm, cjs) and I generated .css in only one config (postcss extract property with true only in one config).

Configs in which I did not set postcss extract property, there are styles left.

I had to generate the same style file for each config.

postcss({
  // same as true but path where to save
  extract: join(distDir, 'main.css'),
  minimize: true
}),

That is somehow stupid, but it works.