Netlify dev with netlify cms gatsby starter fails

I’m trying to set up local development for the Netlify CMS Gatsby starter. I followed the steps here: https://www.netlifycms.org/docs/start-with-a-template/ and was able to get the site setup in Netlify, can access the admin, etc.

Then, following along here: https://docs.netlify.com/cli/get-started/ on Win10, I used ‘netlify init’, linked it to github, no issues there.

First time running ‘netlify dev’ it failed and said I needed to run ‘npm install’, so I did that, now ‘netlify dev’ is mostly working, it opens a browser window at ‘localhost:8888’ but it’s blank, and the output has a few errors:

◈ Netlify Dev ◈
◈ Injected netlify.toml file env var: NODE_VERSION
◈ Injected netlify.toml file env var: YARN_VERSION
◈ Injected netlify.toml file env var: YARN_FLAGS
◈ Functions server is listening on 60256
◈ Starting Netlify Dev with gatsby

┌─────────────────────────────────────────────────┐
│ │
│ ◈ Server now ready on http://localhost:8888
│ │
└─────────────────────────────────────────────────┘

yarn run v1.22.10
$ npm run develop

gatsby-starter-netlify-cms@1.1.3 develop C:\dev\docker\gatsby-starter-netlify-cms
npm run clean && gatsby develop

gatsby-starter-netlify-cms@1.1.3 clean C:\dev\docker\gatsby-starter-netlify-cms
gatsby clean

info Deleting .cache, public, C:\dev\docker\gatsby-starter-netlify-cms\node_modules.cache\babel-loader, C:\dev\docker\gatsby-starter-netlify-cms\node_modules.cache\terser-webpack-plugin
info Successfully deleted directories
error while proxying request: connect ECONNREFUSED 127.0.0.1:8000
error while proxying request: connect ECONNREFUSED 127.0.0.1:8000
error while proxying request: connect ECONNREFUSED 127.0.0.1:8000
success open and validate gatsby-configs - 0.134s
success load plugins - 2.377s
success onPreInit - 0.053s
success initialize cache - 0.010s
success copy gatsby files - 0.186s
success onPreBootstrap - 0.043s
success createSchemaCustomization - 0.030s
success Checking for changed pages - 0.000s
success source and transform nodes - 0.260s
success building schema - 0.535s
info Total nodes: 123, SitePage nodes: 13 (use --verbose for breakdown)
success createPages - 0.073s
success Checking for changed pages - 0.000s
success createPagesStatefully - 0.157s
success update schema - 0.033s
success write out redirect data - 0.006s
success onPostBootstrap - 0.002s
info bootstrap finished - 7.679s
success onPreExtractQueries - 0.003s
success extract queries from components - 0.605s
success write out requires - 0.066s
success run static queries - 0.183s - 2/2 10.90/s
success run page queries - 0.065s - 3/3 46.43/s
warning ESLintError:
C:\dev\docker\gatsby-starter-netlify-cms\src\components\Navbar.js
48:13 warning Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events
48:13 warning Static HTML elements with event handlers require a role jsx-a11y/no-static-element-interactions

:heavy_multiplication_x: 2 problems (0 errors, 2 warnings)

error Generating development JavaScript bundle failed

$kaldi-red: #D64000
^
Media query expression must begin with ‘(’
in C:\dev\docker\gatsby-starter-netlify-cms\src\components\all.sass (line 5, column 1)
failed Building development bundle - 16.489s
ERROR Failed to compile with 1 errors2:36:15 p.m.

error in ./src/components/all.sass

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

$kaldi-red: #D64000
^
Media query expression must begin with ‘(’
in C:\dev\docker\gatsby-starter-netlify-cms\src\components\all.sass (line 5, column 1)
at C:\dev\docker\gatsby-starter-netlify-cms\node_modules\webpack\lib\NormalModule.js:316:20
at C:\dev\docker\gatsby-starter-netlify-cms\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\dev\docker\gatsby-starter-netlify-cms\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\dev\docker\gatsby-starter-netlify-cms\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.callback (C:\dev\docker\gatsby-starter-netlify-cms\node_modules\sass-loader\dist\index.js:89:7)
at Object.done [as callback] (C:\dev\docker\gatsby-starter-netlify-cms\node_modules\neo-async\async.js:8069:18)
at options.error (C:\dev\docker\gatsby-starter-netlify-cms\node_modules\node-sass\lib\index.js:294:32)

@ ./src/components/Layout.js 17:0-20
@ ./src/templates/about-page.js
@ ./src/cms/preview-templates/AboutPagePreview.js
@ ./src/cms/cms.js
@ multi ./node_modules/gatsby-plugin-netlify-cms/cms.js ./node_modules/gatsby-plugin-netlify-cms/cms-identity.js ./src/cms/cms.js

C:\Users\Ryan\AppData\Roaming\npm\node_modules\netlify-cli\node_modules\netlify-redirector\lib\redirects.js:116
throw ex;
^

Error: write EPIPE
at afterWriteDispatched (internal/stream_base_commons.js:156:25)
at writeGeneric (internal/stream_base_commons.js:147:3)
at ReadStream.Socket._writeGeneric (net.js:785:11)
at ReadStream.Socket._write (net.js:797:8)
at writeOrBuffer (internal/streams/writable.js:358:12)
at ReadStream.Writable.write (internal/streams/writable.js:303:10)
at ReadStream.ondata (internal/streams/readable.js:719:22)
at ReadStream.emit (events.js:315:20)
at addChunk (internal/streams/readable.js:309:12)
at readableAddChunk (internal/streams/readable.js:284:9)
Emitted ‘error’ event on ReadStream instance at:
at ReadStream.onerror (internal/streams/readable.js:760:14)
at ReadStream.emit (events.js:315:20)
at emitErrorNT (internal/streams/destroy.js:106:8)
at emitErrorCloseNT (internal/streams/destroy.js:74:3)
at processTicksAndRejections (internal/process/task_queues.js:80:21) {
errno: -4047,
code: ‘EPIPE’,
syscall: ‘write’
}

Update: I found an issue on the github page for the netlify cms gatsby starter, and one of the posts had a suggestion about the sass plugin that fixed the problem: https://github.com/netlify-templates/gatsby-starter-netlify-cms/issues/659

1 Like

Thank you for sharing the solution! People like you make Netlify Community a great place :grinning:

2 Likes