webpacker

Rails 5/6: How to include JS functions with webpacker?

ぃ、小莉子 提交于 2020-02-03 09:22:05
问题 I am trying to update a Rails 3 app to Rails 6 and I have problems with the now default webpacker since my Javascript functions are not accessible. I get: ReferenceError: Can't find variable: functionName for all js function triggers. What I did is: create an app_directory in /app/javascript copied my development javascript file into the app_directory and renamed it to index.js added console.log('Hello World from Webpacker'); to index.js added import "app_directory"; to /app/javascript/packs

jquery events not firing using webpacker and coffeescript

放肆的年华 提交于 2020-01-24 18:06:30
问题 Trying to build a new rails 6 application from scratch to replace a rails 5.2 application. Trying to use webpacker with foundation-site jquery and coffeescript After a bunch of searching I've got everything loaded with webpacker. It appears to be very (maybe too) flexible in that examples use different approaches. Everything works (foundation does x-grid, callouts etc, jquery loads and I can log jquery objects, coffeescript compiles) except jquery events don't seem to fire or build a listener

Storing nested objects in React State

烂漫一生 提交于 2020-01-17 08:41:09
问题 I'm getting a json from an endpoint which looks like this: {"section":{"name":"name","subsections":[ {"name":"one","snippets":[{"title":"title","body":"body"}]}, {"name":"two","snippets":[{"title":"title","body":"body"}]}] }} This is how I get the data: fetchData() { axios.get('/api/data') .then(response => { this.setState({ section: response.data.section }) }) .catch(error => { console.log(error); }); } componentDidMount() { this.fetchData(); } But when I call this.state.section.subsections

Conditionally set externals for a specific Webpack bundle

时间秒杀一切 提交于 2020-01-16 11:38:09
问题 I want to exclude jQuery from all but one of my bundles. I see I can pass a function to externals , but I'm having trouble getting it working correctly. TBH, I'm not sure if it's possible to do this. I'd like to exclude jQuery from core.js only. // Relevant Webpacker config environment.config.set('externals', function(context, request, callback) { // This makes core.js an external bundle if (!/core\.js$/.test(request)) { return callback(null, 'commonjs ' + request); } // This makes jQuery

Leaflet with Webpack in Rails 6. L.timeline is not a function

只愿长相守 提交于 2020-01-16 08:43:08
问题 This looks just like the question @rossta answered for Gmaps, but I don't understand the problem and answer well enough to make his suggestion work. The error is: Uncaught TypeError: L.timeline is not a function at Object.success (mapTwo.js:14) Line 14 is var timelineData = L.timeline(data_data, { . Complete code below. I removed the leaflet gems that work in Rails 5.2 and in console yarn add leaflet yarn add leaflet.timeline and code: // app/javascript/packs/application.js import "core-js

Rails Webpacker images not loading unless manually defined with import

≯℡__Kan透↙ 提交于 2020-01-15 10:31:28
问题 I'm working with @rails/webpacker 3 in a Rails 5.1 app. I've been trying to figure out if there is a way to not have to define importing every individual image in the respective pack/*.js files. I have the default webpacker config setup and the image file saved at this location. <app_root>/app/javascript/images/image.png In my view I have the image element set #<app_root>/app/views/layouts/application.html.erb ... <img src="<%asset_pack_path 'images/image.png%>"> ... The image will not load

Rails Webpacker images not loading unless manually defined with import

老子叫甜甜 提交于 2020-01-15 10:31:27
问题 I'm working with @rails/webpacker 3 in a Rails 5.1 app. I've been trying to figure out if there is a way to not have to define importing every individual image in the respective pack/*.js files. I have the default webpacker config setup and the image file saved at this location. <app_root>/app/javascript/images/image.png In my view I have the image element set #<app_root>/app/views/layouts/application.html.erb ... <img src="<%asset_pack_path 'images/image.png%>"> ... The image will not load

How to handle images in a Rails / Webpacker / React app?

牧云@^-^@ 提交于 2020-01-12 13:31:26
问题 I'm using webpacker with rails 5.1.4 to play with Reactjs, Redux, and react-router-dom. I have a navbar component that needs to display images, but I'm not able to access images in assets/images folder and neither in public folder. I'm here : app/javascript/src/components/navbar My routes defined in main.jsx : <BrowserRouter> <div> <Alert error={error} /> <Navbar user={user}/> <Switch> <Route path="/post/:id" component={PostsShow} /> <Route path="/" component={PostsIndex} /> </Switch> </div>

Ruby on rails webpacker can't find images under asset_pack_path

僤鯓⒐⒋嵵緔 提交于 2020-01-12 11:09:53
问题 I have a problem with including images in my views using Ruby on Rails Webpacker. When i try to insert image in my view using html img tag and asset_pack_path i got an error. My images is located in app/javascript/images/logo.png . According to webpacker docs i should append /media/ to file but it does not help. I try diffrent path but it's still not working. I think webpacker doesn't compile my image. Webpacker::Manifest::MissingEntryError in Home#index Showing app/views/layouts/application

Ruby on rails webpacker can't find images under asset_pack_path

自作多情 提交于 2020-01-12 11:07:10
问题 I have a problem with including images in my views using Ruby on Rails Webpacker. When i try to insert image in my view using html img tag and asset_pack_path i got an error. My images is located in app/javascript/images/logo.png . According to webpacker docs i should append /media/ to file but it does not help. I try diffrent path but it's still not working. I think webpacker doesn't compile my image. Webpacker::Manifest::MissingEntryError in Home#index Showing app/views/layouts/application