search

EdPike365 / gatsby-head-style-boss

Control your head style elements, offer multiple themes and dark mode without transition flash.
BSD Zero Clause License
0 stars 0 forks source link

Error #11321 on `gatsby develop` #1

Open acarnwath opened 2 years ago

acarnwath commented 2 years ago

I've installed this plugin and set up the configuration but when I run gatsby develop I get a few errors. In the following logs I've replaced the filepath with [PROJECT FILEPATH]. Please let me know if I'm missing something!

It start out as usual, then...

success Compiling Gatsby Functions - 0.385s

 ERROR #11321  PLUGIN

"gatsby-head-style-boss" threw an error while running the onPreBootstrap lifecycle:

Cannot read properties of undefined (reading 'forEach')

  21 | exports.onPreBootstrap = async ({ cache }, pluginOptions) => {
  22 |   const config = pluginOptions.config
> 23 |   await processStyleResources(config);
     |         ^
  24 |   await processIIFEFunction(config);
  25 | }
  26 | /*

File: node_modules/gatsby-head-style-boss/gatsby-node.js:23:9

  TypeError: Cannot read properties of undefined (reading 'forEach')

  - StyleFactoryNode.js:17 processStyleResources
    [adcouncil-va]/[gatsby-head-style-boss]/node/StyleFactoryNode.js:17:23

  - gatsby-node.js:23 Object.exports.onPreBootstrap
    [adcouncil-va]/[gatsby-head-style-boss]/gatsby-node.js:23:9

  - api-runner-node.js:434 runAPI
    [adcouncil-va]/[gatsby]/src/utils/api-runner-node.js:434:22

  - api-runner-node.js:590 Promise.catch.decorateEvent.pluginName
    [adcouncil-va]/[gatsby]/src/utils/api-runner-node.js:590:13

  - debuggability.js:384 Promise._execute
    [adcouncil-va]/[bluebird]/js/release/debuggability.js:384:9

  - promise.js:518 Promise._resolveFromExecutor
    [adcouncil-va]/[bluebird]/js/release/promise.js:518:18

  - promise.js:103 new Promise
    [adcouncil-va]/[bluebird]/js/release/promise.js:103:10

  - api-runner-node.js:588 
    [adcouncil-va]/[gatsby]/src/utils/api-runner-node.js:588:16

  - util.js:16 tryCatcher
    [adcouncil-va]/[bluebird]/js/release/util.js:16:23

  - reduce.js:166 Object.gotValue
    [adcouncil-va]/[bluebird]/js/release/reduce.js:166:18

  - reduce.js:155 Object.gotAccum
    [adcouncil-va]/[bluebird]/js/release/reduce.js:155:25

  - util.js:16 Object.tryCatcher
    [adcouncil-va]/[bluebird]/js/release/util.js:16:23

  - promise.js:547 Promise._settlePromiseFromHandler
    [adcouncil-va]/[bluebird]/js/release/promise.js:547:31

  - promise.js:604 Promise._settlePromise
    [adcouncil-va]/[bluebird]/js/release/promise.js:604:18

  - promise.js:649 Promise._settlePromise0
    [adcouncil-va]/[bluebird]/js/release/promise.js:649:10

  - promise.js:729 Promise._settlePromises
    [adcouncil-va]/[bluebird]/js/release/promise.js:729:18

The build then continues as expected for a bit, then it flags this other error:

success Caching HTML renderer compilation - 0.446s
info HSB: gatsby-ssr lazyInit(): config was null, so loading needed resources...

 ERROR 

Error: ENOENT: no such file or directory, open '[PROJECT FILEPATH]/.cache/gatsby-head-style-boss/iife-function.js'
    at Object.openSync (node:fs:585:3)
    at Object.readFileSync (node:fs:453:35)
    at getStringFromFileUTF8SyncFS ([PROJECT FILEPATH]/public/webpack:/gatsby-starter-blog/node_modules/gatsby-head-style-boss/utils/fileUtils.js:14:32)
    at getIIFEFromCache ([PROJECT FILEPATH]/public/webpack:/gatsby-starter-blog/node_modules/gatsby-head-style-boss/ssr/IIFEFactory.js:24:39)
    at getBrowserFunctionScriptTag ([PROJECT FILEPATH]/public/webpack:/gatsby-starter-blog/node_modules/gatsby-head-style-boss/ssr/IIFEFactory.js:10:22)
    at lazyInit ([PROJECT FILEPATH]/public/webpack:/gatsby-starter-blog/node_modules/gatsby-head-style-boss/gatsby-ssr.js:42:59)
    at apiFn ([PROJECT FILEPATH]/public/webpack:/gatsby-starter-blog/node_modules/gatsby-head-style-boss/gatsby-ssr.js:29:3)
    at forEach ([PROJECT FILEPATH]/public/webpack:/gatsby-starter-blog/.cache/api-runner-ssr.js:56:22)
    at Array.forEach (<anonymous>)
    at apiRunner ([PROJECT FILEPATH]/public/webpack:/gatsby-starter-blog/.cache/api-runner-ssr.js:49:11)
    at Object.__WEBPACK_DEFAULT_EXPORT__ [as default] ([PROJECT FILEPATH]/public/webpack:/gatsby-starter-blog/.cache/develop-static-entry.js:93:12)
    at _bluebird.default.map.concurrency ([PROJECT FILEPATH]/node_modules/gatsby/src/utils/worker/child/render-html.ts:394:34)
    at tryCatcher ([PROJECT FILEPATH]/node_modules/bluebird/js/release/util.js:16:23)
    at MappingPromiseArray._promiseFulfilled ([PROJECT FILEPATH]/node_modules/bluebird/js/release/map.js:68:38)
    at MappingPromiseArray.PromiseArray._iterate ([PROJECT FILEPATH]/node_modules/bluebird/js/release/promise_array.js:115:31)
    at MappingPromiseArray.init ([PROJECT FILEPATH]/node_modules/bluebird/js/release/promise_array.js:79:10) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '[PROJECT FILEPATH]/.cache/gatsby-head-style-boss/iife-function.js'
}

 ERROR 

Page data from page-data.json for the failed page "/": {

... the page data...

 ERROR 

There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html  ENOENT: no such file or directory, open
'[PROJECT FILEPATH]/.cache/gatsby-head-style-boss/iife-function.js'

  229 | var isDynamic = function isDynamic(segment) {
  230 |   return paramRe.test(segment);
> 231 | };
      | ^
  232 | var isSplat = function isSplat(segment) {
  233 |   return segment && segment[0] === "*";
  234 | };

  WebpackError: ENOENT: no such file or directory, open '[PROJECT FILEPATH]/.cache/gatsby-head-style-boss/iife-function.js'

  - utils.js:231 
    [gatsby-starter-blog]/[@gatsbyjs]/reach-router/es/lib/utils.js:231:1

  - utils.js:99 
    [gatsby-starter-blog]/[@gatsbyjs]/reach-router/es/lib/utils.js:99:1

  - fileUtils.js:14 
    [gatsby-starter-blog]/[gatsby-head-style-boss]/utils/fileUtils.js:14:32

  - IIFEFactory.js:24 
    [gatsby-starter-blog]/[gatsby-head-style-boss]/ssr/IIFEFactory.js:24:39

  - IIFEFactory.js:10 
    [gatsby-starter-blog]/[gatsby-head-style-boss]/ssr/IIFEFactory.js:10:22

  - gatsby-ssr.js:42 
    [gatsby-starter-blog]/[gatsby-head-style-boss]/gatsby-ssr.js:42:59

  - gatsby-ssr.js:29 
    [gatsby-starter-blog]/[gatsby-head-style-boss]/gatsby-ssr.js:29:3

  - api-runner-ssr.js:56 
    gatsby-starter-blog/.cache/api-runner-ssr.js:56:22

  - api-runner-ssr.js:49 
    gatsby-starter-blog/.cache/api-runner-ssr.js:49:11

  - develop-static-entry.js:93 
    gatsby-starter-blog/.cache/develop-static-entry.js:93:12

  - assertThisInitialized.js:7 
    [gatsby-starter-blog]/[@babel]/runtime/helpers/assertThisInitialized.js:7:1

  - inheritsLoose.js:10 
    [gatsby-starter-blog]/[@babel]/runtime/helpers/inheritsLoose.js:10:26

  - interopRequireDefault.js:2 
    [gatsby-starter-blog]/[@babel]/runtime/helpers/interopRequireDefault.js:2:1

not finished Building development bundle - 17.453s

This is my config:

{
  resolve: `gatsby-head-style-boss`,
  options: {
    config: {
      styleElements: {
        styleConfigs: [
          {
            key: "small",
            displayName: "Small Styles",
            alwaysEnabled: true,
            componentType: "STYLE",
            crossorigin: "false",
            pathToCSSFile: "./src/styles/small.css",
            minify: true,
          },
          {
            key: "medium",
            displayName: "Medium Styles",
            alwaysEnabled: false,
            componentType: "LINK",
            pathToCSSFile: "./src/styles/medium.css",
            media: "(min-width: 768px)",
            minify: true,
          },
          {
            key: "large",
            displayName: "Large Styles",
            alwaysEnabled: false,
            componentType: "LINK",
            pathToCSSFile: "./src/styles/large.css",
            media: "(min-width: 990px)",
            minify: true,
          },
          {
            key: "xlarge",
            displayName: "Xlarge Styles",
            alwaysEnabled: false,
            componentType: "LINK",
            pathToCSSFile: "./src/styles/xlarge.css",
            media: "(min-width: 1200px)",
            minify: true,
          },
        ],
      },
    },
  },
},

My goal is to create tags in the that looks like this (with the correct post-compilation URLs of course):

<style>[STYLES INLINED FROM ./src/styles/small.css]</style>
<link href="./src/styles/medium.css" media="(min-width: 768px)" />
<link href="./src/styles/large.css" media="(min-width: 990px)" />
<link href="./src/styles/xlarge.css" media="(min-width: 1200px)" />
EdPike365 commented 2 years ago

I just saw this and I bet you moved on :-) This was my first public lib and I thought I'd get notifications when someone opened an issue. I might have, but was "watching" Gatsby and getting so swamped I just started bulk deleting. You might have come before I turned that watch off. I apologize! Thanks for all the info and I'll take a look in the next couple of weeks (I am time constrained now and have not worked on this in months (though I use it in my site still), it will take a bit to get it back in my head RAM).