I'm trying to get my app rendering from the server and so was trying to implement the ServerRendering example from here: http://redux.js.org/docs/recipes/ServerRendering.html
I can successfully run server.js but I get an "Uncaught SyntaxError: Unexpected token <" error # bundle.js:2 once I load up localhost. I believe it has to do with the renderFullPage() function:
function renderFullPage(html, initialState) {
return `
<!doctype html>
<html>
<head>
<title>Redux Universal Example</title>
</head>
<body>
<div id="root">${html}</div>
<script>
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
</script>
<script src="/dist/bundle.js"></script>
</body>
</html>
`
}
If I remove the line <script src="/dist/bundle.js"></script> the error goes away, but then the counter doesn't work.
Here is the bundle.js that the error references:
bundle.js
It should be referencing bundle.js in my dist folder but it's not for some reason? If I make an index.html file exactly the same as what renderFullPage is returning, except getting rid of ${html} and
<script>
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
</script>
then the counter works fine. When I do the server side rendering it seems like the client can't find the bundle.js code so creates one that has the exact same code as what it received from the server, and so there is an error as it runs into html when it's expecting javascript.
It's because your bundle.js contains HTML rather than your client-side scripts. Are you using a catch-all route and not letting it load your static assets? Your express.static middleware use call should go before this bit of code (middleware order matters).
Related
This is a rookie question. I'm trying to take some baby-steps into Electron, Vue, Webpack, and Node. To that end, I've used electron-forge to spool out a boilerplate project as a starting point, like this:
npx create-electron-app my-project --template=typescript-webpack
After the project has been created everything (seemingly) works as expected. If I make any edits I can see webpack is invoked and reloading the content reveals my edits. So far so good.
My next step was to introduce the simplest Vue.js 'hello world' content I could. First, I install Vue.js using NPM, like this:
npm install "vue"
I then edit the boilerplate index.html to look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
<div id="vue-app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#vue-app',
data: {
message: 'This message is from Vue!'
}
})
</script>
</body>
</html>
Which does not work. If I change the script tag to use the CDN for the Vue.js script (instead of the node_modules folder), everything works as expected.
My conclusion is that although I can reference Vue.js in my node_modules folder at design time that location does not exist in my output at run time. I'm not certain if that is due to how webpack is configured, or due to how electron works - but it strongly implies there must be something I need to do, either programmatically or via the webpack configuration to properly reference the script.
So what is the right way to 'reference' the local Vue.js script?
Thanks!
You need to reference vue via some bundler like webpack (otherwise, like you said, it is not available at runtime). Your method won't work because the generated file structure isn't the same as the one you have during 'design time'
Here's an example with vue-cli which sets up a starter project:
npm i -g #vue/cli
vue create project-name
cd project-name
vue add electron-builder
npm install
Done. Your project is operational.
With one little caveat you would encounter later, if you are using vue-router. Add the following in router.js (it changes router mode to hash instead of history so it works with electron).
export default new Router({
mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})
As a sidenote, vue-cli abstracts away a lot of config. If you ever get lost, just print it out with
vue inspect > ./app/inspect.js.md
(The part after > means save to the named file, otherwise it would print it out in your console.) Check it out, that's the correct set up you're looking for, just auto created with vue-cli.
Also, check out the generated /public/index.html, it has no mention of importing vue ;)
Best of luck
After some tinkering, I came up with this solution:
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
<div id="vue-app">{{ message }}</div>
</body>
</html>
I then added an import statement to the electron-forge boilerplate renderer.ts, like this:
import './vueapp.js';
and finally, I created a new script file called vueapp.js like this:
import Vue from 'vue/dist/vue.js';
var app = new Vue({
el: '#vue-app',
data: {
message: 'Hello Vue!'
}
});
I welcome feedback and comments; this may or may not be the correct approach and would love to hear how others have done this.
I am trying to do an inital setup of gooddata/d3js using gooddataJS sdk but it gives me this error:
"(index):34 Uncaught TypeError: gooddata.login is not a function"
Not sure why I am getting this error, I did exactly what was told oin get started for gooddataJS sdk and upon compiling it says cant find visualization.js.map and eventually goodata.login is not a function(I dont get any error for gooddata.js)
```
<html lang="en">
<body class="app" bgcolor="#ffffff" style="display:block">
<div id="root" class="app"></div>
<h1>GoodData JS Project Template</h1>
<!-- Dendencies of your project can be specified here -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../gooddata.js"></script>
<script src="../viz/gooddata-js/dist/gooddata.js"></script>
<script>
var projectId = 'n4qgebtg809vbi573dvat2s28rizwkm0',
user = "svs+analyticsimpl#eaab.com",
passwd = "svs>";
// Show login info
$('body').append('<div class="login-loader">Logging in...</div>');
gooddata.login(user, passwd).then(function() {
// Loged in
$('div.login-loader').remove();
$('body').append('<div class="loading">Loading data...</div>');
gooddata.execution.getData(projectId, elements).then(function(dataResult) {
console.log(dataResult);
});
});
</script>
</body>
</html>```
I believe you are calling the login method at wrong level. The "login" is part of "gooddata.user" not directly gooddata.
Your call should look like this:
gooddata.user.login(user, passwd).then(function()
I'm trying to create an Chrome extension with web accessible resources. Since my extension tries to create a modal with a list of available data, I decided to use VueJS to handle the dynamic nature of content.
However, When I create the sample files and initialize VueJS, it simply leads to all the DOM being commented out and my app not working.
Here's the code I'm using:
web_resources/vue.html
<html>
<head>
<script type="text/javascript" src="/web_resources/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript" src="/web_resources/app.js"></script>
</body>
</html>
web_resources/app.js
window.app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
When I run this, the entire div is replaced with: <!----> and nothing works.
On searching online for VueJS inside iframe, I came across this post which has this fiddle which surprisingly produces a blank page for me with no content. On inspecting the result, I find that the div has been replaced with <!----> here as well.
Why is VueJS not initializing properly within an iframe?
The problem was Content Security Policy (CSP). Since I was using a local copy of vue.min.js, I couldn't see any of the error messages. It looked like everything was initializing as expected except it wasn't. Once I replaced this with a un-minified version, I saw an error on the lines of:
I simply had to go update the CSP in manifest.json which I was able to do by adding:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
I am trying to get a11ySuite in Polymer 3.0 tests to work.
When I am running the test with polymer test, the tests times out, and I can see in the console of the automated browser the following error:
Uncaught ReferenceError: Polymer is not defined
at Suite.a11ySuite.eachTest (a11ySuite.js:51)
at mocha.js:1550
at Object.exports.forEach (mocha.js:1595)
at Suite.eachTest (mocha.js:1550)
at Runner.grepTotal (mocha.js:1224)
at Runner.grep (mocha.js:1215)
at new Runner (mocha.js:1197)
at Mocha.run (mocha.js:592)
at _runMocha (extend.js:41)
at done (util.js:34)
If I am running in debug mode, from polymer serve url, I am getting this error:
a11ySuite.js:49 Uncaught TypeError: fixtureElement.create is not a function
at Suite.a11ySuite.eachTest (a11ySuite.js:49)
at mocha.js:1550
at Object.exports.forEach (mocha.js:1595)
at Suite.eachTest (mocha.js:1550)
at Runner.grepTotal (mocha.js:1224)
at Runner.grep (mocha.js:1215)
at new Runner (mocha.js:1197)
at Mocha.run (mocha.js:592)
at _runMocha (extend.js:41)
at done (util.js:34)
This is also preceded by a bunch of 404 coming from mocha, regarding lodash, sinonjs and test-fixture, assuming this is because it is ran in serve mode.
This is my test code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Verifier - a11y test</title>
<script src="../node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/web-component-tester/browser.js"></script>
<script type="module" src="../src/verifier.js"></script>
</head>
<body>
<test-fixture id="BUVA11y">
<template>
<verifier id="verifier"></verifier>
</template>
</test-fixture>
<script>
suite('A11y testing', function() {
a11ySuite('BUVA11y');
});
</script>
</body>
</html>
I can't find more information online, and the docs are very limited on this subject (actually not precise indeed).
a11ySuite was moved to wct-browser-legacy as of web-component-tester version 6.4.3. Given the "legacy" naming, I'm guessing it's deprecated. I assume it's used like this:
<script type="module">
import {a11ySuite} from 'wct-browser-legacy/a11ySuite.js';
a11ySuite('view1'); // "view1" == template name
</script>
But I could not get it to work in an otherwise clean polymer-3-starter-kit project (i.e., the a11ySuite property exists in the module but is always undefined). Setting up a breakpoint where that variable is defined, I can see that the variable is actually never set because the Mocha pre-require event handler is never invoked for whatever reason.
However, it appears that axe-core (via pwa-helpers) is the newest a11y testing tool to use in Polymer 3, based on the test code in pwa-starter-kit:
<script type="module">
import 'axe-core/axe.min.js';
import {axeReport} from 'pwa-helpers/axe-report.js';
suite('views a11y tests', function() {
test('my-view1', function() {
const el = fixture('view1');
return axeReport(el);
});
...
});
</script>
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.