Javascript modules don't work on github pages - javascript

I build a project with a local server (using live server VS extension), who works fine.
In this project, I'm using javascript modules, so in index.html, I have :
<script src="js/index.js" type="module"></script>
And in index.js :
import {} from "/js/home.js";
import {} from "/js/filter.js";
import {} from "/js/scroll.js";
The issue come when I try to display the website using github pages. JS files seems not found and browser console return :
home.js:1 Failed to load resource: the server responded with a status of 404 ()
filter.js:1 Failed to load resource: the server responded with a status of 404 ()
I tried to change paths with no success, and I have no idea why all works good locally but not with github pages

Maybe dot in path helps you
import {} from "./js/home.js";

As a relatively new coder, I had the same problem with my JavaScript modules.
My page worked in my local live server and wouldn't deploy on GitHub.
It may be that the path you used is not pointing to the proper location where your JS script is. Perhaps you need to use the relative path with the dot in front of the forward slash like ./ instead of /
This way, it points to your local repository folder.
I think if you just set it as the forward slash /, it points to your root directory of your GitHub pages instead of your local repository.
In my case, my web page loaded correctly after I changed my script source in my index.html from:
<script type="module" src="/js/main.js"></script>
To:
<script type="module" src="./js/main.js"></script>

Related

VueJS adding javascript files via <script> tag in index.html

I'm trying to include some scripts to my vue app. but all that i've tried so far didn't work.
I'm using Vue 2 and created my project with the vue CLI.
when i try just adding the script tags to my index.html
<script src="../src/assets/js/typewriter-effect.min.js"></script>
<script src="../src/assets/js/custom.js"></script>
I get this error:
Uncaught SyntaxError: Unexpected token '<'
Which i later understood from a post:
So if you are running the local dev server for instance, the browser
tries to load the file being served at
http://localhost:8080/~some-npm-package/path/to/lib.js.
The dev server is setup to just serve whatever is in the index.html
regardless of the actual URL, so it serves the index.html when you try
and fetch http://localhost:8080/~some-npm-package/path/to/lib.js.
The browser tries to read this file as a script but the first line of
the index.html file is - hence the SyntaxError:
expected expression, got '<' that you see.
So my workaround was to use CDN, but even though I could see form devTools that the script was loaded, it didnt work on the page, there was no change. Besides, some of my scripts are only available locally and not from CDNs.
I tried importing in main.js
import './assets/js/slick.min.js'
import './assets/js/custom.js'
or from App.vue
But that didnt seem to work.

Node.js file not found, issue with my path format?

I'm working on a node.js application to interact with the Twilio API. I have a problem getting my files to associate in the way I expected. My file directory structure looks like this
myapproot
-public
---form.js
-routes
---index.js
-views
---index.html
-app.js
-config.js
-server.js
In index.html, I conclude the page with the following script declaration:
<script type="text/javascript" src="../public/form.js"></script>
But when I load up the page, I get the following error:
GET: http://localhost:1337/public/form.js 404 (not found)
If I follow the path-link provided by VS code, it shows that js file, but it's not getting loaded into my view. Is there a mistake with my path declaration?
Essentially, what that command is doing is this:
<script type = 'Text/JavaScript' src = 'http://localhost:1337/public/form.js'>
So, what I'd suggest that you try is to set up the server-side code to handle requests to that directory on your server.

canĀ“t load resource javascript with relative path ${pageContext.request.contextPath}

im trying to load a script from a folder i defined in the classpath into a jsp page like this
<script src="${pageContext.request.contextPath}/src/main/webapp/WEB-INF/asset/javascript/formToJson.js"></script>
but i got a 404 error and the url seems good based on the local location of the folder inside the project.
In the classpath i added the asset folder which contain a package called javascript.
this is the first time that i work with relative paths is probably im missing something in my configuration
Any advice will be appreciated
Try changing to:
<script src="${pageContext.request.contextPath}/WEB-INF/asset/javascript/formToJson.js"></script>
Generally, resources under /src/main/webapp/ is deployed in Web application's context path.

Node.js error including js file - file cannot be found

I'm running a node.js server. In the node I require and run the module by using
var h = require('h.js');
h.hello();
This prints Hello World to the console. However, I want to be able to run the code from h.js from a page(entrypage.html) in my browser as well. I try to import it by
<script type="text/javascript" src="/node_modules/h.js"></script>
However, this gives a 404 error when run on localhost.
GET http://localhost:8080/node_modules/h.js
How do I get access to this javascript file on the HTML page?
My file structure has a root with html/, js/, node_modules/ and server.js. The HTML page is inside html/, the js file in node_modules/
EDIT: I'm using the MEAN stack for this - MongoDB, Express.js, Angular.js and Node.js.
It should be possible to serve the file using express.static (Example: app.use('/node_modules/', express.static(__dirname + '/node_modules/'));), but I highly advise against serving node_modules and backend-specific files in the frontend!
first define path for your static resource which is your CSS,JS,Images etc.
app.use(express.static(path.join(__dirname, 'node_modules')));
then in html
<script type="text/javascript" src="h.js"></script>
NOTE :
Try to avoid to use node_modules folder for source path of your static resources
To be honest I'm not exactly sure what you're trying to achieve, I take it that you want to run the code in the browser just like running code in the node.js environment using require to include packages like h.js from npm.
If that's what you want to do I would recommend using a tool like browserify or webpack which collects your code and puts it into a file which can then be used in a web browser.

why javascript library cannot be found when imported in html page deployed in Tomcat7?

I have a web service project in eclipse, and i deploy it to Tomcat by right clicking on the project and click on run on server. The following script tag is in one of the html pages:
<script type="text/javascript" src="../assests/js/lib/yui_3.6.0pr3/yui/build/yui/yui-min.js"></script>
The html page is located in folder called SamplePages which is contained in the folder TEST-WS/production, the folder assets is also in TEST-WS/production.
When i open this page in the browser, i get the following JS error:
GET http://localhost:8080/TEST-WS/production/assests/js/lib/yui_3.6.0pr3/yui/build/yui/yui-min.js 404 (Not Found)
The path TEST-WS/production/assests/js/lib/yui_3.6.0pr3/yui/build/yui/yui-min.js is correct and the .js file is there. I have other scripts like:
<script type="text/javascript" src="../assets/js/lib/all-concat.js"></script>
but it works fine. what could be the problem?
src="../assests/js
src="../assets/js
One of those paths is probably wrong.

Categories