Vue cannot use the <script import>?

Question

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!

Denhamrock · Accepted Answer · 2022-10-07 00:23:03Z

2

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!

answered Oct 7, 2022 at 0:23

Denhamrock

215 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue cannot use the <script import>?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related