question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Assets entries in the manifest do not preserve the original file extension

See original GitHub issue

Describe the bug

#6649 added assets to the manifest, but the entries are invalid for Sass/Less/Stylus stylesheets, as it’s erasing the original extension from the manifest entry names and src.

For example, for style.scss the entry is:

  "style.css": {
    "file": "assets/style.a5c756ae.css",
    "src": "style.css"
  }

In contrast, Vite does preserve .ts extensions:

  "main.ts": {
    "file": "assets/main.ts.a1959a64.js",
    "src": "main.ts",

For any backend integration to map files correctly, it’s desirable to preserve the extension for assets as well:

  "style.scss": {
    "file": "assets/style.a5c756ae.css",
    "src": "style.scss"
  }

Background 📜

This is the behavior that vite-plugin-ruby implements, but it no longer works with Vite 3.

I believe this change is currently preventing Vite Ruby from trying to recover the original extension, making #6649 a breaking change for many Vite Ruby projects.

If the manifest preserves the extensions, this would greatly simplify all backend integrations, including Vite Ruby.

Reproduction

Run npm run build or see the manifest, notice that both the entry name and the src are incorrect.

Additionally, this failing test run demonstrates the issue.

System Info

System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 109.84 MB / 16.00 GB
    Shell: 3.3.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.13.1 - /var/folders/j6/gyvfxjy50jqgy9lth08nd_f40000gn/T/fnm_multishells/3581_1656077025812/bin/node
    Yarn: 1.22.17 - /var/folders/j6/gyvfxjy50jqgy9lth08nd_f40000gn/T/fnm_multishells/3581_1656077025812/bin/yarn
    npm: 8.1.2 - /var/folders/j6/gyvfxjy50jqgy9lth08nd_f40000gn/T/fnm_multishells/3581_1656077025812/bin/npm
  Browsers:
    Chrome: 102.0.5005.115
    Firefox: 101.0
    Safari: 15.2

Used Package Manager

pnpm

Logs

No response

Validations

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

4reactions
innocenzicommented, Jun 24, 2022

Yes, I also had issues with my current manifest generation, I had to change my implementation.

Additionally, is it possible to add an isEntry boolean to CSS files that are used in build.rollupOptions.input? This is needed for avoiding FOUCs - I didn’t realize https://github.com/vitejs/vite/pull/6649 didn’t do that, without it we still need to override the manifest in my integration and the official Laravel one

2reactions
ElMassimocommented, Jun 24, 2022

I have a fix for the extension, currently looking into the isEntry piece.

Read more comments on GitHub >

github_iconTop Results From Across the Web

manifest.json does not include assets · Issue #2375 · vitejs ...
Describe the bug​​ Statically imported assets (SVG file in my case) will get bundled and created in the outDir , but are missing...
Read more >
Manifest file format - Chrome Developers
Every extension requires a JSON-formatted file, named manifest. json , that provides important information. This file must be located in the  ...
Read more >
Manage manifest files
This page describes how manifest merging works and how you can apply merge preferences to resolve merge conflicts.
Read more >
Extension Manifest Reference - Azure DevOps
Start by creating a file named vss-extension.json at the root of your extension folder. This file contains required attributes, like the ...
Read more >
Supported formats for Amazon S3 manifest files
You don't have to use Amazon Redshift to use the Amazon Redshift manifest file format. If you use an Amazon QuickSight manifest file,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found