Svelte (rollup) - Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)

Question

I am doing nothing to trigger this error. The app works fine one second, and doesn't the next.

Why is this happening? It is not due to the missing @rollup/plugin-json plugin because it worked previously without it.

Error

https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
path (imported by  path?commonjs-external)
http (imported by  http?commonjs-external)
net (imported by  net?commonjs-external)
url (imported by  url?commonjs-external)
[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
node_modules/mime-db/db.json (2:40)
1: {
2:   "application/1d-interleaved-parityfec": {
                                           ^
3:     "source": "iana"
4:   },
Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
    at error (/mnt/c/ivan/dev/lab/atlas-biotek/node_modules/rollup/dist/shared/rollup.js:5265:30)
    at Module.error (/mnt/c/ivan/dev/lab/atlas-biotek/node_modules/rollup/dist/shared/rollup.js:9835:16)
    at tryParse (/mnt/c/ivan/dev/lab/atlas-biotek/node_modules/rollup/dist/shared/rollup.js:9716:23)
    at Module.setSource (/mnt/c/ivan/dev/lab/atlas-biotek/node_modules/rollup/dist/shared/rollup.js:10142:19)
    at ModuleLoader.addModuleSource (/mnt/c/ivan/dev/lab/atlas-biotek/node_modules/rollup/dist/shared/rollup.js:18312:20)

Adding the plugin

npm i @rollup/plugin-json --save-dev

rollup.js.config

import json from "@rollup/plugin-json";

export default {
    plugins: [
        commonjs(),
        json(),      // <---- put after commonjs
    ]
}

Client error

Uncaught ReferenceError: require$$0$1 is not defined
    at main.js:5
(anonymous) @ main.js:5

UNCAUGHT

score 11 · Answer 1 · answered May 24 '22 at 16:54

If you are using typescript, I added the json() plugin after typescript:

File: rollup.config.js

import typescript from "rollup-plugin-typescript2";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import json from "@rollup/plugin-json";


const plugins = [
  typescript({
    tsconfig: "./tsconfig-build.json",
  }),
  json(), <<------------- HERE
  resolve(),
  commonjs(),
  replace({
    ...
    preventAssignment: true,
  }),
];

score 5 · Accepted Answer · edited Aug 17 '21 at 13:36

5

The problem was that I was importing a node module in the client due to autocomplete.

import { is } from "express/lib/request";

edited Aug 17 '21 at 13:36

TylerH

20,799
66
75
101

answered Aug 17 '21 at 13:28

Ivan

1,967
4
34
60

In my case vscode autocompleted ` import { width } from "tailwindcss/lib/plugins";` It took some time to figure it out. – Abishek P.Y Aug 18 '21 at 03:54
Then how do I use modules in the client without causing the error? – olaf Jul 08 '22 at 18:33

Svelte (rollup) - Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)

Error

Adding the plugin

Client error

2 Answers2