I am a total beginner on node.js, I wanted to experiment with it a bit.
I followed the instructions on building a node webkit app. When I edit index.html, I added <script src="js/bootstrap.js"></script> and it threw the error and displayed a cloud floating around:
Uncaught node.js Error
TypeError: undefined is not a function
at file:///C:/Users/Daniel/Desktop/node-webkit/js/bootstrap.js:158:7
at file:///C:/Users/Daniel/Desktop/node-webkit/js/bootstrap.js:160:2
Bootstrap.js:
| +function ($) {
| ...
ln 158 | $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
| ...
ln 160 | }(jQuery);
Other than these lines, there are still a bunch of error lines, but it seems to display 2 at a time.
I do not want to invoke any node.js functions or methods, is there something in bootstrap that conflicts with node webkit?
Twitter Bootstrap's requires jQuery. It seems like you forgot to include it. You should download it and insert <script src="jquery-1.11.0.min.js"></script> right before where you include bootstrap.js.
Related
I need two compiles to achieve server-side rendering with React. I have spent many days trying and it does not work. With Parcel 1 it worked perfectly. My problem is that after compiling it tells me that Node does not recognize the css that it is going to send to the client. In parcel I just put --target = node6 and everything worked great. Help !!
Here is my actual package.json:
Here is the error:
SyntaxError: Unexpected token '.'
at Object.compileFunction (node:vm:352:18)
dist-server/index.css:1
.line-total{border-top:2px solid #0}
This might be a bit of an onion-peeling exercise to get everything working, but I think I found the source of the first issue, and I can give you some tips about where to go from there.
Here's an overview of what is happening:
Your build:server command is telling parcel to bundle your server located at server/index.js
Your server/index.js file has a line that imports your client app code:
import App from '../src/App.js';
App.js imports a .css file.
So when you go to run the server bundle with node, the first thing it does is try to require("ouput-css-file.css"), which chokes because it's not javascript.
You could fix this first layer of errors by instead importing the .css file in your src/index.html instead of src/App.js:
<link rel="stylesheet" href="./App.css"></link>
That should get you past the problem mentioned in your question, but it looks like you'll hit another layer of (unrelated) errors in your server/index.js file - you need to correctly reference the ../dist files from the client bundle output, and actually import the renderToString method, were the first that I hit, but it keeps going.
You might want to take a step back and try to get the server code working without parcel (while still using parcel to generate the client bundle) and then addd parcel back to the server build process after you're sure you've got it working.
I'm build my first Angular project and i followed the angular-fullstack guide.
info:
Angular Fullstack v5.0.0-rc.4
Out of the box I create an Angular app with an Express server.
# Client
? What would you like to write scripts with? Babel
? Would you like to use Flow types with Babel? No
? What would you like to write markup with? HTML
? What would you like to write stylesheets with? CSS
? Would you like to include Bootstrap? No
# Server
? What would you like to use for data modeling? (Press <space> to select, <a> to toggle all, <i> to invert selection)Mongoose (MongoDB)
? Would you scaffold out an authentication boilerplate? No
? Would you like to use WebSockets? No
# Project
? What would you like to write tests with? Mocha + Chai + Sinon
? What would you like to write Chai assertions with? Expect
The full log is very extensive and can be find here.
when i start the server with npm run start:server its connect to my MongoDB and works perfectly but when starts the client(npm run start:client) the follow error occurs
ERROR in ./client/app/main/main.component.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: user_path/pokemon-manager/client/app/main/main.component.js: Unexpected token, expected , (21:30)
19 | ngOnInit() {
20 | return this.http.get('/api/things')
> 21 | .subscribe((things: []) => {
| ^
22 | this.awesomeThings = things;
23 | });
24 | }
# ./client/app/main/main.module.js 22:12-39
# ./client/app/app.module.js
# ./client/app/app.js
Child html-webpack-plugin for "..\client\app.html":
Asset Size Chunks Chunk Names
../client/app.html 28.6 KiB 0
Entrypoint undefined = ../client/app.html
i ｢wdm｣: Failed to compile.
this can be find fully here
I am trying to use a npm package in my laravel5 app, but I am not aware with node and require, can someone please help me to understand that how can I use the npm packages.
I am trying to use the following package:
https://www.npmjs.com/package/node-movie
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-main="{!! url() !!}/vendor/lib/require.js" src="{!! url() !!}/vendor/lib/require.js"></script>
<script type="text/javascript">
var imdb = require('imdb-api');
var movie;
imdb.getReq({ name: 'The Toxic Avenger' }, function(err, things) {
movie = things;
});
console.log(movie);
</script>
I am getting the following error in console:
Uncaught Error: Module name "imdb-api" has not been loaded yet for context: _. Use require([])
First thing:
You're trying to use node on the clientside; this means you don't know what node is.
To get started with it:
How do I get started with Node.js
Second:
You should understand what asynchronous means in javascript and node and how to work with it. Your console.log(movie) will log undefined every time even if your code works.
You can search for articles pertaining to async in node; here's an example article: https://www.codementor.io/nodejs/tutorial/manage-async-nodejs-callback-example-code
Third:
To use node with laravel (after you learn how to use node) you can start up a node server that works as a REST API to provide your laravel app with what you require from node packages (you 'request' the information from the node server).
Easier alternative:
Find a pure javascript implementation for that npm package (i.e. search for a solution that doesn't involve node).
When I coded the d3-composite-projections, the following stuff worked:
The directory tree:
- composite-projections.js
|
|- test
| |- test.js
|- node_modules
Inside test.js, I required d3.js and then, loaded composite-projections.js to test it, the following way:
var d3 = require('../node_modules/d3/d3.js');
var composite_projection = require('../composite-projections.js');
...
This worked ok, but now I've changed my machine, and running the test gives me the following error:
Message:
d3 is not defined
Stack:
ReferenceError: d3 is not defined
at ~/d3-composite-projections/composite-projections.js:6:1
So it's like the required d3 doesn't work when called from composite-projections.js, as if it was never included.
Does somebody know why and why it used to work before?
Finally I solved the problem using the technique explained in this answer: Load “Vanilla” Javascript Libraries into Node.js.
It's possible to call a function passing the environment with the vm library.
Anyway, my solution used to work, which I can't understand.
I followed this a link to try to configure Twitter's boostrap.less under Node 0.6.12 and Express 2.5.8:
app configuration:
app.use(express.compiler({src: publicDir, enable: ['less']}));
app.use(express.static(publicDir));
stylesheet link:
<link rel='stylesheet' href='/stylesheets/bootstrap.css' />
boostrap.less is the vanilla bootstrap.less file from bootstrap 2.02. the code section of it starts with:
// CSS Reset
#import "/public/stylesheets/reset.less";
When node is fired up and the page requested, the less paths get resolved correctly but the less parser throws an error:
../node_modules/less/lib/less/parser.js:385
throw new(LessError)(e, env);
The error causes node to crash after returning a 500 error for the contents of the boostrap.css file.
Any ideas how to get bootstrap.less to work in my setup?
Just a thought, but if you have Twitter's bootstrap.less via a git submodule, do you need to update the submodule? (we made that mistake, and had the same error as you until we realized it and fixed it)