I am running Windows 10 and trying to set up my Ruby on Rails project, with Tailwindcss. I have followed the documentation for the install but cannot seem to get the styling to work, any help with this would be appreciated
tailwind.config.js
module.exports = { content: [
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*', ], theme: {
extend: {
colors: {
}
}, }, plugins: [], }
application.tailwind.css
#tailwind base;
#tailwind components;
#tailwind utilities;
body {
background-color: #F1F1F1;
}
I've tried running rails tailwindcss:build but to no avail. I am also starting the server with bin/dev. For context the current set up works when running on Mac, but styling will not show when running the server on windows
When I run my server I get this warning:
No utility classes were detected in your source files. If this is
unexpected, double-check the content option in your Tailwind CSS
configuration.
Related
I am using playwright to right test for our website. In playwright.config.ts I have configured to chromium browser with headless set to false. Earlier everything was working file but now while running the test the browser open but it is transparent and only border is visible. The output screenshot is also doesn't contain anything.
I am using ubuntu through wsl2 of windows 11.
The followings are still working fine with playwright:
chromium browser with headless set to true
firefox browser with either headless set to true or false
also chromium browser installed by playwright at location /xxx/xxxx/.cache/ms-playwright/chromium-1028/chrome-linux/chrome is working fine
my playwright config file is
import type { PlaywrightTestConfig } from '#playwright/test';
import dotenv from 'dotenv';
import path from 'path';
// Read from default ".env" file.
dotenv.config();
// Alternatively, read from "../my.env" file.
dotenv.config({ path: path.resolve('./my.env') });
const config: PlaywrightTestConfig = {
use: {
browserName: 'chromium',
// channel: 'chrome',
headless: false
},
webServer: {
command: ' ~/.yarn/bin/netlify dev',
port: 8888
},
testDir: './tests'
};
export default config;
At the beginning I got a problem with the french date in the antd calendar. I use vite so I install the antd_dayjs_vite_plugin to switch from Moment.js to Day.js. It worked well but this morning the vite build process is in error. I tried to update the antd_dayjs_vite_plugin version (was 1.1.4) and now I got the same problem when I try to lunch a yarn dev as you can see :
$ yarn dev
yarn run v1.22.15
$ vite
failed to load config from vite.config.ts
error when starting dev server:
TypeError: (0 , import_antd_dayjs_vite_plugin.default) is not a function [...]
Here is the code in vite.config.ts :
import reactRefresh from '#vitejs/plugin-react-refresh';
import antdDayjs from 'antd-dayjs-vite-plugin';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh(), antdDayjs()],
server: {
host: process.env.HOST || '127.0.0.1',
},
resolve: {
alias: [{ find: '#', replacement: '/src' }],
},
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version),
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
},
},
});
The problem also appears in antd-dayjs-vite-plugin 1.1.4 version or the 1.2.2. I also already tried to update vite to 3.1 (was in 2.5).
I don't understand the code seems to be exactly the same as the usage in the Readme package.
Thanks in advance for your help. 🙏🏻
Seams that a default export is expected by vite.js (tried to replace import statement with import {antdDayjs} from 'antd-dayjs-vite-plugin'; without success)
I was able to create a workaround using patch-package with the below steps:
modifiy node_modules/antd-dayjs-vite-plugin/dist-node/index.js
at the very end of that file, add exports.default = antdDayjs;
create a patch for antd-dayjs-vite-plugin
ensure you have the postinstall script (refer to patch-package doc)
I have a Rails 6 project with webpacker 4.2.2 configured to split vendor chunks into individual files:
# config/webpack/environment.js
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.config.merge({
plugins: [
new webpack.HashedModuleIdsPlugin(),
],
optimization: {
minimize: true,
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
// #see https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('#', '')}`;
},
priority: 10,
},
}
}
}
})
module.exports = environment
When we precompile our assets, this produces fingerprinted files for each NPM dependency, which we upload for long-term caching and CDN-based distribution.
However, we're noticing that when we add a new library to the pack, this unexpectedly causes a rehash of many chunk files for dependencies that have not changed at all.
For example, this change in my app/javascript/packs/application.js:
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
import 'msr'
import copy from 'clipboard-copy'
+import axios from 'axios'
will produce the following change in my output chunks (produced from running bin/rails webpacker:compile):
--- a 2020-07-06 18:39:52.202440803 +0000
+++ b 2020-07-06 18:39:52.210440748 +0000
## -1,6 +1,8 ##
-application-1e8721172ae65f57286b.chunk.js
-npm.clipboard-copy-10b42ffbc97b4e927071.chunk.js
-npm.msr-01ea266e2c932167f10b.chunk.js
-npm.rails-a4564cfc542024efeb95.chunk.js
-npm.turbolinks-eeef46ff44962af9ac87.chunk.js
-npm.webpack-7226f5cf46a8c4e61c26.chunk.js
+application-bad0ed20808541f88894.chunk.js
+npm.axios-40b4b54ebace2b9e3907.chunk.js
+npm.clipboard-copy-79d2051f48603e0267e0.chunk.js
+npm.msr-f5a4252b7a7e0a94157f.chunk.js
+npm.process-cfe824ecbab5abe0eecc.chunk.js
+npm.rails-aa1c430d6ceee3ca6bd6.chunk.js
+npm.turbolinks-e28554dbfd4b75aa12e5.chunk.js
+npm.webpack-35f718d9a20b8bca2927.chunk.js
This is a double whammy because of unnecessary cache invalidation and additional CDN transfer costs.
My question is, is there a way to ensure the vendor chunk doesn't get rehashed because of dependency changes?
I don't know if this is a limitation with the way that webpack's SplitChunksPlugin works, but any advice is appreciated.
By the way, I've prepared a minimal Rails project that reproduces the situation I've described above: https://github.com/alextsui05/webpacker-vendor-chunks
A detailed summary is included in the README on the repository, and I invite any answerers to discuss based on that code.
Try setting the option moduleIds: 'hashed'
https://v4.webpack.js.org/configuration/optimization/#optimizationmoduleids
I'm working on a Rails app that uses Semantic UI as its frontend framework.
I'm using Rails 5.
I followed the instructions on this site (https://github.com/Semantic-Org/Semantic-UI-Rails-LESS) to include the gems needed for Semantic to work on Rails.
In my html.erb file (the left portion of the photo), I've used some Semantic UI buttons, just to test out if Semantic loads.
I believe it loaded, but I'm getting a bunch of errors in my console (+ it is saying on the top right that the Style sheet could not be loaded).
What seems to be the problem?
EDIT
I was able remove the 'Style sheet could not be loaded' error by lowering my 'sprockets' gem version to 3.6.3, instead of 3.7.1. (I'm not sure if this is a safe way of doing it, though. There were warning of deprecated methods in the sprockets, so people were suggesting to use version 3.6.3 instead.) However, the other errors in the console log still remained.
EDIT 2
The 'Style sheet could not be loaded' error still remained.
EDIT 3
I switched to the sass version of Semantic UI, and the "Style sheet could not be loaded" error is now gone! But, the console still had the "error in parsing values" error. I still don't know what is causing this. Any thoughts/fixes to this?
Since Rails 5.1 you can use yarn to integrate Semantic UI with your app. Here's how I've done it. Process is not perfect (you still have to run rails tmp:clear after changing your theme files), but it gives you advantage of using the latest semantic-ui package and not being dependent on gem updates.
Using
Ruby: 2.5.1
Rails: 5.2.0
Create a new rails app
$ rails new semantic_integration
$ cd semantic_integration
$ bundle install
create semantic.json in your app directory
{
"base": "app/assets/semantic/semantic-ui",
"paths": {
"source": {
"config" : "src/theme.config",
"definitions" : "src/definitions/",
"site" : "src/site/",
"themes" : "src/themes/"
},
"output": {
"packaged" : "dist/",
"uncompressed" : "dist/components/",
"compressed" : "dist/components/",
"themes" : "dist/themes/"
},
"clean" : "dist/"
},
"permission": false,
"autoInstall": true,
"rtl": false,
"version": "2.3.1"
}
run $ yarn add semantic-ui.
This will install semantic-ui in app/assets/semantic
Add followin lines to config/initializers/assets.rb
# semantic-ui assets
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'semantic')
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'semantic', 'semantic-ui', 'src', 'themes', 'default')
Add Semantic UI css
// app/assets/stylesheets/application.css
*= require 'semantic-ui/src/semantic'
Add Semantic UI js
// app/assets/javascripts/application.js
// after turbolinks
//= require jquery
//= require semantic-ui/dist/semantic
Add init.js and require it in app/assets/javascripts/application.js
window.App || (window.App = {});
App.init = function() {
// here goes Semantic UI component initialisation
// i.e.
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
$('.ui.menu a.item')
.on('click', function() {
$(this)
.addClass('active')
.siblings()
.removeClass('active');
});
};
$(document).on('turbolinks:load', function () {
App.init();
});
In you Gemfile add:
gem 'therubyracer'
gem 'less-rails'
and run bundle install
Now you app should be able to compile Semantic UI less files.
If you're getting error:
expected ')' got 'o'
go to app/assets/semantic/semantic-ui/src/theme.less
and remove (optional) keywords on #import statements
Icon font
go to: app/assets/semantic/semantic-ui/src/site/globals/site.variables
and add:
/* Fonts */
#fontPath : "assets/fonts";
then go to: app/assets/semantic/semantic-ui/src/site/elements/icon.variables
and add:
/*******************************
Icon
*******************************/
/*--------------
Font Files
---------------*/
#fontName: 'icons';
#src:
font-url("#{fontPath}/#{fontName}.eot?#iefix") format('embedded-opentype'),
font-url("#{fontPath}/#{fontName}.woff2") format('woff2'),
font-url("#{fontPath}/#{fontName}.woff") format('woff'),
font-url("#{fontPath}/#{fontName}.ttf") format('truetype'),
font-url("#{fontPath}/#{fontName}.svg#icons") format('svg')
;
#fallbackSRC: font-url("#{fontPath}/#{fontName}.eot");
/*--------------
Optional Files
---------------*/
/* Outline Icons */
#importOutlineIcons: true;
#outlineFontName: 'outline-icons';
#outlineSrc:
font-url("#{fontPath}/#{outlineFontName}.eot?#iefix") format('embedded-opentype'),
font-url("#{fontPath}/#{outlineFontName}.woff2") format('woff2'),
font-url("#{fontPath}/#{outlineFontName}.woff") format('woff'),
font-url("#{fontPath}/#{outlineFontName}.ttf") format('truetype'),
font-url("#{fontPath}/#{outlineFontName}.svg#icons") format('svg')
;
#outlineFallbackSRC: font-url("#{fontPath}/#{outlineFontName}.eot");
/* Brand Icons */
#importBrandIcons: true;
#brandFontName: 'brand-icons';
#brandSrc:
font-url("#{fontPath}/#{brandFontName}.eot?#iefix") format('embedded-opentype'),
font-url("#{fontPath}/#{brandFontName}.woff2") format('woff2'),
font-url("#{fontPath}/#{brandFontName}.woff") format('woff'),
font-url("#{fontPath}/#{brandFontName}.ttf") format('truetype'),
font-url("#{fontPath}/#{brandFontName}.svg#icons") format('svg')
;
#brandFallbackSRC: font-url("#{fontPath}/#{brandFontName}.eot");
Important!
For some reason less-rails gem monitors changes to
app/assets/semantic/semantic-ui/src/semantic.less but not any other
files in app/assets/semantic/semantic-ui/src folder. After changin
*.variables, *.overrides, or *.config files run rails tmp:clear or manually delete tmp/cache/assets folder.
Demo App
https://github.com/ziinfo/semantic_integration.git
any idea how to deal with that ? I mean jquery-ui seems not to be amd and I don't know how to manage that , any idea ?
jquery-ui-dist and jquery-ui-bundle do not seem to be maintained by the jquery-ui team. After jquery-ui v1.12 Its possible to use the official jquery-ui package from npm with webpack.
Update jquery-ui to 1.12 by updating package.json and npm install.
Then you can require each widget like this.
require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");
If you have used require("jquery-ui") before you need to replace it with separate imports for each widget. I think the new way is better because it will bundle only the code for the widget we need to use.
See documentation on using the 1.12 official npm package.
For some reason jquery-ui didn't play nice with webpack. I had to require jquery-ui-bundle instead.
npm i -S jquery-ui-bundle
and then require it after jquery e.g.
require('jquery');
require('jquery-ui-bundle');
youre in luck I did this just that yesterday, it's rather easy.
npm install --save jquery jquery-ui
Make sure that you have jquery aliased to resolve with the plugin in the webpack.config.js
...
plugins: [
new webpack.ProvidePlugin({
"$":"jquery",
"jQuery":"jquery",
"window.jQuery":"jquery"
}),
...
Then include two aliases in the webpack.config.js
The node_modules folder
The jquery-ui folder
``````
resolve : {
alias: {
// bind version of jquery-ui
"jquery-ui": "jquery-ui/jquery-ui.js",
// bind to modules;
modules: path.join(__dirname, "node_modules"),
Make sure that jquery gets loaded first in your app startup file.
var $ = require("jquery"),
require("jquery-ui");
If you need to use a theme configure the css-loader and the file-loader. Don't forget to npm install those loaders.
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.(jpe?g|png|gif)$/i, loader:"file" },
And use in your app startup file.
require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");
webpack-jquery-ui
webpack-jquery-ui
- use this plugin, e.g. if you use Rails 5, run
yarn add webpack-jquery-ui
When jQuery UI plugin starts, it checks if jquery provided, so
Add this code to your webpacker configuration file (shared.js - if you use it with Rails 5)
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery'",
"window.$": "jquery"
})
]
Add these lines into your app code.
require('webpack-jquery-ui');
require('webpack-jquery-ui/css');
to fix ActionController::InvalidAuthenticityToken in jquery.ajax
You have to pass an authenticity_token parameter with all your PUT, POST and DELETE requests.
To do that you can usually fetch it from the header with $('[name="csrf-token"]')[0].content
So your request would look something like:
var that = this;
$.ajax({
url: navigator_item.url,
data: { authenticity_token: $('[name="csrf-token"]')[0].content},
method: 'DELETE',
success: function(res) {
...
}
});
I include jQuery into my application in another way
Instead of using:
plugins: [
new webpack.ProvidePlugin({...
You should add 'jquery': 'jquery/src/jquery' to aliases in the webpack config file:
module.exports = {
resolve: {
alias: {
'jquery': 'jquery/src/jquery'
}
}
It will provide module name 'jquery'. jQuery UI checks this name on init.
Then in you app.js file you write:
import $ from 'jquery'
import 'webpack-jquery-ui/css'
import 'webpack-jquery-ui/sortable' // if you need only sortable widget.
window.jQuery = $;
window.$ = $; // lazy fix if you want to use jQuery in your inline scripts.
The accepted answer doesn't work for me as the jQuery-ui package on NPM isn't pre-built and therefore doesn't contain jquery-ui.js; the package will either need built before use or all the widgets included/used individually.
Quickest way I got the whole package working was by first downloading the distributable version:
npm install jquery-ui-dist --save
I needed to add an alias for jquery-ui-dist to avoid a 'Cannot find module' error (using just require('jquery-ui-dist') won't work, because the .js filename is different), by adding this to webpack.config.js:
resolve: {
alias: {
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
}
},
Finally, you can use this in the .js file where the modules are loaded:
var jQuery = require('jquery');
require('jquery-ui');
Alternatively, you can avoid having to require the scripts when loading the modules, and having to declare jQuery as a variable, by using ProvidePlugin in your webpack.config.js:
plugins: [
new webpack.ProvidePlugin({
'jQuery': 'jquery',
'$': 'jquery',
'global.jQuery': 'jquery'
})
],
The steps that worked for me (in a Rails 5.1.6 project) aren't identical to any of the above:
Install jquery and jquery-ui: yarn add jquery and yarn add jquery-ui
Add the following to the webpack config (i.e. in /config/webpack/environment.js) to globally set $ and jquery and jQuery:
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery'
})
)
Require whichever individual jquery-ui package(s) you want, at the top of your pack (e.g at the top of /javascript/packs/application.js:
require("jquery-ui/ui/widgets/sortable")
Then you can call, for example, $('.selector').sortable() anywhere in your pack.
add jquery in your node_modules using;
npm install --save jquery jquery-ui
and add externals in your webpack.config.js like;
...
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery",
"jquery-ui": "jquery-ui/jquery-ui.js",
}
it worked for me
You should import all of these and check which ones you really need.
require('jquery-ui/ui/core.js');
require('jquery-ui/ui/data.js');
require('jquery-ui/ui/form.js');
require('jquery-ui/ui/form-reset-mixin.js');
require('jquery-ui/ui/focusable.js');
require('jquery-ui/ui/disable-selection.js');
require('jquery-ui/ui/plugin.js');
require('jquery-ui/ui/labels.js');
require('jquery-ui/ui/position.js');
require('jquery-ui/ui/scroll-parent.js');
require('jquery-ui/ui/tabbable.js');
require('jquery-ui/ui/unique-id.js');
require('jquery-ui/ui/widget.js');
require('jquery-ui/ui/widgets/accordion.js');
require('jquery-ui/ui/widgets/autocomplete.js');
require('jquery-ui/ui/widgets/button.js');
require('jquery-ui/ui/widgets/checkboxradio.js');
require('jquery-ui/ui/widgets/controlgroup.js');
require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/widgets/dialog.js');
require('jquery-ui/ui/widgets/draggable.js');
require('jquery-ui/ui/widgets/droppable.js');
require('jquery-ui/ui/widgets/menu.js');
require('jquery-ui/ui/widgets/mouse.js');
require('jquery-ui/ui/widgets/progressbar.js');
require('jquery-ui/ui/widgets/resizable.js');
require('jquery-ui/ui/widgets/selectable.js');
require('jquery-ui/ui/widgets/selectmenu.js');
require('jquery-ui/ui/widgets/slider.js');
require('jquery-ui/ui/widgets/sortable.js');
require('jquery-ui/ui/widgets/spinner.js');
require('jquery-ui/ui/widgets/tabs.js');
require('jquery-ui/ui/widgets/tooltip.js');
require('jquery-ui/ui/effect.js');
require('jquery-ui/ui/effects/effect-blind.js');
require('jquery-ui/ui/effects/effect-bounce.js');
require('jquery-ui/ui/effects/effect-clip.js');
require('jquery-ui/ui/effects/effect-drop.js');
require('jquery-ui/ui/effects/effect-explode.js');
require('jquery-ui/ui/effects/effect-fade.js');
require('jquery-ui/ui/effects/effect-fold.js');
require('jquery-ui/ui/effects/effect-highlight.js');
require('jquery-ui/ui/effects/effect-puff.js');
require('jquery-ui/ui/effects/effect-pulsate.js');
require('jquery-ui/ui/effects/effect-scale.js');
require('jquery-ui/ui/effects/effect-shake.js');
require('jquery-ui/ui/effects/effect-size.js');
require('jquery-ui/ui/effects/effect-slide.js');
require('jquery-ui/ui/effects/effect-transfer.js');
require('jquery-ui/ui/vendor/jquery-color/jquery.color.js');