Как решить ошибку Uncaught SyntaxError: Unexpected token?
Создаю новый кастомный блок списка для гутенберг и получаю ошибку: Uncaught SyntaxError: Unexpected token '<' (at custom-list.js.
Ниже код:
const { registerBlockType } = wp.blocks; const { InnerBlocks } = wp.blockEditor; registerBlockType('custom-bullets-list/custom-block', { title: 'Custom List', icon: 'list-view', category: 'text', attributes: { content: { type: 'string', default: '', }, }, edit: function (props) { const { attributes, setAttributes } = props; const onContentChange = (newContent) => { setAttributes({ content: newContent }); }; const contentArray = attributes.content.split('n'); const listItems = contentArray.map((item, index) => ( { name: 'core/paragraph', attributes: { content: item, }, } )); return ( <ul className="custom-bullets-list"> <InnerBlocks template={listItems} templateLock="all" /> </ul> ); }, save: function () { return ( <ul className="custom-bullets-list"> <InnerBlocks.Content /> </ul> ); }, }); |
const { registerBlockType } = wp.blocks; const { InnerBlocks } = wp.blockEditor; registerBlockType('custom-bullets-list/custom-block', { title: 'Custom List', icon: 'list-view', category: 'text', attributes: { content: { type: 'string', default: '', }, }, edit: function (props) { const { attributes, setAttributes } = props; const onContentChange = (newContent) => { setAttributes({ content: newContent }); }; const contentArray = attributes.content.split('n'); const listItems = contentArray.map((item, index) => ( { name: 'core/paragraph', attributes: { content: item, }, } )); return ( <ul className="custom-bullets-list"> <InnerBlocks template={listItems} templateLock="all" /> </ul> ); }, save: function () { return ( <ul className="custom-bullets-list"> <InnerBlocks.Content /> </ul> ); }, });
Дополнительно:
Срока ошибки?
Попробуйте добавить компонентам закрывающий тег.
Ответы:
Вот в такие ` ` знаки поставь HTML код. Например:
return `<b> пример </b>`; |
return `<b> пример </b>`;
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Ошибка
Uncaught SyntaxError: Unexpected token '<'в вашем случае возникает потому, что браузеру отдали файл с JSX, а он понимает обычный JavaScript. Конструкция вида<ul>...</ul>внутри JS должна быть предварительно собрана Babel/webpack или написана черезwp.element.createElement.Для Gutenberg-блока рабочий путь такой: держать исходник в
src, собирать его через@wordpress/scripts, а в WordPress подключать уже файл изbuild.npm install --save-dev @wordpress/scripts npm run build
Пример
package.json:{ "scripts": { "build": "wp-scripts build", "start": "wp-scripts start" }, "devDependencies": { "@wordpress/scripts": "^30.0.0" } }{ "scripts": { "build": "wp-scripts build", "start": "wp-scripts start" }, "devDependencies": { "@wordpress/scripts": "^30.0.0" } }
Ещё одна ошибка в коде:
attributes.content.split('n')делит по буквеn, а не по переносу строки. Если нужен перенос строки, используйтеsplit('n'). Но для блока со списком лучше не хранить весь список одной строкой, а использоватьInnerBlocksс разрешёнными дочерними блоками.Если не хотите сборку, перепишите JSX на
wp.element.createElement, но для современных блоков это неудобно. Правильнее настроить сборку и подключать собранный JS черезregister_block_typeилиwp_enqueue_script.