Unexpected string literal "#hotwired/turbo-rails" in browser console - ruby-on-rails

error ...
in the browser console (Safari), it display the error:
SyntaxError: Unexpected string literal "#hotwired/turbo-rails". import
call expects one or two arguments.
This error points to application.js.
Is this yet another rails error than can be safely ignored, is it an indication my set-up is not quite right? Is it a bug?
gemfile includes...
gem "cssbundling-rails", "~> 1.1"
gem 'turbo-rails'
gem 'importmap-rails'
importmap.rb
pin "application", preload: true
pin "#hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true
pin "#hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin "trix"
pin "#rails/actiontext", to: "actiontext.js"
pin "stimulus-autocomplete", to: "https://ga.jspm.io/npm:stimulus-autocomplete#3.0.2/src/autocomplete.js"
pin "choices" # #10.2.0
pin_all_from "app/javascript/controllers", under: "controllers"
application.js
import "#hotwired/turbo-rails"
import "popper"
import "bootstrap"
import "controllers"
import * as bootstrap from "bootstrap"
package.json
{
"name": "flightrecord",
"private": "true",
"dependencies": {
"#fortawesome/fontawesome-free": "^6.2.0",
"#hotwired/stimulus": "^3.2.1",
"#hotwired/turbo-rails": "7.2.4",
"#popperjs/core": "^2.11.6",
"#rails/actioncable": "^7.0.3-1",
"#rails/actiontext": "^7.0.4",
"#rails/activestorage": "^7.0.3-1",
"#rails/webpacker": "5.4.3",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.2",
"choices.js": "^10.2.0",
"currency.js": "^2.0.3",
"dropzone": "^5.9.2",
"sass": "^1.56.2",
"sortablejs": "^1.14.0",
"stimulus-autocomplete": "^3.0.0-rc.2",
"tributejs": "^5.1.3",
"trix": "^2.0.3"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3"
},
"engines": {
"node": "19.2.0",
"yarn": "1.22.19",
"npm": "6.14.9"
},
"scripts": {
"build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
}

Related

Rails 6 + Postcss + webpack: TypeError: this.getOptions is not a function

When I run my web app :
Failed to compile.
./app/javascript/css/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/dist/cjs.js??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/css/application.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/Users/ben/code/Tioneb/railsapp/node_modules/postcss-loader/dist/index.js:40:24)
The package.json looks like this:
{
"name": "blog",
"private": true,
"dependencies": {
"#fullhuman/postcss-purgecss": "^4.0.3",
"#hotwired/turbo-rails": "^7.0.0-beta.5",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.3.0",
"#tailwindcss/aspect-ratio": "^0.3.0",
"#tailwindcss/forms": "^0.3.4",
"#tailwindcss/typography": "^0.4.1",
"autoprefixer": "^9",
"postcss": "^8.3.11",
"postcss-loader": "^6.2.0",
"stimulus": "^2.0.0",
"tailwindcss": "^2.2.19"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.11.2"
}
}
app/javascript/pack/application.js:
require("#rails/ujs").start()
require("#rails/activestorage").start()
require("channels")
import "components/prism"
require("../css/application.scss")
app/javascript/css/application.scss:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
/postccs.config.js
module.exports = {
plugins: [
require('tailwindcss')('./tailwind.config.js'),
require('autoprefixer'),
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
I tried different version of packages, different setups, however, nothing seems to be working.
Any idea how to solve this issue?

how to config tailwinds in rails 6 to display correctly on Heroku

I built a simple rails 6 application with tailwindcss and deployed it to heroku ' my app'
If you have click on the link you would see my issue.....
this is how it is suppost to look
locally the app renders as it should but once view from heroku it doesn't display the page properly. I can see that the tailwind styles are present in the html when I inspect the page which only leads me to believe that asset pipeline isn't configured properly for heroku to pick up the tailwind configuration.
if anyone has experience this before or can guide me to where I went wrong I would be most appreciative.
Thank you
app/javascript/packs/application.js
//=require activestorage
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
import "../stylesheets/application.scss"
app/javascript/stylesheets/application.scss
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
postcss.config.js
let environment = {
plugins: [
require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
};
if (process.env.RAILS_ENV === 'production') {
environment.plugins.push(
require('#fullhuman/postcss-purgecss')({
content: [
'./app/**/.html.erb',
'./app/helpers/**/*.rb',
],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
)
}
module.exports = environment
package.json
{
"name": "pantry_staples",
"private": true,
"dependencies": {
"#fullhuman/postcss-purgecss": "^2.3.0",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.3.0",
"jquery": "^3.5.1",
"tailwindcss": "^1.7.3",
"#tailwindcss/custom-forms": "^0.2.1",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"stylelint": "^13.3.3",
"stylelint-config-standard": "^20.0.0",
"stylelint-csstree-validator": "^1.8.0",
"stylelint-scss": "^3.17.2",
"webpack-dev-server": "^3.11.0"
}
}

electron-vue with webview cannot bypass/access Cloudflare-powered websites

I have installed the template from Electron-vue and I'm experiencing an issue with specific websites. These websites work on Chrome and Edge, yet, fail to completely load in webview.
The following example is the whole setup of the view. The console of this show that Local Storage, Session Storage and IndexedDB only have an entry for the website faselhd but have no data inside. The Cookies has an entry for the website with this type of data fcuid
<webview id="webview_custom" :src="https://www.faselhd.co/" style="height: 100%"></webview>
As far as I understand, there is an issue saving the session of the website and it's working correctly on the normal browsers but cannot save the session in the webview.
I have tried using this policy in my index.ejs, but had no luck.
<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline' 'unsafe-eval'">
Expected: The website loads and shows the content.
Currently: The website keeps refreshing because the session cannot be saved.
package.json
{
"name": "my-app",
"version": "1.0.0",
"author": "author",
"description": "description",
"license": null,
"main": "./dist/electron/main.js",
"scripts": {
"build": "node .electron-vue/build.js && electron-builder",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": ""
},
"build": {
"productName": "app-electron",
"appId": "com.username.app_electron",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"dependencies": {
"axios": "^0.18.0",
"electron-context-menu": "^0.16.0",
"vue": "^2.5.16",
"vue-electron": "^1.0.6",
"vue-router": "^3.0.1",
"vue-tabs-chrome": "^0.5.1",
"vuetify": "^2.2.17",
"vuetify-loader": "^1.4.3",
"vuex": "^3.0.1",
"vuex-electron": "^1.0.0"
},
"devDependencies": {
"ajv": "^6.5.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"cfonts": "^2.1.2",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"deepmerge": "^4.2.2",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^2.0.4",
"electron-builder": "^20.19.2",
"electron-debug": "^1.5.0",
"electron-devtools-installer": "^2.2.4",
"fibers": "^4.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "0.4.0",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"node-sass": "^4.9.2",
"sass": "^1.26.3",
"sass-loader": "^7.3.1",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.4",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.3"
}
}
You're using the default template electron-vue which it uses a very old Electron 2.0.1 and that is Chrome 61, Node 8.9.3, V8 6.1.534.41 which is quite outdated to properly support Local Storage and Session Storage. You need to update Electron to a newer version.
To your existing project
Update electron to 8.1.x by running yarn add electron (this will update electron to latest 8.1.1)
Open .electron-vue/webpack.renderer.config.js and at line 115 change HtmlWebpackPlugin configuration object to this:
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: false
}),
Open src/main/index.js and update/add BrowserWindow webPreferences options like this:
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
// Add these webPreferences options
webPreferences: {
nodeIntegration: true,
webviewTag: true
}
})
Add a webview to your renderer. I had to set <webview src="..."> insted of binding <webview :src="..."> like this:
<template>
<div id="app">
<!-- <router-view></router-view> -->
<webview id="webview_custom" src="https://www.faselhd.co/" style="height: 100%"></webview>
</div>
</template>
<script>
export default {
name: 'vue-electron-webview2'
}
</script>
<style>
/* CSS */
html, body, #app { height: 100% }
</style>
Now run the app using yarn dev and you'll be able to see the the web page properly.

Unable to use keytar in main.js of electron project

I keep getting this error:
error in ./node_modules/keytar/build/Release/keytar.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./node_modules/keytar/lib/keytar.js 1:13-52
# ./src/background.js
# multi ./src/background.js
I have background.js set as the main electron file in package.json because I'm using vue/vuetify with it which uses a main.js file as well.
{
"name": "project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js", // <------------------ see right here
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.4.3",
"jwt-decode": "^2.2.0",
"keytar": "^5.0.0",
"request": "^2.88.0",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuetify": "^2.1.0",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"electron": "^7.1.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-loader": "^0.6.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-electron-builder": "^1.4.3",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
Searching, it seems this happens when keytar is used in a renderer process. But background.js isn't a renderer process. Or am I missing something? I am completely new to electron.
I needed to mark keytar as external (as mentioned at https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#native-modules)
// vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
// List native deps here if they don't work
externals: ['keytar']
}
}
}
Once I did that it worked properly.
Run appropriate loader (source).
yarn add node-loader -D
// vue.config.js
configureWebpack: {
devtool: 'source-map',
module: {
rules: [
{ test: /\.node$/, loader: 'node-loader' }
]
}
}

Webpack 4.6 not rendering with bootstrap 4.1

I have a project in ASP.NET Core 2 and have setup WebPack (see below). After building bundle.js (main.js in the example below), all seems OK but the website is not working (inspecting the element, there is no CSS at all).
Package.json
{
"version": "1.0.0",
"name": "cloudcrm",
"private": true,
"scripts": {
"dev": "webpack --mode development ./src/main.js --output ./wwwroot/dist/main.js",
"build": "webpack --mode production ./src/main.js --output ./wwwroot/dist/main.js"
},
"devDependencies": {
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.3"
},
"dependencies": {
"bootstrap": "^4.1.0",
"chart.js": "2.7.1",
"datatables.net-bs4": "1.10.16",
"font-awesome": "4.7.0",
"jquery": "3.3.1",
"jquery.easing": "^1.4.1",
"popper.js": "^1.14.3"
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
loader: "url-loader",
options: {
prefix: "font",
limit: 10000,
mimetype: "application/octet-stream"
}
}
]
},
};
main.js
import './css/site.css';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'jquery';
import 'font-awesome/css/font-awesome.css';
import 'chart.js';
import 'jquery.easing';
import 'datatables.net-bs4';

Resources