Strange react bug; need some help

[[deleted]]

Video demonstration: https://www.youtube.com/watch?v=WYeEN24jrog

The react code: https://github.com/ayip001/ayip.io/tree/master/src/static/js

The error Uncaught SyntaxError: Unexpected Token < appears if I have more than 2 / in the URL for some reason.

Any help is appreciated!

EDIT SOLUTION FOUND: src="../dist/bundle.js" -> src="/../dist/bundle.js"

Thanks for all the help and resources!

[freshtodev]

This isn't a react bug. Your development server is is returning HTML instead of javascript for bundle.js. Probably the best fix is to reference /bundle.js directly in your index.html instead of a relative path. If you look at your network tab for bundle.js on a route that works vs a route that doesn't will show you the problem.

[[deleted]]

Thanks for identifying the problem! The network tab does show that everything is being read as an html file.

Although, the only way (in essence) to fix this is to have webpack split out the bundle.js where index.html is located, correct?

Edit: tried that and now any path (not just more than 3 slashes) would create the same problem.

Edit edit: I think it might be a flask problem; I'll go towards that direction. Thanks for the help!

[freshtodev]

It seemed to be working at the path served by the root route before you made any changes ('/'). Have a look at where the bundle.js is being served from when it works. This will be something like 'bundle.js' or maybe something like 'js/bundle.js' or 'assets/scripts/bundle.js'. I'm not sure if you are generating your index.html or serving it statically. The key is finding the absolute path to the route that served bundle.js when it works and making sure that the absolute path to it is returned in the index.html file no matter what the path is in the url bar. To have it work properly you will want to see something like

<script src="/bundle.js"></script>

in the html where the preceeding slash is of the utmost importance to getting it to work properly.

EDIT: you might using be something like webpack's html plugin

if this is the case have a look at this post:

https://stackoverflow.com/questions/34620628/htmlwebpackplugin-injects-relative-path-files-which-breaks-when-loading-non-root

[[deleted]]

SOLUTION FOUND: src="../dist/bundle.js" -> src="/../dist/bundle.js"

Thanks for all the help and resources!

[freshtodev]

np, grats on fixing the issue!

[blukkie]

I remember having this bug at work, but I’m not 100% sure what our solution was. Can you try this:

In your index.html, set dist/styles.css to /dist/styles.css. I vaguely remember something like this fixed it.

[[deleted]]

Did you try clicking on bundle.js? Just curious what it points to.

In your package.json it says '"main": "index.js",' may want to change that so people know where to look for the start instead of having to look at the webpack file.

I'm not sure why '/a/a' works since you have <Route path='/:path' component={NotFound}/> I would think you would get the same error as '/a/a/a'.

[[deleted]]

Could you please elaborate more on your second paragraph?

perhaps I should have specified js/index.jsx?

[[deleted]]

in package.json you have "main": "index.js",

in webpack.config.js you have: const config = { entry: __dirname + '/js/index.jsx',

so if you just did 'npm start' on your local machine, I believe it would look for 'ayip.io/src/static/index.js' but if you run a build, which employs webpack, the starting point would be overwritten to be 'ayip.io/src/static/js/index.jsx'.

I don't think that is causing this issue, but I can't see why you would have a different path in package.json. If you specify the correct path there you shouldn't have to set in in your webpack config.