3

I'm trying to build a Vue.js 3 (beta) application, using Rollup.

  • Vue.js 3.0.0-beta.15
  • Rollup 2.18.1
  • rollup-plugin-vue 6.0.0-beta.6

I get this:

$ npx rollup -c rollup.config.prod.js 

src/main.js → public/dist/...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/App.vue?vue&type=style&index=0&id=7ba5bd90&scoped=true&lang.css (2:0)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:5154:30)
    at Module.error (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:9592:16)
    at tryParse (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:9506:23)
    at Module.setSource (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:9890:30)
    at ModuleLoader.addModuleSource (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17749:20)
    at ModuleLoader.fetchModule (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17803:9)
    at async Promise.all (index 2)
    at ModuleLoader.fetchStaticDependencies (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17827:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17804:9)
    at async Promise.all (index 3)
    at ModuleLoader.fetchStaticDependencies (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17827:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (/Users/asko/Git/GroundLevel-es6-firebase-web/node_modules/rollup/dist/shared/rollup.js:17804:9)
    at async Promise.all (index 0)

My Rollup config:

import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import fileSize from 'rollup-plugin-filesize';
import vue from 'rollup-plugin-vue';

const plugins = [
  resolve(),

  vue({
    template: {
      isProduction: true,
      //compilerOptions: { preserveWhitespace: false }
    },
    //css: false,   // note: 'false' extracts styles as a separate '.css' file
  }),

  replace({ 'process.env.NODE_ENV': '"production"' }),

  fileSize()
];

export default {
  plugins,
  input: 'src/main.js',

  output: {
    dir: 'public/dist/',
    format: 'esm',

    globals: {
      firebaseui: "firebaseui"
    },

    sourcemap: true   // have source map even for production
  }
};

Have searched hard for similar cases, but not found a solution, yet. Does anyone know, what this might be about?

Sources: Sources: https://github.com/akauppi/GroundLevel-es6-firebase-web/tree/pr-prod

akauppi
  • 17,018
  • 15
  • 95
  • 120
  • 1
    Use [`vite`](https://github.com/vitejs/create-vite-app) to save yourself the trouble of configuring Rollup. It internally uses Rollup, preconfigured for you, but custom Rollup options can be configured. Run `npm init vite-app my-app` to create your project. – tony19 Jul 01 '20 at 01:24
  • @tony19 Actually, I do.. However, for production I would like to deploy ES6 modules, unbundled and Vite currently (default config) bundles everything, including scripts in my index.html. I ... dislike that. – akauppi Jul 01 '20 at 14:40
  • 1
    interim fix: add rollup-plugin-scss https://stackoverflow.com/questions/62384191/rollup-vue-and-buble-unexpected-token-in-scss-file/62625441#62625441 – akauppi Jul 01 '20 at 14:44

0 Answers0