ElMassimo / ElMassimo/vite_ruby

Surprising output in rollup bundle sourcemaps for none .js entrypoint files

Open
#358 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
Ruby
Stars
1.6k
Forks
149
Avg merge
5h 13m
Merged PRs (30d)
2

Description

[troubleshooting section]: https://vite-ruby.netlify.app/guide/troubleshooting.html

- [x] I have tried upgrading by running `bundle update vite_ruby`.
- [x] I have read the __[troubleshooting section]__ before opening an issue.

### Description 📖

I'm wondering if this might be a bug that results from this: https://github.com/ElMassimo/vite_ruby/blob/4ee5aa893058bbe9262109b2b4c200d9a1656ac8/vite-plugin-ruby/src/index.ts#L98

When enabling sourcemaps, and running a build via `bin/vite build` or `rails assets:precompile`, if I write a rollup plugin to inspect the sourcemap files, I see that a sourcemap entry exists for a `.sass` file that I have as an entry point, even though no such file exists in the actual build output. Also I see that the filename for the `sass` has a `.js` extension which seems strange.

### Reproduction 🐞

1. In the `app/frontend/entrypoints` directory, include at least one `.sass` file. Ex.

image

2. Include at least one of the sass files on a .html.erb page in the app. Ex.
```erb
vite_stylesheet_tag('quill.sass', media: 'all')
```

3. Add the following test `rollupPlugin` code to your `vite.config.ts`

**Rollup plugin code**
```javascript
function isSourcemap(file) {
return file.type === 'asset' && file.fileName.endsWith('.js.map');
}

function extractSourcemapDataFromBundle(_outputOptions, bundle) {
const sourceMaps = Object.values(bundle).filter(isSourcemap);

return sourceMaps.map((sourcemap) => {
console.info(JSON.parse(sourcemap.source));
});
}

export function exampleRollupPlugin() {
return {
name: 'sourcemap-reader',
writeBundle: {
async handler(outputOptions, bundle) {
extractSourcemapDataFromBundle(outputOptions, bundle);
},
},
};
}
```

4. Include it in your `vite.config.ts` file and make sure you have sourcemaps enabled:

**vite.config.ts**
```typescript
import { defineConfig } from 'vite';
import rubyPlugin from 'vite-plugin-ruby';

export default defineConfig({
build: {
sourcemap: true,
rollupOptions: {
plugins: exampleRollupPlugin,
},
},
plugins: [rubyPlugin()],
});
```

5. run `bin/vite build`

In your console output you will see something like:

```javascript
{
version: 3,
file: 'quill-14abea49.js',
sources: [],
sourcesContent: [],
names: [],
mappings: ''
}
```

What's surprising here is that the `file` is a `.js` file! Also note that most of the properties are empty values since the source is not actually a .js file. It's the quill.sass file.

ℹ️ In the example screenshot of my `entrypoints` posted on reproduction Step 1 (above), you can see that I have a `quill.js` and `quill.sass` file. The output above is for the `quill.sass` entry file. The `quill.js` entrypoint's bundle sourcemap Object is what is expected. Something like this:

```javascript
{
version: 3,
file: 'quill-5b69f169.js',
sources: [
'../../../node_modules/quill/dist/quill.js',
'../../../node_modules/quill-paste-smart/dist/quill-paste-smart.js',
'../../../node_modules/quill-mention/dist/quill.mention.esm.js',
'../../../app/frontend/entrypoints/quill.js'
],
sourcesContent: [
'/*!\n' +
' * Quill Editor v1.3.7\n' +
' * https://quilljs.com/\n' +
' * Copyright (c) 2014, Jason Chen\n' +
' * Copyright (c) 2013, salesforce.com\n' +
' */\n' +
'(function webpackUniversalModuleDefinition(root, factory) {\n' +
"\tif(typeof exports === 'object' && typeof module === 'object')\n" +
'\t\tmodule.exports = factory();\n' +
"\telse if(typeof define === 'function' && define.amd)\n" +
'\t\tdefine([], factory);\n' +
"\telse if(typeof exports === 'object')\n" +
'\t\texports["Quill"] = factory();\n' +
'\telse\n' +
'\t\troot["Quill"] = factory();\n' +
"})(typeof self !== 'undefined' ? self : this, function() {\n" +
'return /******/ (function(modules) { // webpackBootstrap\n' +
'REDACTED FOR BEVITY'
],
names: ['REDACTED FOR BEVITY'],
mappings: 'REDACTED FOR BEVITY'
}
}
```

Vite Ruby Info

_Run `bin/rake vite:info` and provide the output:_

```
Running via Spring preloader in process 13157
bin/vite present?: true
vite_ruby: 3.2.10
vite_rails: 3.0.12
rails: 6.1.7.3
node: v18.12.1
npm: 8.19.2
yarn: 1.22.19
pnpm:
ruby: ruby 3.0.6p216 (2023-03-30 revision 23a532679b) [arm64-darwin22]

installed packages:
internal-hackathons@0.1.0 /Users/josephkrump/code/projects/internal_hackathons
├─┬ @vitejs/plugin-vue@3.1.0
│ └── vite@3.2.3 deduped
├─┬ vite-plugin-full-reload@1.0.4
│ └── vite@3.2.3 deduped
├─┬ vite-plugin-ruby@3.1.2
│ └── vite@3.2.3 deduped
├── vite@3.2.3
└─┬ vitest@0.27.3
├─┬ vite-node@0.27.3
│ └── vite@4.2.1
└── vite@4.2.1
```

### Screenshots 📷

_Provide console or browser screenshots of the problem_.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.