[Bug]: SidebarProvider that use useMediaQuery got error during building in Nuxtjs 4

[peeratchaikleebbua]

Reproduction

https://github.com/peeratchaikleebbua/nuxt-4-shadcn-vue-use-media-query-reproduction-bug.git

Describe the bug

• I develop frontend using Nuxtjs 4
• I run npx shadcn-vue@latest add sidebar
• it works fine in dev mode
• but after building it using nuxt build, I got error

` [nitro 1:20:43 AM] ERROR RollupError: node_modules/.cache/nuxt/.nuxt/dist/server/server.mjs (1132:110): Expected ',', got '$1' (Note that you need plugins to import files that are not JavaScript)

1130: function useMediaQuery(query, options = {}) { 1131: const { window: window$1 = defaultWindow, ssrWidth = /* @PURE / useSSRWidth() } = options; 1132: const isSupported = / @PURE */ useSupported(() => window$1 && "matchMedia" in window$1 && typeof window$1.matchMe... ^ 1133: const ssrSupport = shallowRef(typeof ssrWidth === "number"); 1134: const mediaQuery = shallowRef();

[1:20:43 AM] ERROR node_modules/.cache/nuxt/.nuxt/dist/server/server.mjs (1132:110): Expected ',', got '$1' (Note that you need plugins to import files that are not JavaScript)

at getRollupError (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
at ParseError.initialise (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/node-entry.js:14454:28)
at convertNode (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/node-entry.js:16337:10)
at convertProgram (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/node-entry.js:15577:12)
at Module.setSource (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/node-entry.js:17332:24)
at async ModuleLoader.addModuleSource (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/node-entry.js:21352:13)

[cause]: Expected ',', got '$1'

  at getRollupError (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
  at ParseError.initialise (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/node-entry.js:14454:28)
  at convertNode (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/node-entry.js:16337:10)
  at convertProgram (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/node-entry.js:15577:12)
  at Module.setSource (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/node-entry.js:17332:24)
  at async ModuleLoader.addModuleSource (/C:/peeratchai_eloc8/01_Work_Code/10_nuxt_frontend/node_modules/rollup/dist/es/shared/node-entry.js:21352:13)

[1:20:43 AM] ERROR node_modules/.cache/nuxt/.nuxt/dist/server/server.mjs (1132:110): Expected ',', got '$1' (Note that you need plugins to import files that are not JavaScript) `

I fix it by doing this in SidebarProvider

shadcn-vue const isMobile = useMediaQuery("(max-width: 768px)") my solution to fix const isMobile = import.meta.client ? useMediaQuery("(max-width: 768px)") : ref(false)

then I could run build using nuxt build successfully

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 17.18 GB / 31.73 GB
  Binaries:
    Node: 24.7.0 - C:\nvm4w\nodejs\node.EXE
    npm: 11.6.0 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Chrome: 141.0.7390.123
    Edge: Chromium (140.0.3485.54)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @vueuse/core: ^14.0.0 => 14.0.0 
    nuxt: ^4.2.0 => 4.2.0 
    reka-ui: ^2.6.0 => 2.6.0
    shadcn-nuxt: ^2.3.2 => 2.3.2
    vue: ^3.5.22 => 3.5.22

Contributes

• [ ] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests