"Error: Unexpected token" when building

[jeromecc]

Hello!
I'm getting this error with Node v16.14.0. Any idea where it could come from?
Thanks!

node_modules/svelte-flatpickr/src/Flatpickr.svelte (1:0)
1: <script>
   ^
2:   import { onMount, createEventDispatcher } from 'svelte';
3:   import flatpickr from 'flatpickr';
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/home/elkcloner/git/doctoctocbot/src/conversation/svelte/scroll/node_modules/rollup/dist/shared/rollup.js:160:30)
    at Module.error (/home/elkcloner/git/doctoctocbot/src/conversation/svelte/scroll/node_modules/rollup/dist/shared/rollup.js:12438:16)
    at Module.tryParse (/home/elkcloner/git/doctoctocbot/src/conversation/svelte/scroll/node_modules/rollup/dist/shared/rollup.js:12826:25)
    at Module.setSource (/home/elkcloner/git/doctoctocbot/src/conversation/svelte/scroll/node_modules/rollup/dist/shared/rollup.js:12729:24)
    at ModuleLoader.addModuleSource (/home/elkcloner/git/doctoctocbot/src/conversation/svelte/scroll/node_modules/rollup/dist/shared/rollup.js:22203:20)

Here is my package.json:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear"
  },
  "devDependencies": {
    "@rollup/plugin-alias": "^3.1.9",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "@rollup/plugin-replace": "^3.1.0",
    "@rollup/plugin-typescript": "^8.3.0",
    "@smui/chips": "^6.0.0-beta.14",
    "rollup": "^2.67.2",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.46.4"
  },
  "dependencies": {
    "bootstrap": "^4.6.1",
    "date-fns": "^2.28.0",
    "dayjs": "^1.10.7",
    "flatpickr": "^4.6.9",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.34",
    "sirv": "^1.0.19",
    "sirv-cli": "^2.0.0",
    "svelte-flatpickr": "^3.2.6",
    "svelte-i18n": "^3.3.13"
  }
}

Despite this error message, my Datepickr component seems to be working fine...

[jacobmischka]

What does your rollup config look like? You'll likely want to have the svelte plugin before the others like in the example:

https://github.com/jacobmischka/svelte-flatpickr/blob/master/test/rollup.config.js#L44-L80

[jeromecc]

Here is my rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import copy from 'rollup-plugin-copy';
import json from '@rollup/plugin-json';
import css from 'rollup-plugin-css-only';


const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			// enable run-time checks when not in production
			include: 'src/**/*.svelte',
			//preprocess: autoPreprocess(),
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			},
			// we'll extract any component CSS out into
			// a separate file - better for performance
		}),
		json(),
		css({ output: 'bundle.css' }),
		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),
		//postcss(postcssOptions()),
		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser(),
		copy({
			targets: [
				{
					src: 'public/*',
					dest: '../../static/conversation/scroll/'
				}
			]
		}),
		copy({
			targets: [
				//	{ 
				//    src: 'node_modules/bootstrap/dist/**/*', 
				//    dest: 'public/vendor/bootstrap' 
				//},
				{
					src: 'node_modules/flatpickr/dist/themes/light.css',
					dest: 'public/vendor/flatpickr/'
				},
				{
					src: 'node_modules/flatpickr/dist/flatpickr.css',
					dest: 'public/vendor/flatpickr/'
				},
			]
		}),
	],
	watch: {
		clearScreen: false
	}
};

[jacobmischka]

Ah yeah, remove that include entry from your svelte plugin config. You want it to compile dependencies if they exist, most svelte components publish like this one to intentionally have you bundle it yourself.

[jeromecc]

Thanks for your time. Problem solved. :))