Unexpected token doctype html django

How to fix SyntaxError Unexpected Token in JSON

A common issue that I see when working with front-end JavaScript heavy apps is the dreaded “SyntaxError Unexpected Token in JSON” error! Now this error can be of the form:

SyntaxError: Unexpected token < in JSON at position 0

SyntaxError: Unexpected end of JSON input

The error “SyntaxError Unexpected Token in JSON” appears when you try to parse content (for example — data from a database, api, etc), but the content itself is not JSON (could be XML, HTML, CSV) or invalid JSON containing unescaped characters, missing commas and brackets.

There are a few things you can try to fix this error:

Check that the content you are trying to parse is JSON format and not HTML or XML

Verify that there are no missing or extra commas.

Make sure to check for unescaped special characters.

Check for mismatched brackets or quotes.

1. Check that the content you are trying to parse is JSON format and not HTML or XML

A common reason why the error “SyntaxError Unexpected Token in JSON” comes up is that we are trying to parse content that is not even JSON.

Consider the following front-end JavaScript code:

In the above example, the fetch() function is being used to retrieve data from a API that returns JSON format — in this case https://localhost:3000/data.

The fetch() function then returns a promise, and when that promise resolves, we handle that with the response.json() method. This just takes our JSON response and converts it to a JSON object to be used!

After that we just console.log out the data object

Now for the server-side of things, look on to our Node JS route that returns the JSON /data

We can see that it is setting the Header as text/html . This will give you the error:

This is because we are trying to parse the content with JSON.parse() or in our case response.json() and receiving a HTML file!

To fix this, we just need to change the returned header to res.setHeader(‘Content-Type’, ‘application/json’) :

Whats Content-Type request header anyway?

Pretty much every resource on the internet will need to have a type (similar to how your file system contains file types like images, videos, text, etc). This is known as a MIME type (Multipurpose Internet Mail Extension)

Browsers need to know what content type a resource is so that it can best handle it. Most modern browsers are becoming good at figuring out which content type a resource is, but its not always 100% correct.

That is why still need to explicitly specify our request header content-type !

syntaxerror: unexpected token ‘

This error also comes up when your API is returning invalid error pages such as 404/500 HTML pages. Since HTML usually starts with a “less than” tag symbol ( < ) and JSON is not valid with < tags, it will through this error.

For example, when everything is working find, your node API will happily return JSON. However when it fails with a 500 internal error, it could return a custom HTML error page! In this case, when you try to do JSON.parse(data) you will get the syntaxerror: unexpected token ‘

Additionally, check that you are calling the correct API url. As an example, lets say the API that returns JSON is using the /data route. If you misspelt this, you could be redirected to a 404 HTML page instead!

Tip: Use appropriate error handlers for non-JSON data

If you are using fetch() to retrieve your data, we can add a catch handler to give meaningful error messages to the user:

If you are using JSON.parse() we can do this in a try/catch block as follows:

2. Verify that there are no missing or extra commas.

JSON objects and arrays should have a comma between each item, except for the last one.

   This JSON object will throw a “syntaxerror unexpected token” error because there is no comma between “John Smith” and “age”, and also between “Anytown” and “state”.

To fix this, you would add commas as follows:

 By adding commas between each item except for the last one, the JSON object is now in the correct format and should parse without error.

3. Make sure to use double quotes and escape special characters.

JSON strings must be wrapped in double quotes, and any special characters within the string must be properly escaped. Consider the following example:

  When we try to parse this with JSON.parse , we will get the error: SyntaxError: Invalid or unexpected token.

The problem is with the following line using a apostrophe:

  As we can see, this will fix our error since we escape the aspostrophe as such:

4. Check for mismatched brackets or quotes.

Make sure all brackets and quotes are properly closed and match up.

 In this example, the JSON object is missing a closing curly bracket, which indicates the end of the object. Because of this, it will throw a “syntaxerror unexpected token” error.

To fix this, you would add the missing closing curly bracket as follows:

5. Make sure the JSON is valid. You can use a tool like JSONLint to validate your JSON and check for any errors.

If you want to be sure that the JSON is valid, we can try to use the NPM package JSONLint (https://github.com/zaach/jsonlint)

1. Open up the terminal
2. Run NPM install npm install jsonlint -g
3. We can then validate a file like so: jsonlint myfile.json

Summary

In the case of JSON being invalid, make sure to check for unescaped characters, missing commas, non-matching brackets and quotes.

To be really sure, check the JSON with tools like JSONLint to validate!

In the case of the content you are trying to parse being non-JSON such as HTML, check your API to make sure that error pages return JSON correctly instead of HTML pages.

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

Ошибка: «Uncaught SyntaxError: неожиданный токен

Я следил за этим учебным пособием, чтобы настроить Django для обслуживания шаблонов с пакетами, генерируемыми webpack. Я установил его так же, как в учебнике. Однако проблема в том, когда я Uncaught SyntaxError: Unexpected token < на localhost:8000 Я получаю Uncaught SyntaxError: Unexpected token < исключение, когда я открываю консоль в chrome devtools. Другой html, который я помещал в файл шаблона, получает визуализацию, за исключением пакета reactjs. Моя структура папок выглядит следующим образом:

. ├── djangoapp │ ├── db.sqlite3 │ ├── djangoapp │ │ ├── __init__.py │ │ ├── settings.py │ │ ├── urls.py │ │ └── wsgi.py │ ├── manage.py │ ├── reactapp │ │ └── static │ │ ├── bundles │ │ │ └── main-fdf4c969af981093661f.js │ │ └── js │ │ └── index.jsx │ ├── requirements.txt │ ├── templates │ │ └── index.html │ └── webpack-stats.json ├── package.json ├── package-lock.json └── webpack.config.js 

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'webpack_loader' ] TEMPLATES = [ < 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, "templates"), ], 'APP_DIRS': True, 'OPTIONS': < 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], >, >, ] WEBPACK_LOADER = < 'DEFAULT': < 'BUNDLE_DIR_NAME': 'bundles/', 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), >> STATIC_URL = 'static/' 

var path = require("path"); var webpack = require('webpack'); var BundleTracker = require('webpack-bundle-tracker'); module.exports = < context: __dirname, entry: './djangoapp/reactapp/static/js/index.jsx', output: < path: path.resolve('./djangoapp/reactapp/static/bundles/'), filename: "[name]-[hash].js", >, plugins: [ new BundleTracker(), ], module: < rules: [ < test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/>, < test: /\.jsx$/, use: ['babel-loader'], exclude: /node_modules/>] >, resolve: < modules: ['node_modules', 'bower_components'], extensions: ['.js', '.jsx'] >, >; 

Исключение main-fdf4c969af981093661f.js в начале строки 1 файла main-fdf4c969af981093661f.js в открывающем теге элемента . Я предполагаю, что браузер ожидает javascript-код, но вместо этого ему предоставляется html. Кроме того, я не понимаю, как Django знает, где искать пакеты, так как я не указывал корневой каталог (каталог reactapp ) static/bundles любом месте.

Не уверен, что в этом проблема, но вы должны написать «env», а не «babel-preset-env» как пресет в .babelrc

Источник

[Answered]-Unexpected tokens in in PyCharm Community Edition-django

It usually happens when you don’t enable Django in Pycharm’s settings. To resolve the problem:

1. In Pycharm open Setting in File menu
2. Select and expand Languages & Frameworks
3. Select Django and enable it
4. Select your Django project root
5. Select your project setting.py file
6. Select your project manage.py file
7. Apply setting

Farshid Ahmadi 350

A simple and dirty solution is to use template semantic to prevent this false positive error. Here’s an example for django 3.2.10:

PyCharm does not provide support for the Django framework in the free community edition. The best solution may be to go with another IDE (at least until support is added).

Python Dev 11

Related Query

• Unexpected tokens in in PyCharm Community Edition
• How to set Template Language to Django in Pycharm Mac Osx Community Edition 5?
• pycharm Community edition
• How to run Debug server for Django project in PyCharm Community Edition?
• Run / Debug a Django application’s UnitTests from the mouse right click context menu in PyCharm Community Edition?
• Cannot load facet Django in Pycharm community version, but no error in professional version
• Can I run Django tests in pycharm community edition?
• Cannot get Visual Studio 2015 Community Edition to create a new Django project
• How to stop PyCharm from autocompleting HTML and Django template tags?
• load static and DOCTYPE html position in django views
• Unable to find django in pycharm community IDE
• Uncaught SyntaxError: Unexpected end of JSON input. Can’t properly parse the info to JSON from the html
• Rendering a template variable as HTML
• How do I perform HTML decoding/encoding using Python/Django?
• Render HTML to PDF in Django site
• Django: How do I add arbitrary html attributes to input fields on a form?
• How to debug Django commands in PyCharm
• Unresolved attribute reference ‘objects’ for class » in PyCharm
• Django error: render_to_response() got an unexpected keyword argument ‘context_instance’
• How to send html email with django with dynamic content in it?
• How do I output HTML in a message in the new Django messages framework?
• How to use curl with Django, csrf tokens and POST requests
• Django «get() got an unexpected keyword argument ‘pk'» error
• How to set up a Django project in PyCharm
• Getting __init__() got an unexpected keyword argument ‘instance’ with CreateView of Django
• Django TypeError: render() got an unexpected keyword argument ‘renderer’
• PyCharm can’t find the right paths if I open a directory that is not the Django root
• How to render .rst files in a markdown or html format?
• Prevent django admin from escaping html
• Django — TypeError — save() got an unexpected keyword argument ‘force_insert’

More Query from same tag

• Django Slug Generated URL Returning: ‘No Fund matches the given query.’
• Django library for Stack Exchange API authentication?
• Django registration login redirection
• Extend Django’s ManyToManyField with custom fields
• Serialize a django-haystack queryset
• DEBUG = True Django
• Tastypie, filtering many to many relationships
• Django Test, ‘SQLCompiler’ object has no attribute ‘col_count’
• Django modelform remove «required» attribute based on other field choice
• Django view html to pdf executed twice
• How to populate existing html form with django UpdateView?
• django-imagekit minimal setup not working
• AttributeError — ‘RawQuerySet’ object has no attribute ‘exclude’
• Django Form Can’t Filter Foreign Key on Dropdown
• How to catch an OperationFailure from MongoDB and PyMongo in Python

Источник