I am trying to use jquery-ui in my project based on storybook.
It always give me error of JQuery not defined.Can anyone help me in resolving this issues.
I have also tried putting the below code in ./storybook/main.js
config.plugins.push(
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
})
);
but didn't work.
FYI... I already have installed jquery from npm .
Related
I created a very simple Rails program named freelancer and want to use Bulma library and Jquery in this program. So here is what I did.
In the file "Gemfile", I add this lines
gem ‘bulma-rails’, ‘~> 0.9.4’ gem ‘bulma-extensions-rails’, ‘~> 1.0.30’
In this file app -> assets -> stylesheets -> application.css
I added this lines
#import 'bulma'; #import 'bulma-extensions'
Then I ran these commands
Bundle install; Yarn add jquery;
I thought that in these files package.json and yarn.lock, there must be jquery line ? But there are not.
Here is my code, if you need to reference
https://github.com/nguyencuc2586/freelancer02
Could you please give me some advices for this problem ? Thank you in advance.
As I see from your github code, there is a jquery line in both package.json and yarn.lock file so I think it installed correctly, but in order to work, jquery needs to be initialized in app/javascript/application.js. I personally initialize it next way:
Create new file inside app/javascript directory and call jquery.js
Paste this three line there
import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery
import that file in application.js
import "./jquery"
Now jquery should work as expected
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.
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.
I'm using yeoman's backbone generator, and I ran this:
bower install backbone.localStorage -S
And I manually had to insert this into index.html:
<script src="bower_components/backbone.localStorage/backbone.localStorage.js"></script>
Is there some way for bower to automatically insert <script> tags? I thought part of the benefit of bower was not having to figure out in which order to include your scripts?
Just run
grunt bowerInstall
after bower install
You can use wiredep to push dependencies into your HTML code from bower. This is the approach used by generator-angular when you run yo angular:
var wiredep = require('wiredep');
wiredep({
directory: 'app/bower_components',
bowerJson: JSON.parse(fs.readFileSync('./bower.json')),
ignorePath: 'app/',
htmlFile: 'app/index.html',
cssPattern: '<link rel="stylesheet" href="{{filePath}}">'
});
Bower won't add support for a specific function like this, but will soon allow you to specify an action to take after 'bower install'ing a new package. This will be called a "postinstall," similar to npm.
In the meantime, however, I have created a library to help with this. Since you're using yeoman, just add "grunt-bower-install" as an npm 'devDependency', then follow the instructions here: https://github.com/stephenplusplus/grunt-bower-install.
Use --save
bower install --save <YOUR_PACKAGE>
The --save option updates the bower.json file with dependencies. This will save you from having to manually add it to bower.json yourself. You'll see that the script section at the bottom of index.html has automatically updated.
Reference: http://yeoman.io/codelab/install-packages.html