I am using the NToastNotify nuget package (v7.0.0) with .NET core 3.1.
services.AddMvc(options =>
{
options.EnableEndpointRouting = false;
options.Conventions.Add(new RouteTokenTransformerConvention(
new SlugifyParameterTransformer()));
})
.AddNToastNotifyToastr(new ToastrOptions
{
NewestOnTop = true,
TimeOut = 10000,
ProgressBar = false,
PositionClass = ToastPositions.BottomRight
}, new NToastNotifyOption()
{
ScriptSrc = "/js/toastr.min.js",
StyleHref = "/css/toastr.min.css"
});
I have added the app.UseNToastNotify(); middleware in the Configure method as well as added the #await Component.InvokeAsync("NToastNotify") bit in the body tag within the layout page.
Everything works perfectly on development, but on production when it tries to download the JS file it return a 404. As you can see I have also tried to override the script source, but still no luck.
The #await Component.InvokeAsync("NToastNotify") part will actually render the following
<script src=/_content/NToastNotify/toastr.js?7.0.0.0 type="text/javascript"></script>
<script>
if (nToastNotify) {
nToastNotify.init({
firstLoadEvent: 'DOMContentLoaded',
messages: [],
responseHeaderKey: 'X-NToastNotify-Messages',
requestHeaderKey: 'X-Requested-With',
libraryDetails:{"varName":"toastr","scriptSrc":"https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js","styleHref":"https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css","options":{"positionClass":"toast-bottom-right","timeOut":10000,"newestOnTop":true,"progressBar":false,"type":"success"}},
disableAjaxToasts:false
});
};
</script>
I will get the following two errors GET https://xy.hu/_content/NToastNotify/toastr.js?7.0.0.0 net::ERR_ABORTED 404 and Uncaught ReferenceError: nToastNotify is not defined
The whole site runs through Cloudflare. I am not sure if that is the reason why it don~t work on production. By the way this _content folder does not exist on any environment and is download somehow by the nuget package.
According to the error message, I guess this issue may be related with the Cloudflare hosted folder path. To avoid this issue, I suggest you could try below workaround.
You could add the reference manually in the view, like below:
<script src=https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js?7.0.0.0 type="text/javascript"></script>
Or directly download the script and add the relative path.
Related
Please help...I am trying to get openPGP.js working in an existing ASP.Net MVC Web Application.
I first started by adding the following html script tags:
<script src="#Url.Content("~/Scripts/openpgp.min.js")"></script>
<script src="#Url.Content("~/Scripts/openpgp.worker.min.js")"></script>
and I got this error on loading my page:
ReferenceError: importScripts is not defined
So I did some research and added RequireJS to my page, like so:
<script data-main='#Url.Content("~/Scripts/openpgp.min.js")' src="#Url.Content("~/Scripts/require.js")"></script>
Then in the event handler in which I intend to run my decryption logic, I have the following code:
async function decryptBBRecording(commId) {
var openpgp = require(['openpgp']);
await openpgp.initWorker({ path: 'openpgp.worker.js' }) // set the relative web worker path
...
...
...
}
and it is on that "await" line that I am getting
TypeError: openpgp.initWorker is not a function
I'm thinking this is because I have not loaded the openpgp.worker.min.js file. But when I do so via script tag, I get the following errors:
ReferenceError: importScripts is not defined
and when I do so via require(["#Url.Content("~/Scripts/openpgp.worker.min.js")"]); I get this:
Error: Script error for "openpgp"
ReferenceError: importScripts is not defined
Please can you provide me with guidance on how to get this working?
Answer provided here.
You don't have to include openpgp.worker.min.js on the page directly. You also shouldn't need require.js and the call to require. Just include openpgp.min.js on the page, it will globally define openpgp, and then call openpgp.initWorker as you are doing.
This question already has answers here:
Mismatched anonymous define() module
(8 answers)
Closed 5 years ago.
Let's say I have 2 files: test1.ts and test2.ts. This is the content of test1:
export const x = 1
This is the content of test1:
import { x } from './test2'
alert(x);
When I run the application, I get this error: Uncaught ReferenceError: exports is not defined at test1.js:2.
According to other posts, this error is caused by the fact that web browsers don't support export, and require(...). To solve it, one of the solution would be to use something like RequireJs.
So I've done some readings. This article has been the easiest for me to understand.
I've added this line in the _Layout.cshtml file.
<script src="~/Scripts/require.js"></script>
Create a config file.
requirejs.config({
baseUrl: '/Scripts/js'
});
I've put test1 and test2 in the /Scripts/js folder.
Run the application, but still get the same error: Uncaught ReferenceError: exports is not defined at test1.js:2.
How to fix the error using RequireJs?
Thanks for helping.
EDIT
The solution doesn't have to be RequireJs but anything the fix the problem. There are so many great tutorial on typescript, but they all assume that people are using node or angularjs. All I need is to add some typescript to my asp.net mvc app. As long it was one file, things were fine. Now I'd like to re-use some of the code, thus I organized them in different files. Unfortunately, I can't move forward because of that error. I've been sitting there for 3 days now.
EDIT 2
I've added commonJs to amd as you suggested by #artem,
{
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
}
}
now I'm getting this error.
Uncaught Error: Mismatched anonymous define()
module: function (require, exports, CommonTypes_1) {
//...
It seems like this question is dealing with the same issue. Should I put this code in a new file?
I know this is a little old, but just ran into this problem. Here's how I solved it.
This post was very helpful: https://volaresystems.com/blog/post/2014/05/27/Adding-RequireJS-to-an-ASPNET-MVC-project
First, add require.js to your BundleConfig.cs. Mine looks like this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/require.js"));
Next, make sure _Layout.cshtml renders "scripts" section after your bundles. Mine looks like this:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
Then in your view, render the scripts section like below. My Index.cshtml looks like this:
#section scripts
{
<script>
require(["Scripts/Init"],
function (Init) {
Init.Start();
}
);
</script>
}
My ~/Scripts/Init.ts file looks like this:
import * as DataBind from "./DataBind"
export function Start() {
DataBind.SetAllDatabinds(null);
}
From there, you can load in all your modules as needed. The important thing I found is to not have any "loose code" in your TypeScript files (i.e. the "alert(x)" in the example). Everything should be exported.
Normally Dart is connected to HTML by means of this code:
<script type="application/dart" src="script.dart"></script>
<script src="packages/browser/dart.js"></script>
By running Build, IntellijIdea transforms the first line into <script src="script.dart.js"> and eliminates the second line, OK. But there are some problems to me:
After Build file has been created, my indentation is broken.
Google PageSpeed Insight test says "Too much http requests", or something like that.
I solved the problem this way. No Build file anymore, I use Dart2js + Terminal to create script.dart.js. As to the HTML code, I've written this little thing below instead.
<script type="application/dart" src="script.dart" id="dart-script"></script>
<script>
(function() {
if (navigator.userAgent.indexOf('(Dart)') === -1) {
var dartScript = document.querySelector('#dart-script');
dartScript.type = 'application/javascript';
dartScript.src = 'script.dart.js';
}
})();
</script>
It works very well. What do you think of it?
I haven't heard of any such problems with the Dart script tags.
Using the transformer of https://pub.dartlang.org/packages/dart_to_js_script_rewriter
removes the Dart script tag which is only required by browsers that support Dart directly, which is only Dartium, which is not supposed to be used to access the web (only for development purposes), therefore for deployment this script tag is irrelevant.
Dart plugin is the same in IntelliJ IDEA, WebStorm and other JetBrains' IDEs. And it doesn't do anything with your source code on build, it only calls pub build as if you ran it from command line (assume you are talking about 'Pub: build' action in context of pubspec.yaml file).
I'll stop here my delirium with this new polyvalent code of my own.
<script>
(function() {
var elem = document.createElement('script');
document.querySelector('body').appendChild(elem);
if (navigator.userAgent.indexOf('(Dart)') === -1) {
elem.type = 'application/javascript';
elem.src = 'script.dart.js';
}
else {
elem.type = 'application/dart';
elem.src = 'script.dart';
}
})();
</script>
Thank you for applause, that's all folks!
I've included two below scripts in my header and I get the error "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js key=************"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
When I remove either script, I get additional js errors. How can I properly refactor these two scripts in my rails app?
In your example above, you're including the same script twice, but with different parameters. You should be able to solve your issue by including the script once, with all the required parameters like this:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=places&sensor=false"></script>
If you're calling google maps via an ajax call, you can use window.google = {} upon exiting the state in which the map was called.
I know that in my case it's not a Rails app but might help to someone else ... I'm working with React and I was getting the same error when I was switching between views/pages.
And like wLc said window.google = {} worked like a charm and was deleting the error in the console but the <script> tag was remaining in the html and was added every time I was revisiting the page that has the map.
On componentWillUnmount I've added some code to remove the tag.
const allScripts = document.getElementsByTagName( 'script' );
[].filter.call(
allScripts,
( scpt ) => scpt.src.indexOf( 'key=googleAPIKEY' ) >= 0
)[ 0 ].remove();
window.google = {};
I have a WebForms app that I'm converting to MVC, but for now running legacy stuff side-by-side.
For some reason, the ScriptManager left to it's own devices tries to load the following files from a very strange (and non-existent) location:
<script src="Scripts/WebForms/MsAjax/MicrosoftAjax.js" type="text/javascript"></script>
...
<script src="Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js" type="text/javascript"></script>
I can't find the setting of that location, and googling "Scripts/WebForms/MsAjax" brings back nothing.
Changing the (obsolete) ScriptPath property on the ScriptManager does nothing to help with these two scripts.
Trying to override the Path location like the following also does not work (it just tries to load both scripts)
Scripts.Add(new ScriptReference { Name = "MicrosoftAjax.js", Path = ContextUtil.MapApplicationPath("~/My/Script/Location/MicrosoftAjax.4.0.js") });
Scripts.Add(new ScriptReference { Name = "MicrosoftAjaxWebForms.js", Path = ContextUtil.MapApplicationPath("~/Shared/Scripts/Legacy/MicrosoftAjax/MicrosoftAjaxWebForms.4.0.js") });
What I can't understand is
Why is it not loading the scripts by default from a Embedded Resource?
Where is this strange path coming from?
Why won't it accept my overridden script paths?
Can anyone help?