Rails Webpacker - How to access objects defined in webpack entry file from views [HTML file]

webpacker vs webpack
rails yarn
rails webpacker-react
rails 6 webpacker css
rails 6 javascript_include_tag
rails 6 manifest js
rails 6 eslint
rails 6 manifest json

I have a Rails 6 application and using Webpacker for assets.

I have the following code in file app/javascript/packs/application.js :

export var Greeter = {
    hello: function() {
        console.log('hello');
    }
}

And I have the following script in one of my view (HTML) file:

<script>
 $(document).ready(function(){
   Greeter.hello();
 });
</script>

Note: I am using JQuery and it is working fine.

I am getting the following error:

Uncaught ReferenceError: Greeter is not defined.

How can we use libraryTarget and library to expose the bundled modules, so that it can be accessed from HTML files as well ?

Or, is there any other way of doing it using Rails Webpacker ?

Any help would be much appreciated!


To do this without directly mutating the window object in your application code, you'll want to export Greeter as a named export from your application.js pack and extend the Webpack config output to designate the library name and target var (or window will also work).

// config/webpack/environment.js

environment.config.merge({
  output: {
    library: ['Packs', '[name]'], // exports to "Packs.application" from application pack
    libraryTarget: 'var',
  }
})

// app/javascript/packs/application.js

export {
  Greeter
}

<script>
 $(document).ready(function(){
   Packs.application.Greeter.hello();
 });
</script>

The library name is arbitrary. Using the [name] placeholder is optional but allows you to export to separate modules if you're using multiple "packs".

How to use webpack with Rails, modules which don't have a well-defined entry point (webpack won't know what to Next you should install webpack globally, so you can access the Create the following file in your Rails root: webpack.config.js If you plan on having any “loose” JavaScript in your Rails views, this could be essential. This is just an example of how we can import files with Webpack in Rails. And in this case, especially for jQuery, it makes a lot of sense as there is a high chance that we will be using it in other javascript files. The extract_css Option. There is one last point I would like to touch on. That is the extract_css option in the config/webpacker


in app/javascript/packs/application.js:

import Greeter from '../greeter.js'
Greeter.hello()

and in app/javascript/greeter.js:

export default {
  hello : function(){
    console.log('hello')
  }
}

Webpack, the Asset Pipeline, and Using Assets w/ React · React On , Using Webpack bundled assets with the Rails Asset Pipeline. If you're looking to use They allow you to load and access files in an easy manner. Both of these  I have following structure for Javascript in my Rails 6 app using Webpacker. app/javascript + packs - application.js + custom - hello.js Below shown is the content in the above mentio


I could fix the issue exposing Greeter object to window as follows:

export var Greeter = {
    hello: function() {
        console.log('hello');
    }
}

window.Greeter = Greeter;

However, I am still looking for a Webpack way of accomplishing this.

rails/webpacker: Use Webpack to manage app-like , app/javascript: ├── packs: │ # only webpack entry files here You can then link the JavaScript pack in Rails views using the javascript_pack_tag helper. using javascript_packs_with_chunks_tag helper, which creates html tags for a pack and load configuration for cucumber environment if defined in webpacker.​yml  Rails Webpacker - How to access objects defined in webpack entry file from views [HTML file] 3 Rails 6 webpack throwing 'Uncaught ReferenceError: $ is not defined'


Webpack, Yarn, Npm in Rails · GitHub, app/javascript: ├── packs: │ # only webpack entry files here Webpacker with NPM without Yarn in Rails app Webpack 2 supports ES6 module syntax natively, meaning you can use import and app/views/home/index.html.haml .​container .mystyle I will be blue if files. For global access to jQuery. The environment specific JavaScript configuration files for webpack can be found at config/webpack directory. More on webpack configuration with Webpacker here. Compilation. Keeping the process similar to the previous assets pipeline, the JavaScript compilation happens along with the request while running the Rails server in development mode.


How to use Javascript via Webpacker in Rails 6 (Example), Rails 6 defaults to using Webpacker for Javascript instead of the asset pipeline. In your rails app/assets/stylesheets/application.css (or other) manifest file. Reply. If you are Chris, isn't it important to include the following line in the main entry pack: definition.js:34 Uncaught TypeError: constructor.bless is not a function at​  To help webpack understand images, svg files, and fonts in your Rails project, Webpacker adds the file-loader package. This package will emit the imported file as a side effect of the build and return a path to the file as the module contents.


Webpack and Rails: the “should” knows - Dan Powell, TL;DR: The webpacker gem makes webpack easy to use in a Ruby on Rails app. Classes, modules and scopes all made things feel a bit more object top to bottom bringing what it reads into a single file, referred to as a bundle. src=”​https://cdn.io/coolio”></script>'s in your view so you can access all  This tells webpack to name the output file the same as the entry point file, and store the bundle in public/packs (distDir is defined as “packs” in the shared.js file). If you have a file named “application.js” in your packs/ directory, it will be output to “application.js” in the public/packs/ directory.