Error: Bad arguments: First argument should be a string, second should be an array of strings

[blazeu]

throws error when building and then exits.

error UNHANDLED REJECTION

  Error: Bad arguments: First argument should be a string, second should be an a  rray of strings

  - compare-strings.js:94 Object.findBestMatch
    [cf-catalog]/[string-similarity]/compare-strings.js:94:11

  - load-plugins.js:64 
    [cf-catalog]/[gatsby]/dist/bootstrap/load-plugins.js:64:42

  - Array.forEach

  - load-plugins.js:63 getBadExportsMessage
    [cf-catalog]/[gatsby]/dist/bootstrap/load-plugins.js:63:14

  - load-plugins.js:315 
    [cf-catalog]/[gatsby]/dist/bootstrap/load-plugins.js:315:27

  - Array.forEach

  - load-plugins.js:308 _callee$
    [cf-catalog]/[gatsby]/dist/bootstrap/load-plugins.js:308:33

  - index.js:117 _callee$
    [cf-catalog]/[gatsby]/dist/bootstrap/index.js:117:20

Using gatsby v1.9.214

[youfoundron]

uhh, can I see your gatsby-config file?

[blazeu]

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    `gatsby-plugin-react-next`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-postcss-sass`,
      options: {
        postCssPlugins: [
          autoprefixer({
            browsers: ['last 2 versions'],
          }),
        ],
        precision: 8,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/content/`,
      },
    },
    `gatsby-transformer-yaml`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-purify-css`,
  ],
}

There you go, I guess it's gatsby-plugin-postcss-sass that's problematic.

[youfoundron]

@blazeu will take a look this weekend, in the meantime, try putting putting the gatsby-plugin-postcss-sass entry after gatsby-plugin-purfiy-css in the plugins array.

[blazeu]

That did the trick, thanks!

[blazeu]

Reopening because this probably needs some inspection on why it breaks.

[CanRau]

i've got the same, putting it all the way up (above all style, css-in-js e.g. glamor related stuff) solved it

[youfoundron]

@blazeu, @CanRau are your repositories open source? would be helpful in debugging this.

[CanRau]

it's going to be but still under heavy development so I haven't even "played" with your module I just threw it in for later ;-)

[youfoundron]

No problem!

[CanRau]

I you haven't figured it out by then I'll let you know ;)

[Gazler]

You can replicate this issue by updating the example application in this repository to use gatsby: "next"

Haven't had a change to dive too deeply into the issue, but it appears that some functions that aren't supported are being exported by webpack.

Logging out pluginAPIKeys and apis before this line results in:

https://github.com/gatsbyjs/gatsby/blob/0ef17f334f5552fd9c594fda0fe7ec6a032e037a/packages/gatsby/src/bootstrap/load-plugins/validate.js#L11

pluginAPIKeys = [ undefined,
  'writeFile',
  'readFile',
  'readFile',
  'writeFile',
  'onPostBuild',
  'default',
  'default',
  'default' ]

apis =[ 'resolvableExtensions',
  'createPages',
  'createPagesStatefully',
  'sourceNodes',
  'onCreateNode',
  'onCreatePage',
  'setFieldsOnGraphQLNodeType',
  'preprocessSource',
  'generateSideEffects',
  'onCreateBabelConfig',
  'onCreateWebpackConfig',
  'onPreInit',
  'onPreBootstrap',
  'onPostBootstrap',
  'onPreBuild',
  'onPostBuild',
  'onPreExtractQueries' ]

Given that there are 3 default keys in there, I suspect that would be the result from using export default...

The undefined is what causes the specific issue mentioned by the way.

[youfoundron]

Good catch 👍

Fix might be as simple as converting to commonjs style imports / exports in the source or tweaking the webpack config. Will give that a shot and see if it closes out the issue.

[chmac]

@youfoundron Any joy with this? I've tried to see if I can make any progress, but I don't know enough about webpack / babel to make any real progress.

[chmac]

With a little hacking, I was able to get some more useful output as to the error:

error
Your plugins must export known APIs from their gatsby-node.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

See https://www.gatsbyjs.org/docs/node-apis/ for the list of Gatsby Node APIs

- The plugin "gatsby-plugin-purify-css@2.2.1" is exporting a variable named "undefined" which isn't an API.

- The plugin "gatsby-plugin-purify-css@2.2.1" is exporting a variable named "writeFile" which isn't an API.

- The plugin "gatsby-plugin-purify-css@2.2.1" is exporting a variable named "readFile" which isn't an API.

- The plugin "gatsby-plugin-purify-css@2.2.1" is exporting a variable named "readFile" which isn't an API.

- The plugin "gatsby-plugin-purify-css@2.2.1" is exporting a variable named "writeFile" which isn't an API.

- The plugin "gatsby-plugin-purify-css@2.2.1" is exporting a variable named "default" which isn't an API.

- The plugin "gatsby-plugin-purify-css@2.2.1" is exporting a variable named "default" which isn't an API.

- The plugin "gatsby-plugin-purify-css@2.2.1" is exporting a variable named "default" which isn't an API.

[chmac]

Workaround

For anyone else who finds this issue and wants to try and get this running today, the following is currently working for me.

• Remove these lines by editing node_modules/gatsby/dist/bootstrap/load-plugins/index.js and removing or commenting out lines 69-72
• Clone this repository
• Install dependencies (yarn)
• Edit src/index.js to add import 'babel-polyfill' as the first line
• Run yarn build
• Copy the gatsby-node.js file from this repo to node_modules/gatsby-plugin-purify-css/ in your Gatsby app
• Run gatsby build again

With these hacks I was able to get it running, but in the end I got the following output:

    ________________________________________________
    |
    |   PurifyCSS has reduced the file size by ~ 0.0%
    |
    ________________________________________________