Develop Reference

Error BLAZOR106 when saving Javascript/TypeScript file with the same component's name

I have a .Net6 Blazor Server Side project.
I created a component called HomePage.razor, another one called HomePage.razor.cs and a TypeScript file called HomePage.razor.ts. This way, I get a nice visual of the HomePage.razor in the solution explorer, as the "child" files nest in it.
When I save my TypeScript file, the file wwwroot\Pages\HomePage.razor.js is automatically generated, and I refer it at my _Host.cshtml.
Also, as soon as I save it, I get the error BLAZOR106 - The JS module file 'c:\...\wwwroot\Pages\HomePage.razor.js' was defined but no associated razor component or view was found for it.
If I change the name of my TypeScript file from HomePage.razor.ts to anything else - like HomePage.ts - save it, and delete the old generated JS file at wwwroot, everything works fine. But this way, I lose the nice "collapsing by name" in the solution explorer that VS2022 provides.
I couldn't find any content related to the BLAZOR106 error (Google and Microsoft documentation), so I wonder if you know how to solve this issue.
Thanks.

I was getting the same error but in my case I wasn't even using a razor component, just a razor page .cshtml file. Similar to you, I also had a .cshtml.cs and .cshtml.js file because I like the organization of that.
Pages/Index.cshtml
Pages/Index.cshtml.cs
Pages/Index.cshtml.js
Originally I was using a bundleconfig.json to minify in place.
Pages/Index.cshtml.min.js
Pages/Index.cshtml.min.js.map
Then I used libman to copy the js files into:
wwwroot/js/Pages/Index.cshtml.js
wwwroot/js/Pages/Index.cshtml.min.js
wwwroot/js/Pages/Index.cshtml.min.js.map
As you can see, I was not using razor components or Blazor anywhere in my application. And this worked fine when targeting .NET 5
I upgraded to .NET 6 and I started getting the same error you are getting.
Background magic is going on here that the aspnet team should address but in the meantime my workaround was to remove the .cshtml. part from the file name in wwwroot.
wwwroot/js/Pages/Index.min.js
wwwroot/js/Pages/Index.min.js.map
To achieve this, I changed my bundleconfig to output directly to those files and I removed the libman part. It actually made more sense than what I was doing before because I only care that the original Index.cshtml.js file is nested.
bundleconfig.json
{
"outputFileName": "Pages/Index.cshtml.min.js",
"inputFiles": [
"Pages/Index.cshtml.js"
]
}
libman.json
{
"provider": "filesystem",
"library": "Pages/Index.cshtml.js",
"files": [
"Pages/Index.cshtml.js",
"Pages/Index.cshtml.min.js",
"Pages/Index.cshtml.min.js.map"
],
"destination": "wwwroot/js/"
}
To just this:
bundleconfig.json
{
"outputFileName": "wwwroot/js/Pages/Index.min.js",
"inputFiles": [
"Pages/Index.cshtml.js"
]
}

React JS - Reading environment configurations from external property file

Problem :
I am new to React JS, and looking for an option to read environment configs from an external property file. This problem is more specific for one of my clients, who is looking to have an option to change the environment files dynamically. E.g. change the hostname/port dynamically whenever there is a change. The build process is not owned by my client. I create a minified final package, which my client deploys it on tomcat/web server.
Tried Solution :
With some read-outs, I have configured .env files for different environments and able to successfully read configs from these files. However, these are more of a build process environment files. And, I am trying to find a way to read the configs from an external source after my package is created.
Possible solutions : Here is one possible approach I can think of -
Read external property file using libraries like "properties-reader". I will provide the property file as part of my release bundle (i.e. build folder). My client can change this property file whenever required.
Please suggest if this is the correct approach or is there a better solution to this problem?

A Solution which worked for me !!
1) Create a "config.js" file inside public folder of react project. Sample Content of the
"config.js" file -
window.env = {
API_DOMAIN_ADDR: "http://localhost:8080"
};
2) Refer "config.js" file inside index.html. Code for index.html will be -
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/config.js"></script>
</body>
3) Now, content of the config.js file will be accessible to react code. Sample code to retrieve the value of config.js variables -
window.env.API_DOMAIN_ADDR
Add this code wherever variable value needs to be accessed. I added this in my service class which is making ajax call.

I would suggest using something like Firebase Realtime DB. I had a similar requirement for pointing the App builds to production or development server APIs for my company. For this, we use to load a Firebase Config and from there the UI used to pick up the host server endpoint.
Advantages:
This saves you from deploying your build folder every time.
This is realtime and less prone to errors.
FirebaseDB is free for small stuff like this.
The second option is to create two environment files which I see you have already done.

How to include PHP file to run test in Karma/Jasmine?

The JS file I want to test is useless without PHP app on top of which it executes, because backend of my app generates all the DOM elements and data, which my JS app utilizes.
In other words, If I write in my.conf.js:
files: [
'app.js',
'spec/test.js'
],
app.js will throw tons of errors regarding not found elements, like tables, graph containers, etc.
Because of that I need to include my whole app to the test somehow. Perhaps by including my app's main index.php? Is it possible in Karma/Jasmine? Or do I rather set some kind of redirect?

The comment by #xmike is valid, but if you were to insist you can use Karma's proxies configuration.

cannot find js file

I have stucture code like this:
I try to load javascript into php file like this:
But i have an error like this:
This is my html :
And this is another javascript:
And i try to copy paste the link, and i got an error 404 not found. How can i fix it? Thanks.

Permissions
When the host is correct, and the file is in the right place, and you have no other networking problems, you may sometimes still get a 404 because of bad file permissions. If a server does not have permission to access a file, it may send out a 404 error in response. The reason why some "Not Authorized" error is not given instead, is that this would reveal more information about the files than you, the owner of the server, may intend. The way to respond to requests for privileged files without revealing whether or not they exist is to give a 404.
On Windows, you can view and change the permissions from the File Explorer by right-clicking on the file or folder, then going to Properties -> Security -> Edit. For more information, see the notes on permissions on Microsoft's site.
File Types
Besides permissions, a server must also be configured to serve the type of file you are accessing. If files with different extensions are served, but .js files are not, check the configuration of your server to make sure that .js files aren't blacklisted (or not whitelisted, as the case may be).
Directory Location
You should also verify that the files are actually stored in the top-most directory of the web server if that's how you are accessing them. If they aren't, you may need to prefix the path with the path from the webserver root to your application directory. E.g., instead of fusioncharts/..., you may need /path/to/fusioncharts/... or ../../path/to/fusioncharts.
Other Considerations
In your particular case, you should also verify that the files inside the fusioncharts folder are actually structured the way you think. (E.g., is there really a js/[insert name here].js file inside the fusioncharts folder?
If none of that solves your problem, try to take something that is working and gradually make it more and more similar to the files that aren't working. By figuring out at which point you go from a working setup to a not working setup, you may discover the problem.

If you are referring to a file with path: /ui/new-file.js
then,
1.In html file include
<script type="text/javascript" src="/ui/new-file.js"></script>
2.In server.js or app.js whichever you have, include
app.get('/ui/new-file.js', function (req, res) {
res.sendFile(path.join(__dirname, 'ui', 'login-file.js'));
});

Assuming you are using codeigniter, you can use base_url() function to include JS files in your codeignitor view template file.
<script src="<?php echo base_url(); ?>fusioncharts/js/fusioncharts.js" type="text/javascript"></script>
codeigniter default view template is called welcome_message.php and this file is located in application/view folder.
This is how I include js files in my codeigniter projects. Hope this will help.

In the html you can write *script** in the head or in the body, but not in your file js, delete this in fusionCharts.js
<script type=text/javascript>
In fusionCharts.js write only the function without the script

If you are developing locally, try clearing your cache.
Google Chrome likes to use the cached JavaScript files instead of the real ones.
Clearing your cache should resolve the issue.

Require js caches the setup file which sets up the urlArgs bust

I have a knockout/require app and am struggling with the caching of one particular file. Sadly it is the file that busts the cache for all other javascript files. The setup may be slightly odd:
Each view simply binds a knockout view model. It requires the require library and the main script for the particular area of the system:
<script data-main="scripts/user" src="~/Scripts/lib/require.js"></script>
The scripts/user.js file required above requires the common file (containing the require setup) and the main viewmodel script:
require(['./Common'], function (common) {
require(['userMain']);
})
The scripts/user/userMain.js file binds the viewmodel and requires anything needed at the view level (such as custom binding handlers).
define(function (require) {
require(['ko', 'userViewModel'], function (ko, userViewModel) {
var userVm = new userViewModel(false);
userVm.initialise();
// bound to the wrapper to stop jquery dialog bindings being applied twice
ko.applyBindings(userVm, document.getElementById('pageWrapper'));
});
});
Then we have common.js:
require.config({
baseUrl: './',
paths: {
'userMain': './Scripts/user/Main',
'userAjax': './Scripts/user/userAjax',
'userBasicDetails': './Scripts/user/userBasicDetails',
'userExchangesModel': './Scripts/user/userExchangesModel',
'userModel': './Scripts/user/userModel',
'userReportAccessModel': './Scripts/user/userReportAccessModel',
'usersModel': './Scripts/user/usersModel',
'userViewModel': './scripts/user/userViewModel',
... etc
,
urlArgs: "bust=" + (new Date()).getTime()
each script within the folder then requires anything it needs within its own model.
The script structure is then setup as so:
scripts\common.js
scripts\user.js
scripts\user\main.js
scripts\user\userAjax
scripts\user\etc...
This setup allows me to reference scripts from other folders without specifying where the file is anywhere other than in common.js. The downside is that all js files have a reference in common but I can live with that.
As an example there are 4 or 5 folders at the same level as 'user' ('scripts\report\', 'scripts\client' etc) and if I want to create
a user model from any of the scripts within those folders I can simply "define (['userModel'], function (userModel)" and common will tell require where to go and find that file. This system works well, allowing me to move files around at will and only change their path in one place.
The problem comes when I add new scripts or change paths in common.js. Whilst all others are bust every request due to the setup
in common the common file itself gets cached so I have to bust users' chrome caches before the new common.js file gets picked up. This is obviously a big issue at delivery time - pages fail as they cannot find the new script because it doesn't exist in the same folder and common has been cached.
Can anyone suggest a way of automatically busting common.js or moving the path config into a separate required file so that the urlArgs bust will do it for me?
Many thanks.

Before the script element that loads RequireJS, add the following code:
<script>
require = {
urlArgs: "bust=" + (new Date()).getTime()
};
</script>
RequireJS will pick this up as its initial configuration and any module it loads, through data-main or any other way, will be required with a bust parameter.
It is probably best to remove urlArgs from your subsequent call to require.config. It will override the earlier option so the value of the bust will change. Usually, modules are loaded once and only once by RequireJS so it should not happen that the same module is loaded by the same page with two different bust values. But there are scenarios I'm unsure about (for instance, using require.undef to undefine a module). Removing the later urlArgs would avoid bad surprises.