In my meteor 1.3 and React apps, when I try to use a jquery plugin, it won't work. On the console, I always see an error saying the function is not defined. For example, Uncaught TypeError: $(...).countdown is not a function. Earlier I added the js files in the header like this in a index.html file (Placed in the app's root):
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.1.0/jquery.countdown.min.js"></script>
</head>
But since Meteor 1.3 moved all js to the footer, now I load them inside the body tag in the same index file. Now the files are loaded and the jquery plugins can find jQuery without issues. But have trouble using them in the react components. I wrap my functions inside componentDidMount and $(document).ready. But it's not working. Any idea why?
Have you tried installing it as an npm package?
As of 1.3 Meteor supports modules and NPM packages:
http://guide.meteor.com/1.3-migration.html#modules
meteor npm install --save jquery-countdown
Package URL: https://www.npmjs.com/package/jquery-countdown
Then import the dependency where you need it.
Not 100% sure on the import:
import 'jquery-countdown';
or something like:
import {countdown} from 'jquery-countdown'
Related
I am very excited to use Rails7 especially that we finally get rid of webpacker.
However, today when I tried to try Rails7, I didn't get how to bundle javascript scripts anymore... and there wasn't tutorial there or I just could not find it.
For example, I wanted to import jquery so I ran
yarn add jquery
and then I wrote:
// application.js
//importmap-rails
import "#hotwired/turbo-rails"
import "controllers"
import jquery from 'jquery'
But it didn't work,
then I read the readme on importmap-rails, and I ran
./bin/importmap pin jquery
then it added a line in config/importmap.rb
pin "jquery", to: "https://ga.jspm.io/npm:jquery#3.6.0/dist/jquery.js"
It worked, however, it was not what I expected exactly. I wanted the jquery came from node_modules/ instead of CDN
How can I achieve that? To import npm packages that I install from yarn/npm?
Or just point out where I can find documents about how to use javascript in Rails7?
./bin/importmap pin jquery --download
will download it.
Working with JavaScript in Rails
(about dealing with JS but little info about importmap)
importmap-rails on GitHub (more info about importmap)
I believe you can manually update your config/importmap.rb file to read
pin "jquery", to: "./node_modules/jquery"
That being said, I believe the design decisions made with importmaps may not include npm or yarn. I believe importmaps represents an alternative method for handling javascript outside of webpacker/yarn/npm.
I am using express on the server and using jsx as the view engine. When I try to import CSS files in my jsx file
import './style.css' the page throws an error on the first line
#container{
^^
Unexpected identifier
Even if I use other css files, for eg.
import antd\dist\antd.css it throws the same error. Please tell me if I should add any more details. Please help.
Edit: Someone told me that I need to configure style-loader because I am not using webpack or create-react-app but using jsx as a view engine. Any suggestions or steps on how to do that would be appreciated. I have already npm installed style-loader and css-loader
This is the first time I am publishing a Vue component to NPM and everything works fine, except the fact that the CSS is not present. It all works as expected when I run it locally but if I create a test project, install the npm package and import the component there is no CSS.
Steps to reproduce:
Create a new Vue project
run npm install elementable-vue
Use this template for App.vue: https://github.com/sandermaas/elementable-vue/blob/master/src/App.vue
Change the import (in the template) to import ElemenTable from 'elementable-vue'
run 'npm run serve'
You can check out the source code on https://github.com/sandermaas/elementable-vue
I can't figure out why this is not working so any help is very much appreciated.
You need to import your css as well in app.vue of your newly created project:
<style>
#import '~elementable-vue/dist/elementable-vue.css';
</style>
I am trying to deploy my project which needs the web3 Javascript API. As done by some examples I found online, I need to do the following:
<script type="text/javascript">
var Web3 = require('web3');
var web3 = new Web3();
web3.setProvider(new web3.providers.HttpProvider("http://localhost:8545"));
...code... </script>
When I run the project i get this error "Uncaught ReferenceError: require is not defined". I've already done "meteor add modules", meteor add aramk:requirejs, sudo npm install require and sudo npm install requirejs. I downloaded and included the js file (through templating since in meteor js files are handled differently). What am I missing?
I see that you use require inside a script tag so I think this code is in a html file. If that's so, you will need to move that code to a js file because require can not be used in html file.
For example, I want to use Slider Pro in my meteor project as an npm package without having to create an Atmosphere package out of it, however the docs (https://github.com/bqworks/slider-pro) say to include files in <head>. See Image Snippet of Docs. How would I do that?
There are a few ways you could do this. Either way you choose you still need to add it as an npm package through Meteor:
meteor npm install --save slider-pro
And then what I commonly do, is create a file inside imports/startup/client directory called vendor.js, and just use this code in the vendor.js file:
import '../../../node_modules/slider-pro/dist/js/jquery.sliderPro.js';
import '../../../node_modules/slider-pro/dist/css/slider-pro.css';
Then in the file located at imports/startup/index.js just add this to include that vendor.js file:
import './vendor.js';
You just need to make sure that the path is correct, in the vendor.js file, as you can see, since my vendor.js file is nested 3 directories deeper than the node_modules directory, all files have to be prepended with ../../../ which basically means "go back three directories"