How to initialize a Gatsby project?

Hi there,
I’m having a problem and I really don’t know what i’m doing wrong.
My version of gatsby is:
Gatsby CLI version: 3.6.0 Gatsby version: 3.6.2

The problem is that when i setup a project following the documentation, even if i try to setup my project with this other documentation (from tina website). I end up going to localhost:8000 only to find a blank page ! I tried everything and i really don’t know what i could do to fix it.
In the console i can see that

commons.js:13012 Uncaught ReferenceError: process is not defined
    at eval (path.js:25)
    at Object../node_modules/path/path.js (commons.js:11628)
    at Object.options.factory (commons.js:13637)
    at __webpack_require__ (commons.js:13009)
    at fn (commons.js:13317)
    at eval (index.js:1)
    at eval (index.js:1)
    at Object../node_modules/tinacms/build/index.js (commons.js:12886)
    at Object.options.factory (commons.js:13637)
    at __webpack_require__ (commons.js:13009)

So just to be sure it’s not coming from this i edit the “path.js” file that i installed with yarn add path (because it was missing at the install) to avoid using process since it apparently does not work. Then i find myself against some other problem:

Error in function kn in ./node_modules/tinacms/build/index.js:1
The `cms` prop must be an instance of `TinaCMS`.

So, should i continue to investigate or is it just something i am missing ?
Thanks in advance for your answer and tell me if you need any more details to help me resolve this issue.

Hey, sorry you’re running into trouble with Gatsby, this is not our main focus at the moment, but does that issue help?

See also: Error Gatsby + TinaCMS - The `cms` prop must be an instance of `TinaCMS` - #2 by crownie

The first link lead me to the blog page which is a good start. Now i need to find why there isn’t the pencil for editing (even after adding path-browserify in gatsby-node.js).

For information to whom would like to initialize tina manualy, add those lines to your gatsby-config.js:

import * as React from 'react'
import { TinaProvider, TinaCMS } from 'tinacms'

export const wrapRootElement = (
  { element },
  options
) => {
  window.tinacms = new TinaCMS({
    enabled: options.enabled,
    sidebar: options.sidebar,
    toolbar: options.toolbar,
  });
  return <TinaProvider cms={window.tinacms}>{element}</TinaProvider>
}
...
```.
1 Like