Import error

[azmeuk]

Hi. I tested to integrate the README sample in a project of mine, and rollup shows me this error:

[!] (plugin commonjs--resolver) Error: Unexpected token (Note that you need plugins to import files that are not Javascript)
node_modules/gridjs-svelte/gridjs.svelte (1:0)

<script >import { onMount, createEventDispatcher } from "svelte";

Strangely, if I copy gridjs.svelte into my project, and the import it with import Grid from "./gridjs.svelte", this solves the issue. So it seems that rollup tries to evaluate gridjs.svelte as javascript when I install it with npm, but I am not really sure why. This is the only svelte library that causes me this error. Is this issue due to my configuration, or to the way gridjs-svelte is exported?

I use node v16.

package.json

{
  "devDependencies": {
    "@babel/core": "^7.17.4",
    "@babel/preset-env": "^7.16.11",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^22.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.0.2",
    "@rollup/plugin-replace": "^4.0.0",
    "@testing-library/svelte": "^3.0.3",
    "@types/jest": "^27.0.1",
    "@typescript-eslint/eslint-plugin": "^5.21.0",
    "@typescript-eslint/parser": "^5.21.0",
    "autoprefixer": "^10.4.2",
    "babel-jest": "^27.5.1",
    "eslint": "^8.14.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-svelte3": "^3.4.0",
    "file-loader": "^6.2.0",
    "jest": "^27.5.1",
    "mini-css-extract-plugin": "^2.5.3",
    "node-sass": "^7.0.1",
    "prettier": "^2.5.1",
    "prettier-plugin-svelte": "^2.6.0",
    "rollup": "^2.67.2",
    "rollup-plugin-collect-sass": "^1.0.7",
    "rollup-plugin-copy": "^3.3.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-sass": "^1.2.2",
    "rollup-plugin-scss": "^3.0.0",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.2.1",
    "svelte-jester": "^2.3.2",
    "svelte-toggle": "^3.0.1",
    "ts-jest": "^27.1.3",
    "typescript": "^4.5.5"
  },
  "dependencies": {
    "@sentry/browser": "^6.17.9",
    "@sentry/tracing": "^6.17.9",
    "@toast-ui/editor": "^3.1.3",
    "@toast-ui/editor-plugin-color-syntax": "^3.0.2",
    "@zxcvbn-ts/core": "^0.3.0",
    "bootstrap": "^5.1.3",
    "bootstrap-grid": "^3.0.1",
    "datatables.net": "^1.11.4",
    "datatables.net-dt": "^1.11.4",
    "datatables.net-plugins": "^1.11.4",
    "jquery": "^3.4.1",
    "leaflet": "^1.7.1",
    "leaflet-fullscreen": "^1.0.2",
    "leaflet.markercluster": "^1.5.0",
    "okapibm25": "^1.3.2",
    "postcss": "^8.4.6",
    "rollup-plugin-postcss": "^4.0.0",
    "svelte": "^3.46.3",
    "svelte-switch": "^0.0.5"
  }
  }
}

rollup.config.js

import svelte from "rollup-plugin-svelte"
import { terser } from "rollup-plugin-terser"
import scss from "rollup-plugin-scss"
import livereload from "rollup-plugin-livereload"
import resolve from "@rollup/plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"
import copy from "rollup-plugin-copy"
import autoprefixer from "autoprefixer"
import postcss from "rollup-plugin-postcss"
import replace from "@rollup/plugin-replace"
import json from "@rollup/plugin-json"

const production = !process.env.ROLLUP_WATCH

export default [
    {
        input: "./front/svelte/public/main.js",
        output: {
            sourcemap: true,
            format: "iife",
            name: "app",
            file: "./web/static/build/public-bundle.js",
            inlineDynamicImports: true,
        },
        plugins: [
            json(),
            resolve({
                jsnext: true,
                main: true,
                browser: true,
            }),
            commonjs(),
            svelte({
                include: [
                    "./front/svelte/public/**",
                    "./front/svelte/common/**",
                    "./node_modules/svelte/**",
                ],
            }),
            replace({
                exclude: "./node_modules/**",
                "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "production"),
                preventAssignment: true,
            }),
            postcss({
                extract: true,
                minimize: production,
            }),
            copy({
                targets: [
                    {
                        src: "node_modules/bootstrap/dist/**/*",
                        dest: "web/static/build/vendor/bootstrap",
                    },
                    {
                        src: "node_modules/bootstrap-grid/dist/**/*",
                        dest: "web/static/build/vendor/bootstrap-grid",
                    },
                    {
                        src: "node_modules/jquery/dist/**/*",
                        dest: "web/static/build/vendor/jquery",
                    },
                ],
            }),
            !production && livereload("web"),
            production && terser(),
        ],
    },
    {
        input: "./front/svelte/admin/main.js",
        output: {
            sourcemap: true,
            format: "iife",
            name: "app",
            file: "./web/static/build/admin-bundle.js",
            inlineDynamicImports: true,
        },
        plugins: [
            json(),
            resolve({
                jsnext: true,
                main: true,
                browser: true,
            }),
            commonjs(),
            svelte({
                include: [
                    "./front/svelte/admin/**",
                    "./front/svelte/common/**",
                    "./node_modules/svelte/**",
                ],
            }),
            replace({
                exclude: "./node_modules/**",
                "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "production"),
                preventAssignment: true,
            }),
            postcss({
                extract: true,
                minimize: production,
            }),
            copy({
                targets: [
                    {
                        src: "node_modules/bootstrap/dist/**/*",
                        dest: "web/static/build/vendor/bootstrap",
                    },
                    {
                        src: "node_modules/bootstrap-grid/dist/**/*",
                        dest: "web/static/build/vendor/bootstrap-grid",
                    },
                    {
                        src: "node_modules/jquery/dist/**/*",
                        dest: "web/static/build/vendor/jquery",
                    },
                    {
                        src: "node_modules/datatables.net/js/**/*",
                        dest: "web/static/build/vendor/datatables",
                    },
                    {
                        src: "node_modules/datatables.net-dt/js/**/*",
                        dest: "web/static/build/vendor/datatables",
                    },
                    {
                        src: "node_modules/datatables.net-dt/css/**/*",
                        dest: "web/static/build/vendor/datatables",
                    },
                    {
                        src: "node_modules/datatables.net-dt/images/**/*",
                        dest: "web/static/build/vendor/images",
                    },
                    {
                        src: "node_modules/datatables.net-plugins/i18n/**/*",
                        dest: "web/static/build/vendor/datatables/i18n",
                    },
                ],
            }),
            !production && livereload("web"),
            production && terser(),
        ],
    },
    {
        input: "./front/sass/public.scss",
        output: {
            dir: "./web/static/build",
        },
        plugins: [
            scss({
                output: "./web/static/build/public.css",
                processor: (css) => postcss([autoprefixer]),
                processor: (css) => {
                    const searchRegExp = /\/front\//g
                    const replaceWith = "/static/build/"
                    return css.replace(searchRegExp, replaceWith)
                },
                watch: "./front/sass",
            }),
            copy({
                targets: [
                    { src: "./front/fonts/*", dest: "./web/static/build/fonts/" },
                    { src: "./front/img/*", dest: "./web/static/build/img/" },
                ],
            }),
        ],
    },
    {
        input: "./front/sass/admin.scss",
        output: {
            dir: "./web/static/build",
        },
        plugins: [
            scss({
                output: "./web/static/build/admin.css",
                processor: (css) => postcss([autoprefixer]),
                processor: (css) => {
                    const searchRegExp = /\/front\//g
                    const replaceWith = "/static/build/"
                    return css.replace(searchRegExp, replaceWith)
                },
                watch: "./front/sass",
            }),
            copy({
                targets: [
                    { src: "./front/fonts/*", dest: "./web/static/build/fonts/" },
                    { src: "./front/img/*", dest: "./web/static/build/img/" },
                ],
            }),
        ],
    },
]

[iamyuu]

can you create a repo for reproducing the issues instead?