Frontity Docs
  • Β» Welcome to Frontity
  • πŸš€Getting started
    • Quick start guide
  • πŸ“ƒAbout Frontity
    • Frontity features
    • Browser support
    • Get involved
  • πŸ“šCore Concepts
    • 1. Project
    • 2. Settings
    • 3. Packages
    • 4. Roots
    • 5. State
    • 6. Actions
    • 7. Libraries
    • 8. Namespaces
    • 9. Styles
  • πŸ—οΈArchitecture
    • Decoupled Mode
    • Embedded Mode
  • 🌎Deployment
    • Deploy Frontity using Vercel
    • Deploy Frontity on Layer0
    • Deploy Frontity on Heroku
  • πŸŒ—Isomorphic React
  • ⚑️ Perfomance
    • Caching
    • Link prefetching
    • Lazy Loading
    • Code Splitting
  • πŸ”ŽSEO
  • πŸ“–Guides
    • Setting the URL of the WordPress data source
    • Using Environment Variables in a Frontity project
    • WordPress requirements for Frontity
    • URLs in a Migration from WordPress to Frontity Decoupled Mode
    • Frontity Query Options
    • Redirections with Frontity
    • Understanding a Frontity project
    • Add a new Frontity package or theme to your project
    • How to share your Frontity project
    • Understanding Mars Theme
    • Working with processors
    • How to process page-builder content in Frontity
    • Keep Frontity Updated
    • Troubleshooting
    • JavaScript
    • React
  • πŸ‘Contributing
    • How to contribute?
    • Contributing Guide
Powered by GitBook
On this page
  • @frontity/wp-source
  • πŸ’» FetchError: invalid json response body at ... Reason: Unexpected token < in JSON at position 0
  • Frontity CLI
  • πŸ’» Error: Cannot find module β€˜@frontity/core’
  • Styles
  • πŸ‘¨β€πŸ’» The pseudo class ":xxx-xxxxx" is potentially unsafe when doing server-side rendering. Try changing it to ":xxx-xxxxx"

Was this helpful?

  1. Guides

Troubleshooting

PreviousKeep Frontity UpdatedNextJavaScript

Last updated 4 years ago

Was this helpful?

In this guide we offer solutions to common issues detected in Frontity projects

These are the symbols used in this troubleshooting guide

  • πŸ’» Terminal messages

  • πŸ‘¨β€πŸ’» Browser's console messages

@frontity/wp-source

πŸ’» FetchError: invalid json response body at ... Reason: Unexpected token < in JSON at position 0

If you launch your site locally with npx frontity dev and you get this in the browser

Internal Server Error

And you get something like this error in the terminal when attempting to load the page in the browser:

FetchError: invalid json response body at http://wptest.test/wp-json/wp/v2/posts/?_embed=true&page=1 reason: Unexpected token < in JSON at position 0

It may be because your WP doesn't have permalinks activated (which is a requisite of the @frontity/wp-source package)

Solution

From your WP, go to Settings -> Permalinks and check one of the pretty permalinks options, rather than the plain one:

Related Threads:

Frontity CLI

πŸ’» Error: Cannot find module β€˜@frontity/core’

If you get this error in the terminal when you do npx frontity serve:

Error: Cannot find module β€˜@frontity/core’
home/lib/node_modules/frontity/dist/src/cli/index.js
home/lib/node_modules/frontity/dist/src/commands/serve.js
home/lib/node_modules/frontity/dist/src/cli/serve.js

This may be caused because you're not executing this command from the root of your Frontity project (maybe you're launching it from the build folder)

Solution

Run npx frontity serve from the root of your Frontity project

Related Threads:

Styles

πŸ‘¨β€πŸ’» The pseudo class ":xxx-xxxxx" is potentially unsafe when doing server-side rendering. Try changing it to ":xxx-xxxxx"

If you are getting these types of warnings in the console:

The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type"
The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

This is NOT an issue that should be ignored or "fixed" under normal circumstances. We recommend you use the following solutions only if you're getting these messages because of some third-party CSS that you don't have no control over (e.g. from a CSS framework or a component library or another external source).

Solution 1

components/index

import { CacheProvider } from '@emotion/core'
import createCache from '@emotion/cache'

const myCache = createCache()
myCache.compat = true

<CacheProvider value={myCache}>
  <App/>
</CacheProvider>

Solution 2

You could also define functions to search and replace the selectors causing the warnings by the recommended ones

helpers/css

export const nthChildToNthChildType = css => css.replace(/\:nth\-child/g, `:nth-type`)
export const firstChildToFirstOfType = css => css.replace(/\:first\-child/g, `:first-of-type`)

export const fixCss = css => firstChildToFirstOfType(nthChildToNthChildType(css))

So then you can do in your code...

components/index

import React from "react";
import { Global, css, connect, styled, Head } from "frontity";
...
import gutenbergThemeCSS from "../styles/theme.min.css";
import gutenbergStyleCSS from "../styles/style.min.css";
...

import {fixCss} from '../helpers/css'
const fixedGutenbergThemeCSS = fixCss(gutenbergThemeCSS)
const fixedGutenbergStyleCSS = fixCss(gutenbergStyleCSS)


const Theme = ({ state }) => {

  ...
  return (
    <>
      ...
        <Global styles={css([fixedGutenbergThemeCSS, fixedGutenbergStyleCSS])} />
      ...
    </>
  );
};

...

Related Threads:

This is caused by an issue:

As by Frontity our code should take into account what can and cannot be done using CSS in JS with emotion

For this specific issue, there's that seems to work pretty well to solve this issue in a Frontity project

πŸ“–
https://community.frontity.org/t/frontity-not-working-with-plain-permalinks/1428
https://community.frontity.org/t/error-cannot-find-module-frontity-core/2180
emotion
https://github.com/emotion-js/emotion/issues/1105
emotion is used internally
this solution
https://community.frontity.org/t/bootstrap-the-pseudo-class-first-child-is-potentially-insecure-when-processed-on-the-server-side-try-changing-it-to-first-type/1811
@frontity/wp-source
πŸ’» FetchError: invalid json response body at ... reason: Unexpected token < in JSON at position 0
Frontity CLI
πŸ’» Error: Cannot find module β€˜@frontity/core’
Styles
πŸ‘¨β€πŸ’» The pseudo class ":xxx-xxxxx" is potentially unsafe when doing server-side rendering. Try changing it to ":xxx-xxxxx"