I'm restructuring my Meteor/Blaze app to keep related items in 'modules'. But I'm experiencing an issue with the first template.
My file structure is this:
/imports
/modules
index.js
/admin
index.js
methods.js
/client
adminPage.html
adminPage.js
The index.js files are loading fine. The adminPage.js is being imported alongside adminPage.html. But when I created Template.adminPage.onCreated(...) I got an error message, that I cannot call a function on undefined.
Calling console.log(Template) in the adminPage.js file returns this:
Section showing the admin page in console.log output.
But if I run console.log(Template.adminPage) I get undefined. I'm not sure what to look for next.
I found the issue. Instead of the correct:
import { Template } from 'meteor/templating';
I used
import Template from 'meteor/templating';
You are probably missing an import statement in /imports/modules/admin/client/adminPage.js. At the top of this file add the following:
import './adminPage.html';
Related
I am pretty new to python Django; I am trying to figure out what exactly I am missing from the last few hours.
here is my code structure
url.py
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('signup', views.signupuser, name="signupuser"),
path ('', views.home, name='home'),
path ('socialcard', views.create_social_card, name='create_social_card'),
path ('dashboard/', include('dashboard.urls')),
]
Then I created another URL set in the dashboard app; here is the code.
From django.shortcuts import render
# Create your views here.
def dashboard(request):
home="dashboard"
return render(request, 'dashboard.html', {'home':home})
I am getting the following error,
TemplateDoesNotExist at /dashboard/
dashboard.html
I don't know what I am missing, I have added the templates folder in the app and have also added the subfolder dashboard. like this dashboard/templates/dashboard, and then there reside dashboard.html
When I add the template path as base.html, it loads up an empty page, doesn't display any error. So I don't know what exactly I am missing.
Well as all beginners do silly mistakes...I forgot to define my app in the setting.
I would advise all beginners that add the app in the setting as soon as you start an app.
I have a fresh MeteorJS project and I have only installed chessboardjs and chessjs as follows
meteor npm install --save chessboardjs
meteor npm install --save chess.js
In my client main.js I have also imported the above packages as follows;
import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';
According to chessboardjs documentation, the way to display a board is as follows;
For html
<div id="board1" style="width: 400px"></div>
and for JS
var board1 = Chessboard('board1', 'start')
My question is how do I get to display this in MeteorJS and how do I get the two chess npm packages to work together?
Any working examples will be highly appreciated.
Maybe I should also mention that the whole purpose is to have a two player game.
There are three issues here.
Imports typo
importing css
Rendering
First your imports and the function you call need to be the same. You imports are
import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';
but they should be
import Chessboard from 'chessboardjs';
import Chessjs from 'chess.js';
Second, the npm package import usually not automatically imports the css as well. You need to actively locate it's path within the node_modules/chessboardjs folder and import it:
import 'chessboardjs/www/css/chessboard.css'
Finally, the Chessboard function can't inject code into the DOM, if the target element (the div with id board1) has not been rendered, yet.
To fix this you need to call it within onRendered:
Template.myTemplate.onRendered(function () {
var board1 = Chessboard('board1', 'start')
})
It won't work in onCreated, because the onCreated callback is called before the first time the Template has been rendered.
See http://blazejs.org/api/templates.html#Template-onRendered
I installed bootstrap-colorpicker npm package and I'm trying to import to my meteor app.
I did read "Using npm packages" and I tried to use their example: "import moment from 'moment';". but the problem is the there is a hyphen/dash in the middle of the name and it throws an error.
where should I look in the package to know how to import a npm package?
here is what i did:
import bootstrap-colorpicker from 'bootstrap-colorpicker';
Template.Test.onRendered(function() {
$('#m-color-picker').colorpicker();
});
I want the #m-color-picker to turn into a color picker, but it gives me error for the hyphen/dash.
You can use any name you like for the module in your code, eg
import bootstrapColorpicker from 'bootstrap-colorpicker';
or
import colorpicker from 'bootstrap-colorpicker';
Easy as that
For the second part of your question:
Usually the 'getting started' part of the README file should tell you how to import a module, although some older packages only mention how to require a package, which I presume is where you are coming from.
Quite often the default export will be what you need, so for example, referring to the momentjs web site:
var moment = require('moment');
You can usually assume this:
import moment from 'moment';
Basically this is taking the top level object from the module.
Your specific package doesn't seem to export anything, but just has some side-effects (perhaps it monkey-patches itself into jQuery?), so you can even drop the first part of the import and just say:
import 'bootstrap-colorpicker';
I am using urigo:angular2-meteor. When I add an empty main.ts in server folder, it always shows:
Cannot compile namespaces when the '--isolatedModules' flag is
provided.
Even I added the code below on the top of main.ts, it still shows same thing.
/// <reference path="../typings/angular2-meteor.d.ts" />
I faced similar issue in react + ts. I had commented out all my code.
Turns out
A global file cannot be compiled using '--isolatedModules'. Ensure your file contains imports, exports, or an 'export {}' statement.
So, added something like:
export const foo = 'foo';
or
export {}
It's a temporary solution, else you can delete the file with commented code or update tsconfig.json
I had the same problem and I added tsconfig.json into the root directory of my project.
{
"compilerOptions": {
"isolatedModules": false
}
}
I didn't have the time to dive into it, but it solved the problem.
I was getting this error when file was not imported in any other file.
Importing it in any other file (import {} from "/the-filename-having-compilation-error"), removed this error.
I had the same problem. I was made a component and never use that. When I imported that component In one of my page and use that and RERUN the project again , error was disappear.
This error occurs mostly when working with React + TypeScript
Simplest Solution for the same is to add 'export' keyword before the class creation or export the class in the end using
export default className;
If you have eslint installed check the rules section in .eslintrc.json file for any contradicting action.If the action you perforned is against the rule defined then error appears.
I'm adding a reference to a funciones.dll file using
clr.AddReferenceToFileAndPath() because I couldnt get it to work other way with this file and it succesfully does it. The file is named funciones.dll and it's in the bin folder. But when I do
from funciones import *
I get "no module named funciones"
since the funciones.dll file it's a funciones.py file compiled, shouldnt the module name only be named funciones and no any other name? isnt the name the problem and it's another? I dont know what other info could be relevant here but if there is any let me know
When doing the from x import * you need to put the namespace from the dll where x is.
So if you your code looks like
namespace Foo.Bar{
//code in here
}
your ironpython code would look like
import clr
clr.AddReferenceFromFileAndPath("/path/to/dll.dll")
from Foo.Bar import *
Solved by compiling the .py file with clr.CompileModules() instead of pyc.py . The module can be imported when you compile it that way (Thanks Dino)