I have been trying to figure this out all day without any luck.added

Added redirect file, added netlify.toml file, changes how routes are handled, i feel like i have tried everything and its a very small issue. Netlify user name is also my suppport name i believe. Grant.l.williams@outlook.com. https://grantwilliams.netlify.app/ the app address and the github repository GitHub - Grantlw100/KB2376_UCF_BC_CH_16. I keep receiving an error stating wrong mime type, Uncaught SyntaxError: Unexpected token ‘<’ (at index-DNxx5Kfp.js:1:1). I feel like i have read so many forums. Please, save me.

@Grantlw100 That error usually indicates that a JavaScript file reference, (in this case index-DNxx5Kfp.js) doesn’t exist and would be a 404, but is instead being given the /index.html file due to a catch-all redirect being configured.

You aren’t really trying to fix a “mime type error”, you just need to make sure the file actually exists.

Case in point, that URL is:

Access it directly via the above link and you’ll see it’s the contents of your /index.html file.

so to properly use the _redirects page i need to run npm run build prior to creating the _redirects file? I am only asking for my own personal sake. What i should do is use the new generated html file located in my dist directory in place of the index.html wihtin the redirects file in my public directory? can i remove the netify.toml or should i use the netlify.toml in place of the _reedirects file? and my redirects file or toml file should look like this [[redirects]]
from = “/*”
to = “/index-DNxx5kfp.js”
status = 200?

this is the current status of my repository.

@Grantlw100 I’m honestly not sure what you’re doing, and those questions seem very confused.

That redirect you’ve shown is also very odd, it says:

For any route, serve the /index-DNxx5kfp.js file… which is absolutely not what you want.

The crux of it is:

  • Netlify can only serve files that exist, if a file isn’t where you are linking to it, then it would be a 404
  • If you have a catch-all type rewrite e.g. /* /index.html 200 then it would instead serve the /index.html

There is nothing wrong with this behavior, it allows a Single Page Application to catch and handle all routes itself.

You shouldn’t need to write increasingly complex or specific rewrite rules, just make sure your file references exist.

Perform your build locally and take a look at the output.

When i run the build locally all files are served as intended and refreshing the page leads to no errors. All back end routes respond with a 200 and serve proper files. When i attempt ot perform the same actions in deployment i receive the uncaught syntax error which is detrimentally confusing. I can run npm run preview as well as npx serve dist -s i belive the command was. I am sure you know what i am referring to but it works fine locally. Only when i try to run the application on netlify do i experience issues. Not that i blame netlify. I am new to this jazz.

That’s when you run your development server, I mean run the same Build command that you’re running on Netlify.

See what files are produced, if there is no /assets/index-DNxx5Kfp.js then that’s the explanation for why the reference to it doesn’t load:

<script type="module" crossorigin src="/assets/index-DNxx5Kfp.js"></script>

I’ve also just spotted that, if I’m reading your screenshot correctly, you have the _redirects file in the wrong format, you’ve specified rules within it in the netlify.toml format… the different files have different formats.

This is the syntax for the _redirects file:

This is the syntax for the netlify.toml file:

Holy buns it worked. Are you some kind of god? Manipulating the reality in which we live in? Can you also make my dog live longer? In all seriousness sir you are an absolute blessing. May the world favor your every move and provide you with a plethora of life sustaining nutrients so you may help others as you have helped me. May the force be with you. Always.

Unfortunately no, my only skill is development and because of that I get the privilege of being absolutely awful at everything else in life.

Glad to hear you got it working!

1 Like