[go: nahoru, domu]

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vite-plugin-ruby:assets-manifest] Cannot read property 'substr' of undefined #55

Closed
nyrf opened this issue Apr 16, 2021 · 12 comments
Closed
Labels
bug Something isn't working

Comments

@nyrf
Copy link
nyrf commented Apr 16, 2021

Description πŸ“–

When use image in stylesheet and run build, got error

Reproduction 🐞

just add css like this in application.scss

app/javascript/
β”œβ”€β”€ entrypoints
β”‚Β Β  β”œβ”€β”€ application.js
β”‚Β Β  β”œβ”€β”€ application.scss
β”œβ”€β”€ images
β”‚Β Β  └── demo.png
└── stylesheets
    └── main.scss
body {
  background: url("../images/demo.png")
}
Vite Ruby Info

Run bin/rake vite:info and provide the output:

bin/vite present?: true
vite_ruby: 1.2.3
vite_rails: 2.0.9
rails: 6.1.3.1
node: v15.4.0
npm: 7.0.15
yarn: 1.22.5
pnpm:
ruby: ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin18]

Logs πŸ“œ

If not providing a reproduction:

Output

Run DEBUG=vite-plugin-ruby:* bin/vite dev or DEBUG=vite-plugin-ruby:* bin/vite build and provide the output:

Building with Vite ⚑️
vite v2.1.5 building for production...
transforming...
βœ“ 68 modules transformed.
rendering chunks...
[vite-plugin-ruby:assets-manifest] Cannot read property 'substr' of undefined
error during build:
TypeError: Cannot read property 'substr' of undefined
    at withoutExtension (/Users/nyrf/Codes/rails/demo/vite_demo/node_modules/vite-plugin-ruby/dist/index.js:50:19)
    at /Users/nyrf/Codes/rails/demo/vite_demo/node_modules/vite-plugin-ruby/dist/index.js:123:19
    at Array.forEach (<anonymous>)
    at extractChunkStylesheets (/Users/nyrf/Codes/rails/demo/vite_demo/node_modules/vite-plugin-ruby/dist/index.js:122:69)
    at Object.generateBundle (/Users/nyrf/Codes/rails/demo/vite_demo/node_modules/vite-plugin-ruby/dist/index.js:149:7)
    at /Users/nyrf/Codes/rails/demo/vite_demo/node_modules/rollup/dist/shared/rollup.js:18863:25

Build with Vite failed! ❌
@nyrf nyrf added the bug: pending triage Something doesn't seem to be working, but hasn't been verified label Apr 16, 2021
@ElMassimo
Copy link
Owner
ElMassimo commented Apr 16, 2021

Thanks for the report, must be a bug in 2.0.0 since every asset in the bundle is expected to have a name, which given the bug is not true for images.

Using a previous version of vite-plugin-ruby should avoid the problem, though I know you are using the latest version to use scss entrypoints.

I don't have my computer until next weekβ€”I'll investigate and create a patch.

@ElMassimo ElMassimo added bug Something isn't working and removed bug: pending triage Something doesn't seem to be working, but hasn't been verified labels Apr 16, 2021
@nyrf

This comment has been minimized.

@nyrf
Copy link
Author
nyrf commented Apr 17, 2021

After move images folder into entrypoints, it can work and the hg.png generated twice after build

../../../public/vite/assets/hg.db495701.png            8.19kb
../../../public/vite/assets/images/hg.db495701.png     8.19kb
body {
  background: url('/images/hg.png');
}
<img src="<%= vite_asset_path 'images/hg.png' %>" />

@ElMassimo
Copy link
Owner
ElMassimo commented Apr 17, 2021

The images folder does not play a special role at the moment–moving it to entrypoints is correct if you want to use vite_asset_path.

@nyrf
Copy link
Author
nyrf commented Apr 17, 2021

@ElMassimo Thanks, it seems if want use vite with rails, another way is move images folder to app/javascript folder and generate manifest file by custom codes. Vite's manifest file looks like

{
  "application.js": {
    "file": "assets/application.23f17bc7.js",
    "src": "application.js",
    "isEntry": true,
    "css": [
      "assets/application.4b2ec947.css"
    ],
    "assets": [
      "assets/hg.db495701.png"
    ]
  }
}

If the assets entry move out the application.js node, like this

{
  "application.js": {
    "file": "assets/application.23f17bc7.js",
    "src": "application.js",
    "isEntry": true,
    "css": [
      "assets/application.4b2ec947.css"
    ]
  },

 "images/hg.png": "assets/hg.db495701.png",
}

then we can use vite_asset_path('images/hg.png') in view.

@doabit
Copy link
Contributor
doabit commented Apr 19, 2021

I've created a PR for vite to solve the issue. vitejs/vite#3050, it also can solve custom manifest format problem.

@doabit
Copy link
Contributor
doabit commented Apr 19, 2021

Asset duplication because of put images in entrypoints folder, vite-plugin-ruby generates a file and vite also generates file when you use the image in stylesheet. The right way is put images to images folder, if you want to use image in rails view, you should use global import in application.js.

import.meta.globEager('../images/**/*')

@tomocrafter
Copy link

I also came across this problem, Is there any workaround for this problem?
or Do I need to wait until this PR merges and releases?

@doabit
Copy link
Contributor
doabit commented Apr 21, 2021

I also came across this problem, Is there any workaround for this problem?
or Do I need to wait until this PR merges and releases?

I'm working on that, i'll submit a new PR to solve the two problem.

@ElMassimo
Copy link
Owner
ElMassimo commented Apr 21, 2021

Hi folks, adding the name to asset chunks would certainly simplify the internals of this library.

In the meantime (and to provide support to users in older Vite versions), I have fixed the build manifest error when referencing other assets, as well as the duplication problem in vite-plugin-ruby@2.0.1.

Please upgrade, and let me know how it goes.

@nyrf
Copy link
Author
nyrf commented Apr 21, 2021

@ElMassimo It works, thanks.

@doabit
Copy link
Contributor
doabit commented Apr 22, 2021

I also came across this problem, Is there any workaround for this problem?
or Do I need to wait until this PR merges and releases?

ElMassimo has done the great work. At beginning, my plan is to move vite config.root to app/frontend and puts images in app/frontend/images. I found the newest version can work well with rails now. Thanks ElMassimo's great work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants