I'm playing around with the phoenix framework. I copied the chat example entirely but I'm not getting any results.
In fact when I write console.log("testing") in my app.js I notice that my console does not log anything...
I am getting the error referenced in this link:
phoenix framework - invalid argument at new Socket - windows
However that error seems to be related to Brunch not working in windows. When I brunch build, I can confirm that app.js has the console.log("testing") that I included.
Nevertheless, I don't see that console log when I visit my localhost:4000.
Why is JS not executing?
Turns out the guide is missing a key line that made it not work.
The guide has the following:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
</body>
But that is missing the below line which you can put above the body tag.
<script>require("web/static/js/app")</script>
Even as Chowza already solved this question I would like to propose another, possible cleaner solution, using the autoRequire feature of Brunch.io.
The problem occurs because Brunch.io does not autoRequire the app.js under Windows correctly. Chowza worked around this issue by requiring the file manually in the html. You can omit the manual require if you alter the /brunch-config.js as follows: Change from
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
}
To
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"],
"js\\app.js": ["web/static/js/app"]
}
}
This way the app.js is autoRequired, even if you work on a Windows based system.
I would like to mention, that this solution is based on the link Chowza himself posted, so all credit goes to him for pointing to the link.
Related
I am trying to setup swagger for the product I'm developing and cannot wrap my head around it.
I started with the most basic config as described here. The swagger.json was generated correctly under https://localhost/MyWebAPI/swagger/v1/swagger.json, but when navigating to https://localhost/MyWebAPI/swagger/index.html I get a blank site. Did some digging and most of the answers were revolving around setting up SwaggerEndpoint, RoutePrefix or some uri templates but none of them worked for me so I finally did what should have done in the first place and checked code of the site itself.
It is there... The url's seems correct:
var configObject = JSON.parse('{"urls":[{"url":"v1/swagger.json","name":"MyApp v1"}],"deepLinking":false,"persistAuthorization":false,"displayOperationId":false,"defaultModelsExpandDepth":1,"defaultModelExpandDepth":1,"defaultModelRendering":"example","displayRequestDuration":false,"docExpansion":"list","showExtensions":false,"showCommonExtensions":false,"supportedSubmitMethods":["get","put","post","delete","options","head","patch","trace"],"tryItOutEnabled":false}');
var oauthConfigObject = JSON.parse('{"scopeSeparator":" ","scopes":[],"useBasicAuthenticationWithAccessCodeGrant":false,"usePkceWithAuthorizationCodeGrant":false}');
// Workaround for https://github.com/swagger-api/swagger-ui/issues/5945
configObject.urls.forEach(function (item) {
if (item.url.startsWith("http") || item.url.startsWith("/")) return;
item.url = window.location.href.replace("index.html", item.url).split('#')[0];
});
The issue is and I kid you not the line with interceptors that is actually split into several lines and the browser wouldn't recognise it as a correct string.
Obviously I tried to pass null as the entire section, but that just brakes everything two lines later. I am in shambles...
I tried with several versions of Swashbuckle (currently using 6.5.0, but tried with some previous ones starting from 6.1.5). Any ideas how to fix it as I guess this must be generally working but there's just something weird/wrong that I'm missing.
Right... one of the most stupid things I've encountered lately. I started reading Swashbuckle source code and the only class that when serialised wouldn't get the JsonSerializerOptions as defined in Swashbuckle project is InterceptorFunctions, so it used mine... and mine would have WriteIndented set as true...
I'd like to render GraphQL Playground as a React component in one of my pages but it fails due to missing file-loader in webpack. Is there a way to fix this in docs or do I need to create new plugin with new webpack config?
Is it good idea to integrate Playground and Docusaurus at all?
Thanks for your ideas...
A few Docusaurus sites have embedded playgrounds:
Hermes
Uniforms
In your case you will have to write a plugin to extend the webpack config with file-loader.
Not sure if you found a better way but check out: https://www.npmjs.com/package/graphql-playground-react
You can embed this react component directly in your react app - It looks like Apollo also uses the vanilla JS version of this
I just had exactly the same problem. Basically, Docusaurus with a gQL Playground Integration runs fine in local but won't compile due to errors when running yarn build as above.
In the end I found the answer is in Docusaurus, not in building a custom compiler:
I switched from using graphql-react-playground to GraphiQL: package: "graphiql": "^1.8.7"
This moved my error on to a weird one with no references anywhere on the web (rare for me): "no valid fetcher implementation available"
I fixed the above by importing createGraphiQLFetcher from '#graphiql/create-fetcher' to my component
Then the error was around not being able to find a window component, this was an easy one, I followed docusaurus docs here: https://docusaurus.io/docs/docusaurus-core#browseronly and wrapped my component on this page in like this:
import BrowserOnly from '#docusaurus/BrowserOnly';
const Explorer = () => {
const { siteConfig } = useDocusaurusContext();
return (
<BrowserOnly fallback={Loading...}>
{() => {
const GraphEx = GraphExplorer
return
}}
);
}
This now works and builds successfully
It looks like Vuepress is made for public docs, but we decided to add client and server security to protect some of the doc pages. But unfortunately although oidc-client (https://github.com/IdentityModel/oidc-client-js/wiki) works during dev, it throws exception when build.
I get ReferenceError: window is not defined and when I try to trick the compiler with const window = window || { location: {} }; I get TypeError: Cannot read property 'getItem' of undefined
Any idea how to make this work?
This was driving me nuts also. I discovered the component I was trying to add was looking at window.location in its code - this was triggering the error.
My understanding is that the build process has not access to Browser things like window etc.
As soon as I removed the window.location bit from my code things built just fine and all is well.
Even though this talks about VueJS. I suspect it will work with any other JavaScript language like Angular or React as well.
I have been learning Vue.js and loving it. Knowing I have a larger application on the way and the fact that I have wanted to start using TypeScript. Now seems like the time to do so. I have a firm grasp on Vue at this point but can not find any documentation (over 2 weeks of finding the exact, MINIMUM requirements) on how to setup TS and actually get it to run.
Here is an example of some HTML and Vue code that works with using just script tags and normal JavaScript.
HTML
<div id="app">
<h4>{{ Value }}</h4>
</div>
#section Scripts {
<script src="~/lib/vue/vue.js"></script>
<script src="~/js/test.js"></script>
}
JavaScript - test.js
var app = new Vue({
el: "#app",
data: {
Value: "Hello there"
}
});
This works and produces Hello there on the page.
Configuring TypeScript
This seems straight forward, I have a TypeScripts folder below my js folder where the "source" .ts files will be. The output files will be in the js folder as .js files. Here is my tsconfig.json located in the TypeScripts folder:
{
"compileOnSave": true,
"compilerOptions": {
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../",
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "amd" // <-- Should this be used?
},
"exclude": [
"node_modules",
"wwwroot"
]
}
This works and I do get .js files each time a save the .ts files.
However, now I want to incorporate Vue into the .ts using it in ways I have seen in videos as well as code online. The following code compiles without errors:
JavaScript - ES6 - test2.ts
const Vue = require("vue")
const app = new Vue({
el: "#app",
data: {
Value: "Hello there"
}
})
Now I update the HTML to the following:
HTML
<div id="app">
<h4>{{ Value }}</h4>
</div>
#section Scripts {
<script src="~/js/test2.js"></script>
}
I reload the page and all I get is the {{ Value }} markup. Plus the JavaScript error: Uncaught ReferenceError: require is not defined.
That seems simple enough, I figure I just add the following line to the Scripts section and remove the single reference to the test2.js file:
#section Scripts {
<script src="~/lib/require.min.js" data-main="/js/test2.js"></script>
}
Reload and now I get: Uncaught Error: Module name "vue" has not been loaded yet for context: _. Use require([]) which references this but that code now seems to diverge from what the .ts file should look like.
The ES6 Test2.ts file seems to be the way people code. The way it wants me to write the require statement in the link above seems far more verbose and does not show up in any code samples I have seen. So I must be missing something. If it helps, the Vue and Require downloads have come from my package.json (npm) file which looks like this:
"devDependencies": {
"#types/node": "^9.4.7",
"requirejs": "^2.3.5",
"vue": "^2.5.16"
...
}
And my bundleconfig.json which puts them in the wwwroot/lib folders where they should go.
{
"outputFileName": "wwwroot/lib/require.min.js",
"inputFiles": ["node_modules/requirejs/require.js"]
},
{
"outputFileName": "wwwroot/lib/vue/vue.js",
"inputFiles": [ "node_modules/vue/dist/vue.js" ]
}
I have to believe I am so close to getting it. Being able to write code in the more modern ES versions is great. I have just not been able to find the right piece of the puzzle to fit it all together.
The main problem above is because in the first "plain JavaScript" example, you are not using modules at all. You are loading the Vue library directly in your page, which creates the global Vue object, and then your script is global (i.e. not a module) and references the Vue object directly.
For the test2.ts file, you mention this is ES6, but you then 'require' in the Vue library. This means the code is now attempting to use modules, but CommonJS modules, not ES6 modules. (Where you would write something like import Vue from "vue"). This means it would require a loader at runtime (e.g. the require.js library you are trying to use), which could work if configured correctly, but generally you'd want something like WebPack to package up Vue.js and your code into a standalone bundle the page loads at runtime.
Note: Edited paragraph below
I've created a sample ASP.NET Core project showing how to configure TypeScript and WebPack to generate a bundle per page using the global Vue.js object via a script tag. I've put an extensive readme on it to explain all the workings. You can see it at https://github.com/billti/SimpleVueApp . If you have further feedback, I'll continue to update it to make it better/clearer.
That said, as you get deep in Vue there is one Visual Studio limitation to be aware of. Currently there is no rich support for .vue files (known in the docs as "single file components"). What I mean by "rich support", is that these files have a certain context that we don't infer right now to provide good IntelliSense (i.e. completion lists, errors, tooltips, etc.). Also, HTML files in Visual Studio (which is what you would open a .vue files as) also only support plain CSS in <style> tags, and plain JavaScript in <script> tags currently, whereas with the right Vue and WebPack setup you can do things like write LESS code directly in your style tags, and write TypeScript directly in your script tags. My team is looking at this currently and hoping to improve this in the near future.
Let me know if any of that isn't clear. Happy to help further.
im beginning with Ajax, i have problem with including Ajax files.
Ajax code written in original page (like index.php) and placed in (head) section works fine, but when i try to place code in external file (in js folder, where is placed prototype.js file), i don't get any response, not even in Firefox Error Console.
I haven't changed Ajax code except url for calling PHP function.
edit:
calling ajax files:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/myValidation.js"></script>
</head><body>
....
Username: <input type="text" name="uname" id='uname' />
Available?
<span id="result"></span>
Email address: <input type="text" name="email" />
...
I embaded this function call in html. Validate function is from book "PHP and Script.aculo.us Web 2.0 app interfaces"
myValidation.js
function Validate(){
var user=$('uname');
var name="uname="+user.value;
var pars=name;
new Ajax.Request(
'myValidation.php',
{
method:'post', parameters:pars, asynchronous:true, onComplete: showAvailable
}
);
}
function showAvailable(originalRequest){
var newData=originalRequest.responseText;
$('result').innerHTML=newData;
}
This example is from mentioned book
You haven't shown us your myValidation.js file, but here are the typical reasons I see when people move from inline script blocks to external files and things stop working:
They put script blocks in the external JavaScript files. You probably didn't do that, but I've seen it often enough to mention it. Your external script is pure JavaScript, so for instance it should be:
function Validate() {
// ...
}
not:
<script type='text/javascript'>
function Validate() {
// ...
}
</script>
I've seen the latter a fair bit.
They put the JavaScript file in a location that doesn't match their script tag src.
They left an opening <!-- or closing --> in the script. Important not to do that, in external JavaScript files those are syntax errors.
They're using a web server that's case sensitive and the src attribute and the file's actual name don't match.
They're using a web server sensitive to permissions and the file doesn't have the right permissions.
In the case of the last two above, it's easy to check: Just open a new tab and actually enter the URL of the JavaScript file. If you see the JavaScript, great; if not, you probably have more information.
For issues like this (and hundreds of others), there's nothing like having a decent toolset. For debugging JavaScript on browsers, there are quite a few. There's Firebug (a Firefox add-in), Chrome's and Safari's Development Tools (built into the browsers), Microsoft Visual Studio or Script Debugger for debugging with IE, etc. Firebug and Dev Tools would both tell you about broken src links, as well as any exceptions, etc.
Have you checked that those files are accessible from the HTML code? And more - have you placed you scripts in the bottom of the page - because AJAX will bind it's handlers only to existing elements?
Problem solved.
In /js/ folder i had one php file, that i put there just because of simplicity. After moving it to other location all worked. Don't know if that is rule, nut no php files in /js/ folder. Thanks T.J and Tomasz