Create-react-app: Uncaught SyntaxError: Unexpected token <

[ghulamhussain]

Is this a bug report?

yes

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

(paste the output of the command here)

Steps to Reproduce

(Write your steps here:)

1. created a sample app
2. added fonts in index.html as
3. throws error

Expected Behavior

should load fonts

(Write what you thought would happen.)

Actual Behavior

Uncaught SyntaxError: Unexpected token <

(Write what happened. Please add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[mrmckeb]

Hi @ghulamhussain, are you able to show your HTML here? Or supply a test repository? Thanks!

[ghulamhussain]

@mrmckeb this is my head of html
`

`

[mrmckeb]

Thanks @ghulamhussain, unfortunately it's hard to tell from that - it would be great if you could publish a test repository, and we can take a look there and see the issue.

[ghulamhussain]

@mrmckeb this is link to the test repo https://github.com/ghulamhussain/testReapo

[ghulamhussain]

@mrmckeb please have look

[mrmckeb]

Thanks @ghulamhussain, very helpful.

All static assets should be served from the public directory. If you move src/fonts to public/fonts you will see that this will solve your problem :)

(I tested locally and it worked).

[ghulamhussain]

@mrmckeb thank you very much let me test it :)

[ghulamhussain]

@mrmckeb can you tell me the reason why it should be in public?

[ghulamhussain]

@mrmckeb please remove the same issue in this repo i am unable to remove the same issue in this configuration https://github.com/ghulamhussain/testRepo2 thanks in advance :+1:

[mrmckeb]

Hi @ghulamhussain, that's the way that CRA is built - files that are not part of your build should be in public, and when you build your project, you'll see those copied over.

Any .js or .ts files in ./src that are not referenced in the project (via import) won't be included in the final build.

You can read more about the public folder here: https://facebook.github.io/create-react-app/docs/using-the-public-folder

The other repo you've provided is not buid using create-react-app sorry... I assume it's a similar issue, but please reach out to the team behind that project here - https://github.com/react-boilerplate/react-boilerplate.

[ghulamhussain]

@mrmckeb any further help would be much appreciated because i am stuck on this issue and i have created issue on react-boilerplate but they have not responded yet

[mrmckeb]

I'll see if I can find some time over the weekend, but as I'm a volunteer here, my time is very short sorry @ghulamhussain.

There are some discussion on serving static content, such as this one: https://github.com/react-boilerplate/react-boilerplate/issues/984

Hopefully that helps.

[ghulamhussain]

@mrmckeb man you are a gem i finally resolved the issue thank you :100:

[mrmckeb]

Glad you worked it out! Have a great weekend.