I have tried using npm package reactstrap.
My components:
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
I'm getting the following error:
ExecJS::ProgramError at /dir/xyz
TypeError: require is not a function
The webpacker-gem is the way to go for react + rails, not sprockets, which is ok for jQuery style JS, but not for complicated ES6-based stacks.
From the README:
To use Webpacker with React, create a new Rails 5.1+ app using --webpack=react option:
# Rails 5.1+
rails new myapp --webpack=react
(or run bundle exec rails webpacker:install:react in a existing Rails app already setup with Webpacker).
The installer will add all relevant dependencies using Yarn, changes to the configuration files, and an example React component to your project in app/javascript/packs so that you can experiment with React right away.
Note that you'll be using yarn from then on, instead of npm.
Related
I have Rails 7.0.4.
I generated the project using this command.
rails new myproject --database=postgresql -j esbuild --css bootstrap
Thus, I don't have a file named config/importmap.rb.
How do I load a single file with custom JS?
I tried creating a file with a single console.log here.
// ./app/javascript/new.js
console.log('Hi')
and then load this file into the entry point application.js like this.
// ./app/javascript/application.js
import "./new.js"
But I don't see any console.log.
Thanks in advance~!
You're using esbuild which means you have to compile/bundle your javascript. Rails gives a command to start the server and run esbuild:
bin/dev
This is somewhat glanced over in the readme, but it's there: https://github.com/rails/jsbundling-rails
This should work just fine:
// app/javascript/application.js
import "./new"
TLDR: I NEED TO USE PRETTIER STANDALONE WITH WEBPACK IN RAILS 5.
Prettier docs: https://prettier.io/docs/en/browser.html
I can make it work with the cdn, but I don't want to use the cdn.
I need to format css in a text editor in the browser. I want to use Prettier Standalone for this.
The app is Rails 5.2 that uses Webpacker and Vue.
I am following the documentation here: https://prettier.io/docs/en/browser.html
I run yarn add prettier
Then, in my .js file I have:
import prettier from 'prettier';
import parserCss from 'prettier/parser-postcss';
prettier.format(".foo{color: red;}", {
parser: "css",
plugins: [parserCss],
});
This works in my local development environment, but when I try to deploy the application, the build fails during Webpack compile.
I think I need to configure my webpack or something. If you need more information just let me know and I will update the question.
I have to upgrade a legacy application that uses CKEdtior for the text editor features.
Since the Ruby gem for ckeditor is not so good maintained anymore and Rails 6 seems to be an issue anyway I decided to go straight with webpacker.
I added ckeditor v 4 with a yarn add command and then I am importing the js files in my application.js/active_admin.js files. (import "ckeditor4";)
According to documentation I have to set a CKEDITOR_BASEPATH constant as well. The constant should point to the path where the ckeditor files are located.
To have this files I have configured webpacker with this additional setting: environment.config.set('output.libraryTarget', 'umd')
I thought that this would create a ckeditor directory in my public/packs/js folder but it's not working. How can I make webpack create this folded/files?
I fixed this problem with adding the CopyPlugin and configuring it like this:
environment.plugins.append('CopyPlugin',
new CopyPlugin({
patterns: [
{
from: '{config.js,contents.css,styles.js,adapters/**/*,lang/**/*,plugins/**/*,skins/**/*,vendor/**/*}',
to: resolvePath( distPath, 'js/ckeditor' ),
context: resolvePath( __dirname, '../../node_modules', 'ckeditor4' )
}
]
})
)
I installed stimulus into my Rails 6 app using rails webpacker:install:stimulus, but then decided I don't need it. What is the command to uninstall something that was installed via webpacker? I tried rails webpacker:uninstall:stimulus but that didn't work, and googling only led me to people asking how to uninstall webpacker itself.
The webpacker:install:stimulus task does three things:
Adds stimulus to the dependencies in package.json
Creates app/javascript/controllers (plus a couple of sample files)
Adds import "controllers" to the bottom of app/javascript/application.js
So, presumably removing those three things will suffice to uninstall.
I set up new project with Rails 5.1.4, webpacker 3.0 and Vue.js, i used webpack doc to install Vue with Rails.
When I hit foreman with my Procfile the Vues part fails.
I thought wepacker is smart enough for installing all the basic stuff to run app...
Edit:
bundle exec rails webpacker:install:vue
Gave me this, still doesnt work
const { dev_server: devServer } = require('#rails/webpacker').config
const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
module.exports = {
test: /\.vue(\.erb)?$/,
use: [{
loader: 'vue-loader',
options: { extractCSS }
}]
}
As webpacker problems don't stop in development, but make deployment more difficult, i just want to mention that it is very easy to avoid the whole issue. Just don't use webpacker, unless you know you really really have to.
Use the cdn's where vue is. Write app code into rails templates (i use halm and either javascript or ruby2js filter). Even small components can be done that way, or then with the x-template syntax.
Works a charm for small scale
So I get rid off this.
I installed vue with rails manually and added vue loader with yarn command
yarn add vue vue-loader vue-template-compiler without from "." at the end.
Thanks for help guys! :)
To get the Javascript dependencies installed so that webpacker can run:
bundle install
yarn install
Then restart the bin/webpack-dev-server since it rarely likes large changes or files moving around.
If you are running Vue on Rails after 2018, you should use the Vue on Rails app template
rails new app -m https://vueonrails.com/vue -d postgresql
It ships with the default configuration and shortcuts. Check out all the things that it ships with -> http://github.com/vueonrails/vueonrails