0 1 "[rollup-plugin-dynamic-import-variables] Unexpected token" vite js error when building

JavaScript
#1

I am building vite js app (click here to download code) and when I try and build with the command:

npm run build

I get an error like:

[rollup-plugin-dynamic-import-variables] Unexpected token (25:51)
file: /home/alein10/Desktop/Sam Coding/test-vite/src/index.ts:25:51
error during build:
SyntaxError: Unexpected token (25:51)
    at Parser.pp$4.raise (/home/alein10/Desktop/Sam Coding/test-vite/node_modules/rollup/dist/shared/rollup.js:16685:13)
    at Parser.pp.unexpected (/home/alein10/Desktop/Sam Coding/test-vite/node_modules/rollup/dist/shared/rollup.js:14195:8)
    at Parser.pp.semicolon (/home/alein10/Desktop/Sam Coding/test-vite/node_modules/rollup/dist/shared/rollup.js:14172:64)
    at Parser.pp$1.parseExpressionStatement (/home/alein10/Desktop/Sam Coding/test-vite/node_modules/rollup/dist/shared/rollup.js:14651:8)
    at Parser.pp$1.parseStatement (/home/alein10/Desktop/Sam Coding/test-vite/node_modules/rollup/dist/shared/rollup.js:14386:24)
    at Parser.pp$1.parseBlock (/home/alein10/Desktop/Sam Coding/test-vite/node_modules/rollup/dist/shared/rollup.js:14667:21)
    at Parser.pp$1.parseStatement (/home/alein10/Desktop/Sam Coding/test-vite/node_modules/rollup/dist/shared/rollup.js:14351:34)
    at Parser.pp$1.parseIfStatement (/home/alein10/Desktop/Sam Coding/test-vite/node_modules/rollup/dist/shared/rollup.js:14496:26)
    at Parser.pp$1.parseStatement (/home/alein10/Desktop/Sam Coding/test-vite/node_modules/rollup/dist/shared/rollup.js:14340:31)
    at Parser.pp$1.parseBlock (/home/alein10/Desktop/Sam Coding/test-vite/node_modules/rollup/dist/shared/rollup.js:14667:21)

I am running ubuntu with node version 15.9.0 and npm version 7.5.3 .

I don’t know what is going on. Can anyone help? Thank you a lot in advance!

#2

You have an unexpected token at line 25, character 51 of your index.ts file.

What is the code around that area? Please show us that code with about 5 lines both above and below the line 25, to help give us some context about the situation.

#3

I said you could download the code at: https://downgit.github.io/#/home?url=https://github.com/Alien10123/Learn-Alien-Code/tree/main/dev

#4

That link is giving me a 503 error, but I think you’ll find that people are (rightly, IMHO) reluctant to download unknown code. It is generally better to post code here or use a service like Codepen.

#5

I downloaded the zip file and there is no index.ts file in there.

I recommend that you start investigating why that index.ts file can’t be found.

#7

On my pc the index.ts is right in the files. I don’t know why it’s not working for you

#8

Have you tried downloading the zip file yourself?
Do you see the index.ts file anywhere in the zip?

#9

There a problem with the server right now. It’s happening to other website. I think it’s with the fastify cache.

#10

Just show us what your index.ts code is from lines 20 to 30. We can help to advise you from there.
Please make it clear to us which of them is the troubled line 25 line too.

#11

According to Github, this is the code block relevant:

fetch(
`/${url.split("/")[1]}/${insertFile[key].innerHTML
.replace(/file_start\s/g, "")
.replace(/\sfile_end/g, "")
.replace(/\s/g, "")}`
)
.then((data) => {
if (data.status !== 200) {
return "The File Cannot Be Found!";
}
return data.text();
})
.then((text) => (insertFile[key].innerHTML = text));

(Line position indicated is the second last closing parenthesis on the last then clause.)

#12

So that’s lines 13 to 25, with the last line being line 25 with the trouble. Thanks.

1 Like
#14

The code seems good. It doesn’t seem to be a JavaScript problem, and is quite likely a vite build configuration issue instead.

There is a potential solution to this at https://gitmemory.com/issue/vitejs/vite/2330/807859552

#15

Thanks for the website. I did what the only answer said to do and install @rollup/plugin-dynamic-import-vars and then configure it as a plugin in the config but I still get the error. Here is what The config looks like now:

// vite.config.js
import legacy from "@vitejs/plugin-legacy";
import dynamicImportVars from "@rollup/plugin-dynamic-import-vars";
var fs = require("fs");

export default {
    plugins: [
        legacy({
            targets: "last 15 version",
            additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
        }),
    ],
    define: {
        course: fs.readFileSync("./course.json", "utf-8"),
    },
    build: {
        sourcemap: false,
        minify: "terser",
        manifest: true,
        assetsInlineLimit: 100000000,
        cssCodeSplit: false,
        rollupOptions: {
            preserveModules: false,
            output: {
                format: "iife",
            },
            plugins: [dynamicImportVars()],
        },
    },
};

Am I doing anything wrong? Thanks anyway.

#16

I’ll add a tag of Vite to this discussion, to help attract the interest of people that know that build system.

1 Like
#17

Thanks!