I followed the documentation from https://chartkick.com/ on a fresh Rails 6 install but I get the following:
Webpacker can't find chartkick in /home/sbstn/codes/desafio_latam/g24/chart_demo/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
"application.js": "/packs/js/application-0db4c39e559fa03658c6.js",
"application.js.map": "/packs/js/application-0db4c39e559fa03658c6.js.map",
"entrypoints": {
"application": {
"js": [
"/packs/js/application-0db4c39e559fa03658c6.js"
],
"js.map": [
"/packs/js/application-0db4c39e559fa03658c6.js.map"
]
}
}
}
I've made a partial with the following and rendered inside an ActiveAdmin panel:
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag "application", "chartkick" %>
<% my_chart = {"ejemplo1": 20, "ejemplo2": 30} %>
<%= bar_chart my_chart %>
But plain simple examples form de oficial documentation didn't work on a normal view either.
Could you please provide some advice on how to integrate chartkick with webpacker and activeadmin
It was my fault. Adding the gem is a must even if you add the requirements with yarn.
Thanks
Related
From like hour ago I keep getting network error on material design icons cdn as error name not resolved.
http://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css
I am wondering why is nuxt app using cdn instead of downloaded files?
When I try to run npm install nuxt-material-design-icons or npm install material-design-icons it just freezes..
I figured it out,
Step 1: Add Google fonts icon's CDN.
export default {
head () {
return {
link: [
// Add this
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
],
}
}
}
Step 2: Use it (you are done!)
<template>
// Add this
<span class="material-icons">face</span>
</template>
Here is the complete list of Material Icons.
For Nuxt.js, you will need to install this package:
yarn add nuxt-material-design-icons-iconfont
// Or if you are using npm:
npm install nuxt-material-design-icons-iconfont
And declare that package within nuxt.config.js file:
modules: [
'nuxt-material-design-icons-iconfont',
],
Add "nuxt-material-design-icons" in "modules" in nuxt.config.js
I created a new project using durandal using its starter kit (http://durandaljs.com/get-started.html)
I then added materialize using bower (bower install materialze)
After adding materialize to require config of durandal
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1',
'hammerjs': '../lib/hammer/hammer',
'jquery.hammer': '../bower_components/materialize/js/jquery.hammer',
'materialize': '../bower_components/materialize/dist/js/materialize'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jquery'
},
'materialize': {
deps: ['jquery', 'hammerjs']
},
'jquery.hammer': {
deps: ['jquery', 'hammerjs', 'waves']
}
}
});
I end up in error -
Uncaught Error: Mismatched anonymous define() module: function ($, Hammer)
Actually, every time I refresh, I end up with different errors, which seems to point me to something messed up with require. My question is - if everything works rock solid before adding materialize, how does adding it make things so flaky?
Am I doing something wrong?
Your question is from 1 year, 9 months ago and now Materialize doesn't have jQuery as a dependency and I believe they no longer use hammer.js or they are about not to. Still this is something everybody runs into with Materialize and it is fixable!
First off, if you aren't in the habit of looking inside of your node_modules I encourage you to take a look and see if you can find hammer.min.js (I believe it is in the bundle you would have in 2016) or hammer.js because as soon as you can if you start looking at other people's source you will learn stuff faster. Some of these problems arise because you can install modules globally or locally and you gotta manage all the versions and it just goes on and on but this is the fun of npm and node package managers.
**
Quick Answer Begins Here:
**
Bower is deprecated but this issue effects you similarly if you use npm in 2018 and it would in theory help people using bower. You need to include the javascript dependencies (note that jQuery became optional recently with the release of version 1.0.0)
Example 1
This is what I do if I've installed my npm modules locally and I am making an electron application:
you are going to have the same problem with CSS so in foo.html you want:
<link href="./node_modules/materialize-css/dist/css/materialize.css" rel="stylesheet">
in bar.js you want:
window.Hammer = require('./node_modules/materialize-css/js/hammer.min.js')
Example 2:
I install my modules globally and want to pull in Materialize maybe I use grunt or webpack and in this contrived example im using jquery-2.1.4.min.js
In foo.js
window.$ = window.jQuery = require('../assets/jquery/jquery-2.1.4.min.js');
window.Hammer = require('../assets/hammer/hammer.min.js');
I'm having trouble getting my OpsWorks custom recipe to launch my node application. I'm just starting to learn the fundamentals of Chef, so I may be missing something rather obvious.
To get me started I forked a copy of AWS nodejs cookbook and made very minor changes. I was also sure to copy the node deploy script here.
My layers are now fully configured and I can trigger node manually via SSH, however it seems that upon deploy it's not triggered by the Ruby script.
I'm assuming the start program line (which is the only place in the cookbook where I can see node being started) isn't getting run:
check host node_web_app_<%= #application_name %> with address 127.0.0.1
start program = "/bin/bash -c 'cd <%= #deploy[:deploy_to] %>/current; source <%= #deploy[:deploy_to] %>/shared/app.env; /usr/bin/env PORT=<%= #deploy[:nodejs][:port] %> NODE_PATH=<%= #deploy[:deploy_to] %>/current/node_modules:<%= #deploy[:deploy_to] %>/current /usr/local/bin/node <%= #monitored_script %>' --NODE_ENV=prod"
stop program = "/usr/bin/pkill -f 'node <%= #monitored_script %>'"
<% if #deploy[:ssl_support] -%>
if failed port <%= #deploy[:nodejs][:port] %> type TCPSSL protocol HTTP
<% else -%>
if failed port <%= #deploy[:nodejs][:port] %> protocol HTTP
<% end -%>
request /
with timeout 10 seconds
then restart
So I'm really at a loss for why it's not doing it's thing.
It almost seems as though this deploy cookbook wasn't fully completed. If there's a better cookbook available that someone can suggests, I'd consider changing.
Thanks.
Using the AWS opsworks nodejs layer, you should be able to set environment variables during App registration. You should see a section like this:
under app settings:
Where you can set all your variables to be included in the deployment.
I'm managing a project written in angularjs, with the default directory structure, excluding the app directory which uses versioning (ie. "app/0.0.0/", "app/0.1.0/" etc..).
I'm trying to use grunt's package.json file's "version" property to load the correct
directory so I won't have to manually change the app path in gruntfile.js
but for some reason I keep getting "Cannot GET /" when I run "grunt server".
To better explain this, here's a sample of my gruntfile.js:
var yeomanConfig = {
app: 'app/<% pkg.version %>/',
dist: 'dist'
...
grunt.initConfig({
yeoman: yeomanConfig,
pkg: grunt.file.readJSON('package.json'),
...
If I manually change the app property to "app/0.0.0" it works like a charm
so I'm guessing this has something to do with the templating.
Any ideas?
Thank you very much for the help.
Edit: Thank you for the correction Andreas and Matjaz, but this doesn't solve the problem and gives the same error...
This solves the problem for me but without the templating system:
var pkgVersion = grunt.file.readJSON('package.json').version;
// configurable paths
var yeomanConfig = {
app: 'app/'+pkgVersion,
dist: 'dist'
};
It's pretty ugly but it works. Hoping for a proper solution.
The best way to handle above scenario is that, In the grunt.initConfig define the package.json
grunt.initConfig({
pkg: grunt.file.readJSON("package.json")
})
Once above initialized you can use the properties of the package.json throughout the grunt.js file.
<%= pkg.version %>
<%= pkg.homepage %>
To echo data use <%=:
<%= pkg.version %>
I extend the appConfig with the name and version:
var appConfig = {
app: require('./bower.json').appPath || 'app',
name: require('./package.json').name || 'angularapp',
version: require('./package.json').version || '1.0.0',
dist: 'dist'
};
Then you can access the variables like this:
<%= yeoman.name %>
<%= yeoman.version %>
For me a clean solution with an optional fallback.
I'm having problems using canJS together with stealjs, i've cloned the repo of javascriptmvc (3.3 use canJS). Now i've this folder structure
/js
/can
/documentjs
/funcunit
/plugins
.
.
.
In another part of my application i've a "standalone module" e.g layout (generated using the scaffolding tool).
I load this module using "js/steal/steal.js?path/to/module/layout" inside my page and it works. If I stole some jquery plugins (e.g. located in the main js folder) inside my layout.js like so:
steal('plugins/jqueryplugin.js', 'plugins/jqueryplugin.css', function() {
// my code here
});
it still work, but when i try to add in the list of "dependecies" some component from "canJS" (even fixture.js generated with the tool...because it stoles can.fixture) it just stops to work and breaks everything. I've also tried using:
steal('that').then('this', function() {});
But i've the same results.....fail!!! anyone have any hints?
Ok i found the problem. There is nothing wrong with stealjs and canjs, but
canjs just load its own version of jquery
that will break my application. Now I need to find a way to load canjs and jquery separately (i use yii and some extensions need to have jquery loaded at a certain time so cannot wait for canjs).
Is the issue the version of jQuery or the order of dependencies?
You can configure steal via the stealconfig.js to use another version of jQuery and manage any dependencies.
An example can be found in the github repo: (this example does not show dependencies so i added one below)
https://github.com/bitovi/steal/blob/master/stealconfig.js
steal.config({
map: {
"*": {
"jquery/jquery.js": "jquery", // Map to path
"bootstrap/bootstrap.js": "bootstrap",
"can/util/util.js": "can/util/jquery/jquery.js"
}
},
paths: {
"jquery": "can/lib/jquery.1.8.3.js", // Path to jQuery
"bootstrap": "lib/bootstrap.js"
"yui/yui.js" : "can/lib/yui-3.7.3.js",
},
shim : {
jquery: {
exports: "jQuery"
},
bootstrap: { // A dependency example
'deps': ['jquery']
}
},
ext: {
js: "js",
css: "css",
less: "steal/less/less.js",
coffee: "steal/coffee/coffee.js",
ejs: "can/view/ejs/ejs.js",
mustache: "can/view/mustache/mustache.js"
}
});
Note: this is an untested example, hope this helps.
i had problem too with stealJs i have known that it work well with JavascriptMVC,
now i'm using AMD requireJs to dependency manage, an it works great with canjs.
here is the documentation http://canjs.com/guides/using-require.html, i hope that it help you!