У меня Gastby 5.13.2, и я установил gatsby-plugin-preact с preact и react-render-to-string. Когда я пытаюсь открыть домашнюю страницу в режиме разработки, я получаю сообщение об ошибке:
{
"codeFrame": "No codeFrame could be generated",
"sourcePosition": null,
"sourceContent": null
}
в консоли я получаю
warn The path "/" errored during SSR.
Мой package.json выглядит так:
"dependencies": {
"@rmwc/menu": "^14.0.7",
"@rmwc/tabs": "^14.0.7",
"classnames": "2.5.1",
"common": "file:../common/",
"dotenv": "8.2.0",
"echarts": "^5.4.3",
"echarts-for-react": "^3.0.2",
"gatsby": "^5.13.2",
"gatsby-plugin-env-variables": "^2.3.0",
"gatsby-plugin-google-tagmanager": "^5.13.1",
"gatsby-plugin-image": "^3.13.1",
"gatsby-plugin-manifest": "^5.13.1",
"gatsby-plugin-optimize-svgs": "^1.0.5",
"gatsby-plugin-preact": "^7.13.1",
"gatsby-plugin-react-helmet": "^6.13.1",
"gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
"gatsby-plugin-react-svg": "^3.3.0",
"gatsby-plugin-recaptcha": "^1.0.5",
"gatsby-plugin-remove-trailing-slashes": "^4.19.0",
"gatsby-plugin-robots-txt": "^1.8.0",
"gatsby-plugin-s3": "^0.4.1",
"gatsby-plugin-sass": "^6.13.1",
"gatsby-plugin-sharp": "^5.13.1",
"gatsby-plugin-sitemap": "^6.11.0",
"gatsby-plugin-split-css": "^2.0.3",
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
"gatsby-source-drupal": "^6.13.1",
"gatsby-source-filesystem": "^5.13.1",
"gatsby-transformer-sharp": "^5.13.1",
"node-sass": "^9.0.0",
"parse-entities": "4.0.1",
"preact": "^10.19.6",
"preact-render-to-string": "^5.2.6",
"react": "^18.2.0",
"react-compare-slider": "3.0.1",
"react-dom": "^18.2.0",
"react-helmet": "6.1.0",
"react-html-parser": "2.0.2",
"react-infinite-scroller": "1.2.6",
"react-modal": "3.16.1",
"react-player": "^2.14.1",
"react-resize-detector": "6.7.0",
"react-scroll": "1.9.0",
"react-share": "5.0.3",
"react-zoom-pan-pinch": "^3.3.0",
"sass": "^1.70.0",
"swiper": "6.5.4",
"typed.js": "^2.1.0",
"universal-cookie": "4.0.4",
"uuid": "^9.0.1"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.3.0",
"@types/jest": "^29.5.11",
"@types/node": "^20.11.7",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@types/react-helmet": "^6.1.11",
"@types/react-html-parser": "2.0.6",
"@types/react-infinite-scroller": "1.2.5",
"@types/react-scroll": "1.8.10",
"@types/uuid": "^9.0.8",
"gatsby-plugin-typescript-checker": "1.1.1",
"jest": "^29.7.0",
"tsc-files": "^1.1.4",
"typescript": "5.3.3"
}
Что касается страницы, то я удалил почти всё и теперь она выглядит так:
import React from 'react';
import './homepage.scss';
const HomePage = () => <div>Test</div>;
export default function HomePageLanding(): React.ReactElement {
return <HomePage />;
}
Без Preact все работает нормально. Есть ли какое-либо решение этой ошибки?
Я не уверен, что Preact является источником проблемы. У меня есть следующий набор пакетов на сайте Gatsby, и он работает нормально.
"dependencies": {
"@tailwindcss/typography": "0.5.10",
"asciidoctor": "2.2.6",
"gatsby": "5.13.2",
"gatsby-plugin-image": "3.12.0",
"gatsby-plugin-postcss": "6.12.0",
"gatsby-plugin-netlify": "5.1.1",
"gatsby-plugin-robots-txt": "1.8.0",
"gatsby-plugin-sitemap": "6.12.0",
"gatsby-source-filesystem": "5.12.0",
"gatsby-transformer-asciidoc": "4.12.0",
"gatsby-adapter-netlify": "1.0.1",
"gatsby-plugin-preact": "^7.13.1",
"preact": "^10.19.6",
"preact-render-to-string": "^6.4.0",
"lodash": "4.17.21",
"react": "18.2.0",
"react-dom": "18.2.0",
"slash": "1.0.0"
}
Ошибка указывает на то, что проблема связана с обработкой вашей целевой страницы (по пути /). Не могли бы вы приложить копию кода этой страницы (возможно, что-то вроде src/pages/index.js)?
Используя код, который вы предоставили в обновленном вопросе, я могу запустить сайт в режиме разработки (см. снимок экрана ниже). В вашем вопросе должно быть чего-то не хватает, что необходимо для возникновения проблемы. Не могли бы вы поделиться полным минимальным примером, показывающим проблему? Вы можете просто создать репозиторий GitHub и поделиться ссылкой. Это будет самый быстрый способ выявить проблему без лишних догадок.