WEBPACK error #98123: argument 'value' must be either string of Buffer

[mikeyfe6]

Description

When building with gatsby build && gatsby serve it stops at the "Building production JavaScript and CSS bundles"-process. I think it has something to do with my Webpack setup in gatsby-node.js. And I have a feeling my Sass setup can also be conflicting...

Expected result

Gatsby should build my app, this also happens when trying to deploy with Netlify. But there i'm getting the error: "Cannot read property 'split' of undefined"

Actual result

Webpack Error #98123, "Generating JavaScript bundles failed; argument 'value' must be either string of Buffer"

Environment

  System:
    OS: macOS 11.2.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.10.0 - ~/.nvm/versions/node/v15.14.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 90.0.4430.85
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.3.1 => 3.3.1 
    gatsby-plugin-canonical-urls: ^3.3.0 => 3.3.0 
    gatsby-plugin-catch-links: ^3.3.0 => 3.3.0 
    gatsby-plugin-eslint: ^3.0.0 => 3.0.0 
    gatsby-plugin-feed: ^3.3.0 => 3.3.0 
    gatsby-plugin-google-tagmanager: ^3.3.0 => 3.3.0 
    gatsby-plugin-image: ^1.3.1 => 1.3.1 
    gatsby-plugin-manifest: ^3.3.0 => 3.3.0 
    gatsby-plugin-netlify: ^3.3.0 => 3.3.0 
    gatsby-plugin-nprogress: ^3.3.0 => 3.3.0 
    gatsby-plugin-offline: ^4.3.0 => 4.3.0 
    gatsby-plugin-react-helmet: ^4.3.0 => 4.3.0 
    gatsby-plugin-robots-txt: ^1.5.6 => 1.5.6 
    gatsby-plugin-sass: ^4.3.0 => 4.3.0 
    gatsby-plugin-sharp: ^3.3.1 => 3.3.1 
    gatsby-plugin-sitemap: ^3.3.0 => 3.3.0 
    gatsby-plugin-smoothscroll: ^1.2.0 => 1.2.0 
    gatsby-remark-images: ^5.0.0 => 5.0.0 
    gatsby-remark-images-contentful: ^4.0.0 => 4.0.0 
    gatsby-remark-relative-images: ^2.0.2 => 2.0.2 
    gatsby-source-contentful: ^5.3.0 => 5.3.0 
    gatsby-source-filesystem: ^3.3.0 => 3.3.0 
    gatsby-transformer-remark: ^4.0.0 => 4.0.0 
    gatsby-transformer-sharp: ^3.3.0 => 3.3.0 
  npmGlobalPackages:
    gatsby-cli: 3.3.0

my webpack setup:

exports.onCreateWebpackConfig = ({
    stage,
    rules,
    loaders,
    plugins,
    actions,
  }) => {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /\.(sa|sc|c)ss$/,
            use: [
              // You don't need to add the matching ExtractText plugin
              // because gatsby already includes it and makes sure it's only
              // run at the appropriate stages, e.g. not in development
              loaders.miniCssExtract(),
              loaders.css({ importLoaders: 1 }),
              // the postcss loader comes with some nice defaults
              // including autoprefixer for our configured browsers
              loaders.postcss(),
              // Creates `style` nodes from JS strings
              'style-loader',
              // Translates CSS into CommonJS
              'css-loader',
              // Compiles Sass to CSS
              'sass-loader',
              'postcss-loader',
            ],
          },
        ],
      },
      // resolve: {
      //   modules: [path.resolve(__dirname, 'src'), 'node_modules'],
      // },
      plugins: [
        plugins.define({
          __DEVELOPMENT__: stage === 'develop' || stage === 'develop-html',
        }),
      ],
      node: {
        fs: 'empty',
        path: 'mock',
      },
      resolve: {
        alias: {
          path: require.resolve('path-browserify'),
        },
        fallback: {
          fs: false,
        },
      },
    });
  };

my sass setup:

const postCSSPlugin = require('postcss-preset-env');
const nodeSASSPlugin = require('node-sass');

{
      resolve: 'gatsby-plugin-sass',
      options: {
        implementation: nodeSASSPlugin,
        postCssPlugins: [postCSSPlugin()],
        sassOptions: {
          precision: 6,
        },
      },
    },

github project: https://github.com/mikeyfe6/Gimmix
live website: https://gimmix.nl

Thanks in advance!

[LekoArts]

I'd suggest removing the webpack config you added for scss files as Gatsby already handles this for you. Other than that: Can you pinpoint in your version control history when this error started to occur? This way you'll be able to see where the problem lies.

[mikeyfe6]

Thank you, I will delete the config and try again! and about the version control history, thats a difficult one. There are 7 commits (whereof 6 where tests). here's my history:
https://github.com/mikeyfe6/Gimmix/commits/master

and from:
mikeyfe6/menefex@25fecf5 (11 april, 12 and 13 I committed some tests)

[LekoArts]

Since Netlify will deploy each change you can see on which commit it broke

[mikeyfe6]

Yes, from this commit on: mikeyfe6/menefex@25fecf5 it stopped working.

[LekoArts]

Then something in your initial Gatsby v2 => v3 went wrong. Here's the migration guide: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/