I’m receiving this error after I run gatsby develop. I have tried following the steps from gatsby.com
Not sure the reason for this error. I have tried gatsby clean, removing files that were giving errors, and utilizing google.
I have posted on GitHub and discord, but have not received any updates yet. Any assistance is appreciated.
Description
`dmitriymalayev@Dmitriys-Mini dmitriy-malayevs-portfolio % gatsby clean
info Deleting .cache, public, /Users/dmitriymalayev/gatsby/dmitriy-malayevs-portfolio/node_modules/.cache/babel-loader,
/Users/dmitriymalayev/gatsby/dmitriy-malayevs-portfolio/node_modules/.cache/terser-webpack-plugin
info Successfully deleted directories
dmitriymalayev@Dmitriys-Mini dmitriy-malayevs-portfolio % npm install -g yarn
added 1 package, and audited 2 packages in 1s
found 0 vulnerabilities
dmitriymalayev@Dmitriys-Mini dmitriy-malayevs-portfolio % yarn install
yarn install v1.22.5
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning gatsby > @hapi/joi@15.1.1: Switch to 'npm install joi'
warning gatsby > babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning gatsby > eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
warning gatsby > gatsby-cli > @hapi/joi@15.1.1: Switch to 'npm install joi'
warning gatsby > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning gatsby > better-queue > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning gatsby > gatsby-cli > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning gatsby > gatsby-telemetry > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning gatsby > webpack-dev-server > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning gatsby > @hapi/joi > @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
warning gatsby > @hapi/joi > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning gatsby > @hapi/joi > @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
warning gatsby > @hapi/joi > @hapi/topo > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning gatsby > @hapi/joi > @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
warning gatsby > webpack-dev-server > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning gatsby > gatsby-cli > gatsby-recipes > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning gatsby > gatsby-cli > gatsby-recipes > @hapi/joi@15.1.1: Switch to 'npm install joi'
warning gatsby > gatsby-cli > gatsby-recipes > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning gatsby > webpack-dev-middleware > webpack-log > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning gatsby > webpack-dev-server > sockjs > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning gatsby > webpack-hot-middleware > querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning gatsby > @pmmmwh/react-refresh-webpack-plugin > native-url > querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning gatsby > webpack-dev-server > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning gatsby > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning gatsby > webpack > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning gatsby > webpack > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning gatsby-image@2.11.0: This package has been deprecated in favor of gatsby-plugin-image. The migration guide can be found here: https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/.
warning gatsby-source-datocms > datocms-client > request@2.88.2: request has been deprecated, see request/request#3142
warning gatsby-source-datocms > datocms-client > request > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning gatsby-source-datocms > datocms-client > request > har-validator@5.1.5: this library is no longer supported
warning gatsby-transformer-remark > remark > unified > @types/vfile > @types/vfile-message@2.0.0: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
warning node-sass > request@2.88.2: request has been deprecated, see request/request#3142
warning node-sass > node-gyp > request@2.88.2: request has been deprecated, see request/request#3142
warning request@2.88.2: request has been deprecated, see request/request#3142
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "gatsby > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning "gatsby > eslint-plugin-graphql > graphql-config > @endemolshinegroup/cosmiconfig-typescript-loader > ts-node@9.1.1" has unmet peer dependency "typescript@>=2.7".
warning "gatsby-plugin-sass > sass-loader@7.3.1" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
warning " > slick-carousel@1.8.1" has unmet peer dependency "jquery@>=1.8.0".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 116.40s.
dmitriymalayev@Dmitriys-Mini dmitriy-malayevs-portfolio % gatsby develop
info We're shipping new features! For final testing, we're rolling them out first to a small % of Gatsby users
and your site was automatically chosen as one of them. With your help, we'll then release them to everyone in the next minor release.
We greatly appreciate your help testing the change. Please report any feedback good or bad in the umbrella issue. If you do encounter problems,
please disable the flag by setting it to false in your gatsby-config.js like:
flags: {
THE_FLAG: false
}
The following flags were automatically enabled on your site:
DEV_SSR · (Umbrella Issue (https://gatsby.dev/dev-ssr-feedback)) · Server Side Render (SSR) pages on full reloads during develop. Helps you detect
SSR bugs and fix them without needing to do full builds.
success open and validate gatsby-configs - 0.128s
success load plugins - 0.518s
success onPreInit - 0.020s
success initialize cache - 0.005s
success copy gatsby files - 0.034s
success onPreBootstrap - 0.010s
success loading DatoCMS schema - 1.103s
success createSchemaCustomization - 1.124s
success loading DatoCMS content - 2.965s
success Checking for changed pages - 0.001s
success source and transform nodes - 3.011s
success building schema - 0.270s
info Total nodes: 194, SitePage nodes: 15 (use --verbose for breakdown)
success createPages - 0.026s
success Checking for changed pages - 0.000s
success createPagesStatefully - 0.035s
success update schema - 0.026s
success write out redirect data - 0.001s
success onPostBootstrap - 0.001s
info bootstrap finished - 7.172s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.262s
success write out requires - 0.004s
success run static queries - 0.057s - 1/1 17.41/s
success run page queries - 0.790s - 3/3 3.80/s
warn ESLintError:
/Users/dmitriymalayev/gatsby/dmitriy-malayevs-portfolio/src/components/layout.js
93:19 warning A control must be associated with a text label jsx-a11y/control-has-associated-label
✖ 1 problem (0 errors, 1 warning)
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
@import "./reset"
^
Media query expression must begin with '('
in /Users/dmitriymalayev/gatsby/dmitriy-malayevs-portfolio/src/styles/index.sass (line 2, column 1)
File: src/styles/index.sass
failed Building development bundle - 7.589s`
Reproduction Link
https://github.com/DmitriyMalayev/dmitriy-malayevs-portfolio
Steps to Reproduce
created gatsby
2.cloned
3.added api key
getting error
...
Expected Result
no errors
Actual Result
warn ESLintError:
/Users/dmitriymalayev/gatsby/dmitriy-malayevs-portfolio/src/components/layout.js
93:19 warning A control must be associated with a text label jsx-a11y/control-has-associated-label
✖ 1 problem (0 errors, 1 warning)
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
@import "./reset"
^
Media query expression must begin with '('
in /Users/dmitriymalayev/gatsby/dmitriy-malayevs-portfolio/src/styles/index.sass (line 2, column 1)
File: src/styles/index.sass
failed Building development bundle - 7.589s
Environment
System:
OS: macOS 11.2.1
CPU: (8) x64 Apple M1
Shell: 5.8 - /bin/zsh
Binaries:
Node: 15.10.0 - ~/.nvm/versions/node/v15.10.0/bin/node
Yarn: 1.22.5 - ~/.yarn/bin/yarn
npm: 7.5.6 - ~/.nvm/versions/node/v15.10.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 91.0.4472.114
Firefox: 89.0.2
Safari: 14.0.3
npmPackages:
gatsby: ^2.24.81 => 2.32.13
gatsby-image: ^2.4.21 => 2.11.0
gatsby-plugin-react-helmet: ^3.3.14 => 3.10.0
gatsby-plugin-sass: ^2.3.18 => 2.8.0
gatsby-source-datocms: ^2.2.4 => 2.6.16
gatsby-source-filesystem: ^2.3.35 => 2.11.1
gatsby-transformer-remark: ^2.8.43 => 2.16.1
npmGlobalPackages:
gatsby: 3.9.1
Advertisement
Answer
It looks like you have some CSS (or Sass) in your index.sass file:
@import "./reset" ^ Media query expression must begin with '(' in /Users/dmitriymalayev/gatsby/dmitriy-malayevs-portfolio/src/styles/index.sass (line 2, column 1) File: src/styles/index.sass
Specifically in your @media query.
Check it out, provide it to update the question or, alternatively, you can try changing the extension of the file to .scss, adapting the needed parts.