unplugin-vue-i18n conflicts with unocss and causes vite build to fail when sourcemaps: true

[stephenhebert]

Reporting a bug?

vite-plugin-vue-i18n conflicts with unocss and causes vite build to fail when sourcemaps: true

The error:

> vite build

vite v2.9.6 building for production...
✓ 34 modules transformed.
rendering chunks (1)...Multiple conflicting contents for sourcemap source /Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/src/HelloWorld.vue
error during build:
Error: Multiple conflicting contents for sourcemap source /Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/src/HelloWorld.vue
    at error (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Link.traceMappings (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:14020:32)
    at collapseSourcemaps (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:14113:63)
    at Chunk.render (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:14978:19)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async /Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:16074:40
    at async Promise.all (index 0)
    at async Bundle.addFinalizedChunksToBundle (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:16072:9)
    at async Bundle.generate (/Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:16052:13)
    at async /Users/stephenhebert/source/repos/vue-i18n-unocss-issue-reproduction/node_modules/rollup/dist/shared/rollup.js:23679:27
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: `vite build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/stephenhebert/.npm/_logs/2022-04-27T17_24_11_232Z-debug.log

---

It seems that having these two things in the same file is causing the issue, though neither on its own would cause a failure:

Vue I18n SFC block:

<i18n>
{
  "en": {
    "Twitter": "Twitter"
  },
  "es": {
  }
}
</i18n>

• this also seems to only happen if more than one locale is provided

UnoCSS Variant Group:

<div class="lt-sm:(text-white max-w-292px)">Hello World</div>

Expected behavior

Vite build should run as expected and output ES modules with sourcemaps

Reproduction

https://github.com/stephenhebert/vue-i18n-unocss-issue-reproduction

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 78.62 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox Developer Edition: 100.0
    Safari: 15.1
  npmPackages:
    @intlify/vite-plugin-vue-i18n: ^3.4.0 => 3.4.0 
    vite: ^2.9.6 => 2.9.6 
    vue: ^3.2.31 => 3.2.31 
    vue-i18n: ^9.1.9 => 9.1.9

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.

[kazupon]

Thank you for your reporting!
This issue is weird ... 🤔
I need to understand about sourcemap of unocss.

[satrong]

Windows 10 work fine, but WSL(ubuntu) got same error.

[haoliangwu]

I met a similar issue like it, anyway, I use vite for bundle building.

the vite build works fine on win10 but breaks on ubuntu.

[stephenhebert]

I've just updated the deps in the reproduction repo and confirmed that this is still an issue.

[kazupon]

@intlify/vite-plugin-vue-i18n is not supported on vite 4
please you would use @intlify/unplugin-vue-i18n
https://github.com/intlify/bundle-tools#-packages

[stephenhebert]

@intlify/vite-plugin-vue-i18n is not supported on vite 4
please you would use @intlify/unplugin-vue-i18n
https://github.com/intlify/bundle-tools#-packages

Thanks, kazupon. I added a branch that uses unplugin-vue-i18n. It has the same issue.

[kazupon]

Hmm, this issue is difficult to resolve quickly. 🤔

I am not familiar with unocss, and I don't know if the TransformerVariantGroup transform is handling the sourcemap. 😅
unplugin-vue-i18n complies with the vite (rollup) transform's interface.

The order of vite plugins in TransformerVariantGroup in unplugin-vue-i18n and unocss may have an effect.

[stephenhebert]

This is resolved with the release of unplugin-vue-i18n@3.0.0!