when i build the vue3 project, i got a output file name like [component].vue_vue_type_script_setup_true_lang.[hash].js

[JiatLn]

Describe the bug

when i npm run build, i got a output file name like [component].vue_vue_type_script_setup_true_lang.[hash].js

Reproduction

https://github.com/JiatLn/vite-build-demo.git

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i3-6100 CPU @ 3.70GHz
    Memory: 1.36 GB / 7.88 GB
  Binaries:
    Node: 14.19.0 - E:\software\nodejs\node.EXE
    Yarn: 1.22.18 - E:\software\nodejs\yarn.CMD
    npm: 6.14.16 - E:\software\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)
    Internet Explorer: 11.0.19041.1202

Used Package Manager

yarn

Logs

No response

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 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.

[sapphi-red]

What is the problem here?

[ydcjeff]

I think the problem is the weird output (comp.vue_vue_type_script_setup_true_lang.[hash].js) instead of [name].[hash].js.

[sapphi-red]

The name is generated by rollup from id(comp.vue?vue&type=script&setup=true&lang.js).
We could treat vue files specially and replace the filename in generateBundle hook. But I don't think this causes any problem.

[hrishikesh-k]

It's probably not a problem, except the cause is unknown. I did not have a problem in any of my other Vite 3 + Vue 3 projects. I haven't made many, but not sure what's happening here. Here's how my chunks folder looks:

My Vite config:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[ext]',
        chunkFileNames: 'chunks/[name].js',
        entryFileNames: 'entries/[name].js'
      }
    },
    sourcemap: true,
    target: 'esnext'
  }
})

Note that, badge is the only file from my components folder that's ending up like that:

while all the other chunks are from my pages directory:

I know this is not really useful without me actually providing a reproduction (as I've said, this doesn't always happen), but providing a reproduction is most likely going to be tough. If someone has some pointers on what to check (try to add/edit) to avoid this, that would be great!

Note that, the badge component is nothing fancy. It's a super simple component which is using defineProps, computed and is one of my smallest components. button for example is a bit complex than that - with various states and props, it goes about 200 lines. So, I don't think "complexity" of the component is an issue (not sure if it ever was), but that's my only guess.

[JiatLn]

It's probably not a problem, except the cause is unknown. I did not have a problem in any of my other Vite 3 + Vue 3 projects. I haven't made many, but not sure what's happening here. Here's how my chunks folder looks:

My Vite config:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[ext]',
        chunkFileNames: 'chunks/[name].js',
        entryFileNames: 'entries/[name].js'
      }
    },
    sourcemap: true,
    target: 'esnext'
  }
})

Note that, badge is the only file from my components folder that's ending up like that:

while all the other chunks are from my pages directory:

I know this is not really useful without me actually providing a reproduction (as I've said, this doesn't always happen), but providing a reproduction is most likely going to be tough. If someone has some pointers on what to check (try to add/edit) to avoid this, that would be great!

Note that, the badge component is nothing fancy. It's a super simple component which is using defineProps, computed and is one of my smallest components. button for example is a bit complex than that - with various states and props, it goes about 200 lines. So, I don't think "complexity" of the component is an issue (not sure if it ever was), but that's my only guess.

I have a guess that it will happen when the component had use to many times.

[hrishikesh-k]

Thank you for your message!

I have a guess that it will happen when the component had use to many times.

I don't think it's being used too many times, but even if that's the case, it still doesn't explain the weird name that component is getting while others are working as expected.

[BigFrontEnd-China]

I have the same problem！

// package.json
{
  "name": "demo-components",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vue-tsc": "^0.40.4"
  }
}

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: "./src/components/index.ts",
      formats: ["cjs"],
      name: "components",
    },
    rollupOptions: {
      external: ["vue"],
      output: [
        {
          dir: "dist/components",
          format: "cjs",
          entryFileNames: "[name].js",
          preserveModules: true,
          preserveModulesRoot: "components",
        },
      ],
    },
  },
  plugins: [vue()],
});

[robokozo]

I'm also seeing the same thing:

...
dist/assets/dates.32565151.js  
dist/assets/ConfirmationButton.vue_vue_type_script_setup_true_lang.db3c1ab5.js
dist/assets/SubtleSortToggleButton.vue_vue_type_script_setup_true_lang.d7615288.js
dist/assets/index.350ee0b4.css
...

Also FWIW.. those components also seem to be MASSIVE compared to what they actually are. That SubtleSortToggleButton is 146.95 KiB. It's a <button> with some css toggling

When I inspect the minified js it also seems to include a lot of stuff that I wasn't expecting.

@JiatLn 's affected FillBlankTextarea is also significantly larger than the others

[jonaskuske]

@robokozo are you using any images, fonts, other kinds of assets? All assets are inlined into the JS/CSS files if you build in lib mode, so the generated JS/CSS files can get huge.

[robokozo]

@jonaskuske its a normal vue app. I can show the details tomorrow but the file is a relatively simple. It's a button that uses different classes based on a Boolean. I believe it only has 1 dependency on a file with interface definitions.

[lingdu1234]

i have the same problem ,not all the file,and not found any reason

[hrishikesh-k]

Still seems to happen with Vite 4. It's always the same files that have this problem. So, there must be some kind of a consistency, not sure what though.

[emhamzahazeen]

Have the same issue. I've noticed in my case that if the the component is traversed multiple times by the bundler then it produces one file with correct name which in turn references to the weird name file.

[woyehenni]

I have the same problem！
I used the plugin 'vite-plugin-multi-pages' to support multi page application.
The currently generated assets are

.
├── assets
│   ├── css
│   │   ├── [componentA].css
│   │   ├── [componentB].css
│   │   ├── main.css
│   │   ├── page1
│   │   │   └── index.css
│   │   ├── page2
│   │   │   └── index.css
│   │   └── page3
│   │       └── index.css
├── favicon.ico
├── js
│   ├── common
│   │   ├── [componentA].vue_vue_type_script_setup_true_lang.js
│   │   ├── [componentB].vue_vue_type_script_setup_true_lang.js
│   │   └── main.js
│   ├── page1.js
│   ├── page2.js
│   └── page3.js
├── page1.html
├── page2.html
└── page3.html

what i expect is

.
├── assets
│   ├── css
│   │   ├── main.css
│   │   ├── page1
│   │   │   └── index.css
│   │   ├── page2
│   │   │   └── index.css
│   │   └── page3
│   │       └── index.css
├── favicon.ico
├── js
│   ├── common
│   │   └── main.js
│   ├── page1.js
│   ├── page2.js
│   └── page3.js
├── page1.html
├── page2.html
└── page3.html

The code in [componentA].vue_vue_type_script_setup_true_lang.js is a common code and has nothing to do with [componentA].

The css in [componentA].css is a common css and has nothing to do with [componentA].

[wrufeger]

for me the files with that cryptic name showed up after using import statements in async loaded components

[chris-upmind]

I also have this same issue :(. Seems to be for shared components being imported into more than one asynchronously loaded/defined components.

[sapphi-red]

@dflock @GideonRoose I created a new issue for that problem as I think it is slightly different and should have a higher priority than this issue: #169

[jfrs]

I'm wondering if the other template parameters could be ignored just like generic? It doesn't seem to break anything for me but it's a little bit annoying.

[jiikoosol]

I had the same problem and can confirm that it is related to component imports (what @chris-upmind mentioned above). I'm asynchronously importing several components in a file and I had one of the components also imported inside those async components. Whenever I ran build phase the component got .vue_vue_type_script_setup_true_lang.[hash].js appended to it's filename. After I removed the double-imported component from the async import list everything was working as intended.

[thexeos]

Since there is no actual code output or bundling issue in Vite or this plugin and the problem is purely aesthetic, you can avoid names like that by using this simple function in your Vite config (compatible with Vite 4):

rollupOptions: {
  output: {
    chunkFileNames: (assetInfo) => {
      if (assetInfo.name?.endsWith('.vue_vue_type_style_index_0_lang')) {
        return `assets/${assetInfo.name.slice(0, -32)}-[hash:8].js`
      } else if (assetInfo.name?.endsWith('.vue_vue_type_script_setup_true_lang')) {
        return `assets/${assetInfo.name.slice(0, -36)}-[hash:8].js`
      } else {
        return 'assets/[name]-[hash:8].js'
      }
    }
  }
}

This change will only affect the file name - file contents remain the same and, as mentioned above, will include any external libraries that your component and no other component in the application relies on.

[Vector-Green]

Is there a way without rollup options?
it breaks, for example vite-plugin-compressin

[exidot]

Now there is still this problem, I wrote a project to reproduce it.
https://github.com/exidot/vitepluginvue-iss19-reproduce

[exidot]

Now there is still this problem, I wrote a project to reproduce it. https://github.com/exidot/vitepluginvue-iss19-reproduce

Sorry, my conclusion was wrong, and I did not find a pattern in which it occurred !

[litvinenkow]

i'm having this issue too, it happens when component imported twice or more in project and this genrates too big files importing full css from main component and js

[Shuyinsama]

Same issue here. It seems to get triggered by something. It did seem to trigger on components that are imported more then once (which is weird in itself since that is the whole idea in a component based project).

For us it also seems to try and import a lot of other components that are not even related to the component. It generates a 51kb file with a lot of imports not even used in the source file.

Could it be an issue with Vue/Async/Suspense and Vite?

[sinchijackal]

Now there is still this problem, I wrote a project to reproduce it. https://github.com/exidot/vitepluginvue-iss19-reproduce

Sorry, my conclusion was wrong, and I did not find a pattern in which it occurred !

Same problem occurs with vite 5.0. and vue js 3.4.
tested with these packages:

"@types/node": "^18.19.3",
"@vitejs/plugin-vue": "^4.5.2",
"typescript": "~5.3.0",
"vite": "^5.0.10",
"vue-tsc": "^1.8.25"

[babsey]

Is the issue still on?

My temporary solution is (similar to @thexeos):

chunkFileNames: (assetInfo: { name: string }) => {
    const name = 
        assetInfo.name.endsWith(".vue_vue_type_style_index_0_lang") ||
        assetInfo.name.endsWith(".vue_vue_type_script_setup_true_lang") ? 
        assetInfo.name.split(".")[0] : assetInfo.name;
    return `assets/js/${name}-[hash].js`;
}

[jfrs]

Is this definitely a vite-plugin-vue issue or could it a Vite problem?