search

hupe1980 / gatsby-plugin-material-ui

Gatsby plugin for Material-UI with built-in server-side rendering support
MIT License
136 stars 24 forks source link

gatsby-plugin-material-ui correct rendering & deployment issue #47

Closed RahmiTufanoglu closed 4 years ago

RahmiTufanoglu commented 4 years ago

I'm getting the error log from gitlab ci (the output below) when deploying the website with the gatsby-plugin-material-ui to aws s3. The deployment without the plugin works. My app works locally, but on command "gatsby serve" the plugin does not render all components correctly. Only after a refresh I get the correct page. I'm using the latest versions of every npm package.

Gitlab CI Error: error "gatsby-plugin-material-ui" threw an error while running the onPreBootstrap lifecycle:

Gitlab CI:

Running with gitlab-runner 12.10.0-rc2 (6c8c540f)
   on docker-auto-scale 0277ea0f
Preparing the "docker+machine" executor
 Using Docker executor with image node:latest ...
 Pulling docker image node:latest ...
 Using docker image sha256:a5a6a9c328776cffabad04bf248e308c5efdd6d93b1e76166ac28a6695c71ccc for node:latest ...
Preparing environment
00:02
 Running on runner-0277ea0f-project-14727150-concurrent-0 via runner-0277ea0f-srm-1587664533-e9ebaf82...
Getting source from Git repository
00:03
 $ eval "$CI_PRE_CLONE_SCRIPT"
 Fetching changes with git depth set to 50...
 Initialized empty Git repository in /builds/myapp/my-homepage/homepage/.git/
 Created fresh repository.
 From https://gitlab.com/myapp/my-homepage/homepage
  * [new ref]         refs/pipelines/139242621 -> refs/pipelines/139242621
  * [new branch]      feature/#60-add-gatsby-plugin-material-ui -> origin/feature/#60-add-gatsby-plugin-material-ui
 Checking out e8ef5285 as feature/#60-add-gatsby-plugin-material-ui...
 Skipping Git submodules setup
Restoring cache
 Checking cache for feature--60-add-gatsby-plugin-material-ui...
 Downloading cache.zip from https://storage.googleapis.com/gitlab-com-runners-cache/project/14727150/feature--60-add-gatsby-plugin-material-ui 
 Successfully extracted cache
Downloading artifacts
00:01
Running before_script and script
 $ yarn
 yarn install v1.22.4
 [1/4] Resolving packages...
 [2/4] Fetching packages...
 warning url-loader@1.1.2: Invalid bin field for "url-loader".
 info fsevents@2.1.3: The platform "linux" is incompatible with this module.
 info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
 info fsevents@1.2.12: The platform "linux" is incompatible with this module.
 info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
 [3/4] Linking dependencies...
 warning " > eslint-loader@3.0.4" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
 [4/4] Building fresh packages...
 warning Error running install script for optional dependency: "/builds/newcubator/newcubator-homepage/homepage/node_modules/git-win: Command failed.
 Exit code: 1
 Command: node lib/install.js
 Arguments: 
 Directory: /builds/newcubator/newcubator-homepage/homepage/node_modules/git-win
 Output:
 `git-win` not support this platform, please install from Windows."
 info This module is OPTIONAL, you can safely ignore this error
 success Saved lockfile.
 Done in 107.63s.
 $ yarn build
 yarn run v1.22.4
 $ NODE_OPTIONS='-r dotenv/config' gatsby build
 success open and validate gatsby-configs - 0.030s
 success load plugins - 1.182s
 success onPreInit - 0.010s
 success delete html and css files from previous builds - 0.012s
 success initialize cache - 0.007s
 success copy gatsby files - 0.023s
 error "gatsby-plugin-material-ui" threw an error while running the onPreBootstrap lifecycle:
 The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received null
   39 |   }
   40 | 
 > 41 |   fs.writeFileSync(dir + "/styles-provider-props.js", module);
      |      ^
   42 | };
   Error: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type s  tring or an instance of Buffer, TypedArray, or DataView. Received null

   - gatsby-node.js:41 Object.exports.onPreBootstrap
     [homepage]/[gatsby-plugin-material-ui]/gatsby-node.js:41:6

   - api-runner-node.js:256 runAPI
     [homepage]/[gatsby]/dist/utils/api-runner-node.js:256:37

   - api-runner-node.js:375 Promise.catch.decorateEvent.pluginName
     [homepage]/[gatsby]/dist/utils/api-runner-node.js:375:15

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

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

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

   - api-runner-node.js:374 
     [homepage]/[gatsby]/dist/utils/api-runner-node.js:374:12

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

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

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

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

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

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

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

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

 not finished onPreBootstrap - 0.061s
 error Command failed with exit code 1.
 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Running after_script
00:01
Uploading artifacts for failed job
00:02
 ERROR: Job failed: exit code 1

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: "my website",
    shortTitle: "website",
  },
  plugins: [
    "gatsby-plugin-typescript",
    "gatsby-plugin-eslint",
    "gatsby-plugin-react-helmet",
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    "gatsby-transformer-json",
    "gatsby-plugin-material-ui",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "test app",
        short_name: "app",
        description: `my app`,
        start_url: "/",
        background_color: "#fff",
        theme_color: "#fff",
        display: "standalone",
        icon: "src/images/logos/mylogo.png",
        lang: "de",
      },
    },
    {
      resolve: "gatsby-source-contentful",
      options: {
        host: process.env.CONTENTFUL_HOST,
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        environment: process.env.CONTENTFUL_ENVIRONMENT,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        downloadLocal: true,
      },
    },
    {
      resolve: "gatsby-plugin-s3",
      options: {
        bucketName: process.env.AWS_S3_BUCKET_NAME,
      },
    },
    {
      resolve: "gatsby-plugin-offline",
      options: {
        precachePages: [
          "/jobs",
          "/jobs/*",
          "/services/*"
        ],
      },
    },
    {
      resolve: "gatsby-plugin-preconnect",
      options: {
        domains: ["http://images.ctfassets.net/"],
      },
    },
  ],
};

package.json:

{
  "name": "my app",
  "private": true,
  "version": "1.0.0",
  "dependencies": {
    "@contentful/rich-text-react-renderer": "^13.4.0",
    "@contentful/rich-text-types": "^14.1.0",
    "@material-ui/core": "^4.9.11",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.50",
    "@material-ui/styles": "^4.9.10",
    "axios": "^0.19.2",
    "gatsby": "^2.20.29",
    "gatsby-cli": "^2.11.15",
    "gatsby-image": "^2.3.4",
    "gatsby-plugin-manifest": "^2.3.6",
    "gatsby-plugin-material-ui": "^2.1.6",
    "gatsby-plugin-offline": "^3.1.4",
    "gatsby-plugin-preconnect": "^1.1.7",
    "gatsby-plugin-react-helmet": "^3.2.4",
    "gatsby-plugin-sharp": "^2.5.6",
    "gatsby-plugin-typescript": "^2.3.3",
    "gatsby-source-contentful": "^2.2.9",
    "gatsby-transformer-json": "^2.3.3",
    "gatsby-transformer-sharp": "^2.4.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.0",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0",
    "react-spring": "^8.0.27"
  },
  "devDependencies": {
    "@types/eslint": "^6.1.8",
    "@types/eslint-plugin-prettier": "^3.1.0",
    "@types/node": "^13.13.2",
    "@types/react": "^16.9.23",
    "@types/react-dom": "^16.9.5",
    "@types/react-helmet": "^5.0.15",
    "@typescript-eslint/eslint-plugin": "^2.29.0",
    "@typescript-eslint/parser": "^2.29.0",
    "dotenv": "^8.2.0",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.4",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-hooks": "^2.5.1",
    "gatsby-plugin-eslint": "^2.0.8",
    "gatsby-plugin-s3": "^0.3.3",
    "prettier": "^2.0.5",
    "ts-node": "^8.9.0",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "build": "NODE_OPTIONS='-r dotenv/config' gatsby build",
    "develop": "NODE_OPTIONS='-r dotenv/config' gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx,ts,tsx}",
    "start": "NODE_OPTIONS='-r dotenv/config' yarn develop",
    "serve": "NODE_OPTIONS='-r dotenv/config' gatsby serve -p 8000",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
    "lint": "prettier --check src/**/*.{js,jsx,ts,tsx} && eslint -c .eslintrc 'src/**/*.{js,jsx,ts,tsx}'",
    "deploy": "NODE_OPTIONS='-r dotenv/config' gatsby-plugin-s3 deploy"
  }
}
RahmiTufanoglu commented 4 years ago

And here is the gatsby-browser.js content. Layout is an appbar which gets icon an title from contentful.

import React from "react";
import Layout from "./src/components/layout";

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>;
};

export const onServiceWorkerUpdateReady = () => {
  const answer = window.confirm(
    "This application has been updated. " +
      "Reload to display the latest version?"
  );

  if (answer === true) {
    window.location.reload();
  }
};

export const registerServiceWorker = () => true;
oliviertassinari commented 4 years ago

@RahmiTufanoglu Do you have a reproduction?

RahmiTufanoglu commented 4 years ago

@oliviertassinari The project is closed-source. This is my first time. Could you tell me how I can bring you the reproduction?

oliviertassinari commented 4 years ago

The idea is to create a new & minimal repository that demonstrates the issue.

RahmiTufanoglu commented 4 years ago

I try to create a minimal repository.

RahmiTufanoglu commented 4 years ago

@oliviertassinari I can invite you to the test repo on gitlab

oliviertassinari commented 4 years ago

@RahmiTufanoglu No thanks, we need a minimal & public reproduction.

RahmiTufanoglu commented 4 years ago

@oliviertassinari Hope it helps. You can ignore the Pipeline because of Netlify.

Gitlab: https://gitlab.com/rahmi_tufanoglu/homepage-test Netlify: https://5ea2bb60495f007a6b13ae80--dreamy-goldstine-39731a.netlify.app/

oliviertassinari commented 4 years ago

@RahmiTufanoglu Sorry, please remove as much code as possible, it should contain the strict minimum to reproduce the issue.

RahmiTufanoglu commented 4 years ago

@oliviertassinari Ok. Removed code. Is this enough? And updated the netlify link.

le0nik commented 4 years ago

I get the same error with 2.1.7.

The problem only occurrs with Node 14. fs.writeFileSync never accepted null as data argument, but before node 14 it used to coerce it to a supported data type, now it doesn't. See History section here: https://nodejs.org/dist/latest-v14.x/docs/api/fs.html#fs_fs_writefile_file_data_options_callback

onPreBootstrap method is not exactly a copy-paste from typography plugin, which sets module to string by default:

https://github.com/gatsbyjs/gatsby/blob/ae306827f3b0a96234e1b0d141748ad1cf6b932d/packages/gatsby-plugin-typography/src/gatsby-node.js#L21

when material-ui plugin sets it to null:

https://github.com/hupe1980/gatsby-plugin-material-ui/blob/05588ae56ea3e9a7b2f5e4f1d2ad7234ba971d89/gatsby-plugin-material-ui/src/gatsby-node.js#L32

Possible Solution: set module to a dummy module string, like typography plugin does.

oliviertassinari commented 4 years ago

Does it work better with https://github.com/hupe1980/gatsby-plugin-material-ui/releases/tag/v2.1.7, it's now using the cache API of Gatsby?

le0nik commented 4 years ago

Nope, the problem is not with the api, but with passing null to fs.writeFileSync

This is the gist of the error:

 ERROR #11321  PLUGIN

"gatsby-plugin-material-ui" threw an error while running the onPreBootstrap lifecycle:

The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received null

  40 |   }
  41 |
> 42 |   fs.writeFileSync(path.join(dir, "styles-provider-props.js"), module);
     |      ^
  43 | }; // Copy and past from https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typography
  44 |
  45 |

File: node_modules/gatsby-plugin-material-ui/gatsby-node.js:42:6

  Error: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received null

  - gatsby-node.js:42 Object.exports.onPreBootstrap
    [project]/[gatsby-plugin-material-ui]/gatsby-node.js:42:6
oliviertassinari commented 4 years ago

@le0nik Ok, so the solution would be not to write anything to the file system if module is empty?

le0nik commented 4 years ago

@oliviertassinari No, this would cause errors here https://github.com/hupe1980/gatsby-plugin-material-ui/blob/05588ae56ea3e9a7b2f5e4f1d2ad7234ba971d89/gatsby-plugin-material-ui/src/gatsby-ssr.js#L5 and here https://github.com/hupe1980/gatsby-plugin-material-ui/blob/05588ae56ea3e9a7b2f5e4f1d2ad7234ba971d89/gatsby-plugin-material-ui/src/gatsby-browser.js#L4 where this file is imported. The simplest solution is to set module to module.exports = null in else block in onPreBootstrap.

EDIT: Here's a PR that fixes it https://github.com/hupe1980/gatsby-plugin-material-ui/pull/49/files