Vue cannot use the <script import>?-CodePudding

I was making a website in VueJS but it isn't working. App.vue at the top has

<script setup>
  import Page from './components/Page.vue';
  import Top from './components/Top.vue';
</script>

When I try to run dev mode: vite dev (npm run dev) or try to build it: vite (npm run build) it dosent like the last > at </script>

Note: I'm using JS instead of TS

It will not compile or even run the dev server.

ERROR:

Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
11:07:43 am [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
  Plugin: vite:import-analysis
  File: D:/Developing/denhamrocknet/home/denhamrockjs/src/App.vue
  1  |  <script setup>
  2  |    import Page from '.Page.vue';
  3  |    import Top from '.Top.vue';
  4  |  </script>
     |           ^
  5  |
  6  |
      at formatError (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:40862:46)
      at TransformContext.error (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:40858:19)
      at TransformContext.transform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:37530:22)
      at async Object.transform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:41111:30)
      at async loadAndTransform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:37373:29)
Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
11:08:30 am [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.     
  Plugin: vite:import-analysis
  File: D:/Developing/denhamrocknet/home/denhamrockjs/src/App.vue
  1  |  <script setup>
  2  |    import Top from './components/Top.vue';
  3  |    import Page from './components/Page.vue';
  4  |  </script>
     |           ^
  5  |
  6  |
      at formatError (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:40862:46)
      at TransformContext.error (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:40858:19)
      at TransformContext.transform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:37530:22)
      at async Object.transform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:41111:30)
      at async loadAndTransform (file:///D:/Developing/denhamrocknet/home/denhamrockjs/node_modules/vite/dist/node/chunks/dep-49b3b5ea.js:37373:29)

END

I have no idea why. Ive found out that setting: module.exports = { publicPath: '' } otherwise it is just a blank page although when I do I get this error and a white page.

PS: Anything helps! Ill try anything. I'm desperate for it to work.

Fixed Issue!

CodePudding user response：

I FOUND A FIX!

I just removed: module.exports = { publicPath: '' } from my config and now it works! I must have made an error, added the code, fixed the error, and now removed the bad code.

Hope this helps anyone who has the same issue!