error: File App.vue is not a module.Because I separated my ts into separate files.

[sengmitnick]

Version

3.0.0-rc.3

Reproduction link

https：//github.com/bobmoff/vue-cli-not-a-module

Steps to reproduce

yarn build

What is expected?

Successful compilation

What is actually happening?

ERROR in /Users/smk17/VsCode/hello-world/src/main.ts
3:17 File '/Users/smk17/VsCode/hello-world/src/App.vue' is not a module.

---

I extracted ts to App.ts in App.vue and introduced it in the following way：

<script src="./App.ts"></script>

[Akryum]

May be related to #1576

[sengmitnick]

@Akryum Little relationship
Can be introduced by the following method，but none of this passes:<script src =“./ AppJs.ts”> </ script>、<script lang="ts" src="./AppJs.ts"></script>、<script lang="ts" src="./AppJs"></script>

<script lang="ts">
import App from './App'
export default App
</script>

[ChristianStornowski]

It could be a problem with

vue-cli/packages/@vue/cli-service/lib/config/base.js

Line 21 in 0b42f2f

.extensions

.vue and .(j|t)s are configured to be resolved via webpack without including an extension. Therefor App.(j|t)s and App.vue could be mixed up.

[sengmitnick]

@ChristianStornowski
https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/index.js

config.resolve .extensions .merge(['.ts', '.tsx'])

[LinusBorg]

@sengmitnick the linked reproduction does not contain a typescript project, it's in fact a repository used for another (invalid) bug report before.

Can you please share the right repository?

[bobmoff]

Heres a link: https://github.com/bobmoff/vue-cli-not-a-module

Only change I have made is to move the script content out from HelloWorld.vue into the a new file named HelloWorld.ts and then added src="./HelloWorld" to the script tag in the .vue file.

Been struggling with this for 2 days now trying to convert a project from the old webpack templates to the new cool vue-cli scaffolding and not understanding why stuff is so broken.

The error I am getting in this example is:

ERROR in /Users/bobmoff/Projects/vue-cli-not-a-module/src/views/Home.vue
10:24 File '/Users/bobmoff/Projects/vue-cli-not-a-module/src/components/HelloWorld.vue' is not a module.
     8 | <script lang="ts">
     9 | import { Component, Vue } from 'vue-property-decorator';
  > 10 | import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
       |                        ^
    11 |
    12 | @Component({
    13 |   components: {

It doesn't seem to matter if i change to
export { default } from './HelloWorld'

or

import HelloWorld from './HelloWorld'
export default HelloWorld

inside the script tag

Any help is appreciated :)

Edit: Selected features when creating the project: Babel, Typescript, Router, CSS Pre-processsors

[bobmoff]

If I change the name of the .ts file from HelloWorld.ts to HelloWorldCode.ts and use the
export { default } from './HelloWorldCode'
inside the script tag. .. it works.. :/

[sengmitnick]

@bobmoff Quote your recurring link directly
@LinusBorg Can refer to the recurring link shared by bobmoff
Yes, it can now be referenced and exported within the script.For example, you can do this like:

<script lang="ts">
import App from './App'
export default App
</script>

[LinusBorg]

This is definitely the same issue as #1576 so I will close this isse in favor of that older issue so we keep the discussion in one place.

Please add any further comments to #1576

[herboys]

why？ xxxx.vue' is not a module

[austinhallett]

For anyone running into this issue in 2022;

{
  "compilerOptions": {
    "target": "ESNEXT",
    "module": "ESNext",
    "moduleResolution": "Node",
    "importHelpers": true,
    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": ["@nuxt/types", "@nuxtjs/axios", "@types/node","@nuxtjs/vuetify","@nuxt/vue-app",]
  },
  "include": ["*.vue", "*.ts"],
  "exclude": ["node_modules", ".nuxt", "dist"]
}

I had to add the 'include' list to my tsconfig.json for nuxt app

[ilearnio]

As it appears the script section has to export something

<script lang="ts">
export default {}
</script>

[Brun00liveira]

Lev

[AleksKamb]

As it appears the script section has to export something

<script lang="ts">
export default {}
</script>

<script setup></script>
Also does the job it seems.