I am working on a Rails project that has been using assets pipeline but we are currently trying to transition to webpack. I encountered a problem when attempting to get TinyMCE to work after pulling it through yarn - the text editor simply won't load.
Before the transition to webpack
Originally I used a CDN in the application.html.haml and things were working fine:
%script{src: 'https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=gexncjni90zx3qf0m5rr7kl8l40wd5yuly2xjza0g3kwrljt'}`
After the transition
I installed the package through yarn:
$ yarn add tinymce
I also have my tinyMce.js file (the function itself has not been changed):
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
function tinyMce() {
$(document).on('turbolinks:load', function () {
tinyMCE.remove();
tinyMCE.init({
selector: 'textarea.tinymce',
plugins: [
'table', 'lists'
],
});
});
}
export { tinyMce };
And in my application.js:
import { tinyMce } from "../vendor/tinyMCE/tinyMce";
Since TinyMCE will not work without a skin, I followed the documentation and ran
$ cp -r node_modules/tinymce/skins skins
But the error in the console does not get resolved:
I tried putting the skins folder directly in the root directory, in a packs folder placed in the root and in the javascript/packs but the error stays the same, even when I try specifying the skin_url.
General notes
Webpack itself is working fine, both with custom scripts and imported packs (tested with typed.js).
tinymce seems to be loading as well - previously I had more errors in the console, regarding the table and lists plugins, but these went away after adding the 2 import lines to tinyMce.js.
Any tips on what I might be missing?
I managed to get it to work by adding these 2 lines to my tinyMce.js file:
import 'tinymce/skins/lightgray/content.min.css';
import 'tinymce/skins/lightgray/skin.min.css';
At that point the text editor was working as expected, however I was getting the following errors in my console:
This was resolved by adding skin: false to my tinymce.initsetup.
Related
I am following this document and trying to grab the tag input functionality in my rails application using webpack.
I added the following line
import 'tagsinput.js'
to import this library in my application.js file but performing a yarn install didn't seem to recognize the library.
I am guessing I am importing it the wrong way or either not initializing it in webpack config. Looking for help on the right way to import and use this library using yarn and webpack.
I was able to get bootstrap4-tagsinput working in my Rails app for webpacker by:
A) Adding bootstrap4-tagsinput module via Yarn
yarn add bootstrap4-tagsinput
B) Importing the bootstrap4-tagsinput into my application.js
import 'bootstrap4-tagsinput/tagsinput.js'
C) Importing stylesheet into my main scss file
#import "~bootstrap4-tagsinput/tagsinput";
Here's what it looks like in my app:
Harumpf. This only shows up with tags if I refresh the form. It seems to run too early.
I'm using Yarn to add JS modules to my Rails app.
I've added Google's markerclusterer.js. yarn add marker-clusterer-plus
I then imported it in application.js.erb: //= require marker-clusterer-plus/src/markerclusterer.js
It works but I see an error in the console: ReferenceError: Can't find variable: module.
Digging into the code, I see that the offending line is:
module.exports = MarkerClusterer
Now I'm out of my depth. I understand module.exports is a way of exposing code for re-use in other files. I understand it to be standard JS. So if it's standard JS what's causing the error message?
Am I using Yarn correctly? What is causing the error?
It looks like marker-clusterer-plus/src/markerclusterer.js can't be used in browser until you compile it with some tool. For example you can use webpack/webpacker to compile modern version of JavaScript.
You can fix this problem in 3 different ways:
1) Use webpacker (https://github.com/rails/webpacker) to compile assets.
import 'marker-clusterer-plus/src/markerclusterer.js'; doesn't raise any error on my machine.
2) Use CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js"></script>
This file doesn't contain module.exports = MarkerClusterer, so there will be no error.
3) Download https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js (This file doesn't contain module.exports = MarkerClusterer).
Put it into javascripts folder.
Put //= require markerclusterer.js into application.js
I am upgrading to Babel 7. They have changed how config files are loaded.
As much as I've tried per their docs I can not make it work. Babel config loading docs
An Electron app with two package.json structure is explained here:
Electron builder docs
The problem is it looks like my babel config is not being loaded for the code where the second package.json is located. (main renderer)
I tend to think that this is because of this new way of loading config and the two package.json but it could be something else.
The app structure looks like this:
/package.json
/.babelrc (or babel.config.js now)
/app/package.json
/app/main.js <-- this can not be compiled anymore
I use Webpack with the babel loader.
Somehow, with the Webpack dev server, it works, but compiling for production fails.
The exact error I get is this:
(function (exports, require, module, __filename, __dirname) {
import "core-js/modules/web.dom.iterable";
SyntaxError: Unexpected string
For which I got a clue here that made me think there is some config being ignored.
The entire project is open source and can be seen in Github.
Cloning and running npm run compile:main will show the error.
After upgrade and dismissing Bower as recommended: Is there a way to include JQueryUI into an Ember project without using Bower? My project depends heavily of JQueryUI dialogs.
$ ember -v
ember-cli: 3.3.0
node: 8.11.3
os: linux x64
Do I have to reintroduce Bower into my project? Like in this old Using jquery in Ember-cli advice?
does this solve your use case?:
ember install ember-auto-import
npm install jquery-ui
and then wherever you need to use it:
import { stuff } from 'jquery-ui';
Including external js through npm package is always suggested. Above answer shows how to do it.
Sometime the developer won't maintain the package. In that case, you have to include it manually to get the latest js for your app.
If you want to include it manually (not depending on the npm package), here is the way to add external js in your application
1) Download the latest stable jquery-ui from their official site.
2) Extract it. Include jquery-ui.js file in your app/vendor/jquery-ui.js
(Where vendor is the home for external js)
3) Once added import the js in ember-cli-build.js file
app.import('vendor/jquery-ui.js');
4) Restart the ember app.
I was able to get it to work by adding "jquery-ui": "^1.13.2", to my package.json file.
Inside ember-cli-build.js I added the following
// jQuery UI
app.import({
development: 'node_modules/jquery-ui/dist/jquery-ui.js',
production: 'node_modules/jquery-ui/dist/jquery-ui.min.js',
});
// jQuery UI CSS
app.import({
development: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.css',
production: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.min.css',
});
I'm trying to use the vue-introjs package in a Rails 5.1 app.
I've added the vue-introjs and intro.js packages through yarn.
I want to make this work using the Rails webpacker gem instead of using workarounds.
The vue-introjs documentation says the following is required in the webpack configuration:
// webpack.config.js
{
plugins: [
new webpack.ProvidePlugin({
// other modules
introJs: ['intro.js', 'introJs']
})
]
}
The Rails webpack setup doesn't have a webpack.config.js file by default, but it does have environment specific files, so I tried adding that config to /config/webpack/environment.js but that had no effect.
I then tried to adapt the sample found on this github issue which seems to be attempting a similar thing to what I want, but whilst I could get the page to load without any errors, I still get the error ReferenceError: introJs is not defined whenever I try to call myApp.$intro(), which should return an instance of the introJs module.
As a temporary measure while I couldn't get that working, I've also tried just putting this at the top of my webpack pack file where the Vue app is created:
import introJs from 'intro.js'
import VueIntro from 'vue-introjs'
But that still has the same error as above, that introJs is not defined.
Can anyone point me in the right direction for how to include the introJs module so the vue wrapper package for it will work correctly?
Here's how I would start with configuring webpacker given what you have installed so far:
// config/webpack/environment.js
const webpack = require('webpack');
const {environment} = require('#rails/webpacker');
environment.plugins.append(
'ProvidePlugin-IntroJS', // arbitrary name
new webpack.ProvidePlugin({
introJs: ['intro.js', 'introJs']
}),
);
module.exports = environment;
You'll need to restart your dev server when making changes to the webpack config. I would expect you will still need to import 'intro.js' somewhere in your dependency graph.