Rollup Plugin - Unexpected Token

[valecss]

Describe the bug

I am trying to build a web-app that I am developing with vite, vue and pinia, during the development, using the script npm run dev or yarn dev I get no error. But when I have to build the web-app, I get a rollup-plugin error, which redirects to a line of code that doesn't seem to make sense. I've also tried deleting the contents of the file, and it builds perfectly, but if I paste the same content into another file, it goes back to not working.

The line of code (reported in the logs below, or 146:20) is this:

143.  // Remove labels from
144.  document.querySelectorAll("#datasetLength label").forEach((el) => {
145.    el.remove();
146.  });
         ^

which is strange, because there is no col 20 on this line.

I can't upload the whole project to stackblitz (because there are more than 150 files), but I only upload the main files, including the one where I get the error.

There is already an issue with this "subject" only I could not solve it according to my requirement, I also tried to import and implement rollup-plugin-dynamic-import-variables in the configuration in the vite.config.js file (as depicted below), but it seems useless, also because it should be already implemented by default by vite.js

import dynamicImportVars from "@rollup/plugin-dynamic-import-vars";

...
build: {
  outDir: "dist",
  rollupOptions: {
    plugins: [dynamicImportVars()],
  }
},

Reproduction

https://stackblitz.com/edit/vitejs-vite-gbyfmu?file=vite.config.js,index.html,components.d.ts,package.json,src%2Frouter%2Findex.js,src%2Fviews%2Fbackend%2FAdminsView.vue,src%2FApp.vue,src%2Fmain.js&terminal=dev

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-7600K CPU @ 3.80GHz    
    Memory: 935.12 MB / 15.94 GB
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.12.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.44)
  npmPackages:
    @vitejs/plugin-vue: ^2.2.4 => 2.3.3
    vite: ^2.8.6 => 2.9.9

Used Package Manager

npm

Logs

PS E:\Documents\Projects\msl\admin> npm run build
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> oneui-vue-edition@2.0.0 build
> vite build --debug

  vite:config bundled config file loaded in 744.09ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',        
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',     
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:watch-package-data',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   envDir: './',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object], [Object] ] },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: 'E:/Documents/Projects/msl/admin/vite.config.js',
  vite:config   configFileDependencies: [ 'E:/Documents/Projects/msl/admin/vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: 'E:/Documents/Projects/msl/admin',
  vite:config   base: '/',
  vite:config   publicDir: 'E:\\Documents\\Projects\\msl\\admin\\public',
  vite:config   cacheDir: 'E:\\Documents\\Projects\\msl\\admin\\node_modules\\.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isWorker: false,
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: {
  vite:config     VITE_API_URL: 'https://api.mslsrl.it',
  vite:config     BASE_URL: '/',
  vite:config     MODE: 'production',
  vite:config     DEV: false,
  vite:config     PROD: true
  vite:config   },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   }
  vite:config } +23ms
vite v2.9.9 building for production...
✓ 27 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (146:20)
file: E:/Documents/Projects/msl/admin/src/views/backend/AdminsView.vue:146:20
error during build:
SyntaxError: Unexpected token (146:20)
    at Parser.pp$4.raise (E:\Documents\Projects\msl\admin\node_modules\rollup\dist\shared\rollup.js:19844:13)
    at Parser.pp$9.unexpected (E:\Documents\Projects\msl\admin\node_modules\rollup\dist\shared\rollup.js:17138:8)
    at Parser.pp$9.expect (E:\Documents\Projects\msl\admin\node_modules\rollup\dist\shared\rollup.js:17132:26)
    at Parser.pp$5.parseExprList (E:\Documents\Projects\msl\admin\node_modules\rollup\dist\shared\rollup.js:19711:12)
    at Parser.pp$5.parseSubscript (E:\Documents\Projects\msl\admin\node_modules\rollup\dist\shared\rollup.js:19073:25)
    at Parser.pp$5.parseSubscripts (E:\Documents\Projects\msl\admin\node_modules\rollup\dist\shared\rollup.js:19030:24)
    at Parser.pp$5.parseExprSubscripts (E:\Documents\Projects\msl\admin\node_modules\rollup\dist\shared\rollup.js:19014:21)
    at Parser.pp$5.parseMaybeUnary (E:\Documents\Projects\msl\admin\node_modules\rollup\dist\shared\rollup.js:18977:17)
    at Parser.pp$5.parseExprOps (E:\Documents\Projects\msl\admin\node_modules\rollup\dist\shared\rollup.js:18904:19)
    at Parser.pp$5.parseMaybeConditional (E:\Documents\Projects\msl\admin\node_modules\rollup\dist\shared\rollup.js:18887:19)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[valecss]

resolve: {
  alias: {
    "@": fileURLToPath(new URL("./src", import.meta.url)),
  },
},

I don't think that's the problem, in any case this part of code in the vite.config.js file should enable me dynamic imports via the @, which links to the src/ folder.

Also, as I said before, if I delete the contents of the src/views/backend/AdminsView.vue file, the build runs correctly

[bluwy]

Hmm yeah it was a brainfart that I thought the dynamic imports was interfering it, as it only happens when interpolating variables in dynamic imports. Sorry for the fuss, re-opening.

[bluwy]

I don't see anything strange with AdminsView.vue to tell what's the issue, other than line 92:

fetch("${import.meta.env.VITE_API_URL}/api/admin/remove?id=" + id, {

not using backticks, but I doubt that's the issue. I can't build the repro too to test it out so I'm not sure what else to do. But since you have your local project in hand, you can try slowly removing parts of the code in AdminsView.vue and see what fixes it.

[valecss]

oh my god.... I don't want to believe it... apparently that was the mistake, I just didn't notice that I used " instead of `... Thank you very much, it was an attention error then, hahahah. Very kind guys ;)