TypeError: this[MODULE_TYPE] is not a function error caused by gatsby-plugin-netlify-cms

[vai0]

Description

After updating to the latest gatsby-plugin-netlify-cms, running gatsby build fails and throws the following error

...
success open and validate gatsby-configs - 0.015 s
success load plugins - 0.509 s
success onPreInit - 0.012 s
success delete html and css files from previous builds - 0.005 s
success initialize cache - 0.009 s
success copy gatsby files - 0.016 s
success onPreBootstrap - 0.004 s
success source and transform nodes - 3.541 s
success building schema - 1.781 s
success createPages - 0.286 s
success createPagesStatefully - 0.666 s
success onPreExtractQueries - 0.001 s
success update schema - 0.147 s
success extract queries from components - 1.084 s
success write out requires - 0.022 s
success write out redirect data - 0.002 s
success Build manifest and related icons - 0.157 s
success onPostBootstrap - 0.165 s
⠀
info bootstrap finished - 10.776 s
⠀
success run static queries - 0.056 s — 4/4 77.12 queries/second
error Plugin gatsby-plugin-netlify-cms returned an error


  ModuleBuildError: Module build failed (from ./node_modules/gatsby/node_modules/mini-css-extract-plugin/dist/loader.js):
  TypeError: this[MODULE_TYPE] is not a function
  
  - loader.js:141 childCompiler.runAsChild
    [frontend]/[gatsby]/[mini-css-extract-plugin]/dist/loader.js:141:24
  
  - Compiler.js:343 compile
    [frontend]/[webpack]/lib/Compiler.js:343:11
  
  - Compiler.js:681 hooks.afterCompile.callAsync.err
    [frontend]/[webpack]/lib/Compiler.js:681:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [frontend]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:678 compilation.seal.err
    [frontend]/[webpack]/lib/Compiler.js:678:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [frontend]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1423 hooks.optimizeAssets.callAsync.err
    [frontend]/[webpack]/lib/Compilation.js:1423:35
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [frontend]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1414 hooks.optimizeChunkAssets.callAsync.err
    [frontend]/[webpack]/lib/Compilation.js:1414:32
...

gatsby develop works without issue.
Looking at webpack-contrib/mini-css-extract-plugin#73, suspect it may be related

Steps to reproduce

... working on putting together a demo repo

How to Make a Minimal Reproduction: https://www.gatsbyjs.org/contributing/how-to-make-a-reproducible-test-case/

Expected result

gatsby build complete without error

Actual result

See error above

Environment

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Shell: 5.7.1 - /usr/bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Languages:
    Python: 3.6.3 - /home/jchi/.pyenv/shims/python
  Browsers:
    Chrome: 78.0.3904.87
    Firefox: 68.3.0esr
  npmGlobalPackages:
    gatsby-cli: 2.8.16

[erezrokah]

@vai0 sharing a repo will be very helpful to get a better idea of what's not working.
If you still need some time to get a repo going, can you please share your package.json and gatsby-config.js?

[vai0]

Hey @erezrokah,

Thanks the the quick response. I’m currently away from my machine for the holidays so won’t be able to get what you’re requesting til after Christmas.

However, so far I’ve pinned the issue down to
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L154. Removing the removal of MiniCSSExtractPlugin fixes the problem and allows the build to complete without issue. Hope that helps in the interim

[erezrokah]

Thanks @vai0 that helps.
The plugin adds its own instance of the MiniCSSExtractPlugin to extract the css so it can register it to be used by the preview template here:

gatsby/packages/gatsby-plugin-netlify-cms/src/cms.js

Line 20 in deb41cd

CMS.registerPreviewStyle(`cms.css`)

For gatsby develop the plugin uses another method here:

gatsby/packages/gatsby-plugin-netlify-cms/src/cms.js

Line 26 in deb41cd

const list = document.querySelectorAll(`link[rel='stylesheet']`)

as the MiniCSSExtractPlugin can't be used in development mode.

It is odd that this happens after an update to the plugin as the removal of MiniCSSExtractPlugin haven't changed.

We might need to look at the MiniCSSExtractPlugin instance we're removing to figure out what's breaking.

Anyway, enjoy the holidays :) Please update when you have more information

[vai0]

Yup, makes perfect sense. Would probably start with looking at the options that are being passed into the filtered out version of MiniCssExtractPlugin the build is probably looking for.

For reference the version I’m upgrading from did not contain that line filtering out plugins.

Happy holidays 🌲

[vai0]

package.json

{
    ...
    "scripts": {
        "clean": "gatsby clean",
        "start": "npm run build-scripts && npm run clean && gatsby develop --port 9000",
        "build-scripts": "rm -rf static/scripts/*.min.js && uglifyjs-folder static/scripts -eo static/scripts",
        "build": "npm run clean && npm run build-scripts && gatsby build",
        "serve": "gatsby serve --port 9000",
        ...
    },
    "browserslist": [
        ">0.25%",
        "not dead"
    ],
    "devDependencies": {
        "@babel/core": "7.5.4",
        "@babel/plugin-proposal-class-properties": "7.7.0",
        "@babel/plugin-syntax-dynamic-import": "7.2.0",
        "@babel/preset-env": "7.6.3",
        "@babel/preset-react": "7.6.3",
        "@storybook/addon-knobs": "5.0.11",
        "@storybook/addon-storysource": "5.0.11",
        "autoprefixer": "8.3.0",
        "babel-eslint": "10.0.2",
        "babel-loader": "8.0.4",
        "btoa": "1.2.1",
        "clean-webpack-plugin": "3.0.0",
        "css-loader": "3.2.0",
        "cypress": "3.6.1",
        "cypress-plugin-retries": "1.4.0",
        "eslint": "6.1.0",
        "eslint-plugin-babel": "5.3.0",
        "eslint-plugin-import": "2.8.0",
        "eslint-plugin-prettier": "3.1.0",
        "eslint-plugin-react": "7.14.3",
        "eslint-plugin-switch-case": "1.1.2",
        "file-loader": "2.0.0",
        "gatsby": "2.10.4",
        "gatsby-cli": "2.7.2",
        "gatsby-link": "2.2.0",
        "gatsby-plugin-intercom-spa": "0.1.0",
        "gatsby-plugin-manifest": "2.2.0",
        "gatsby-plugin-netlify-cms": "4.1.33",
        "gatsby-plugin-polyfill-io": "1.1.0",
        "gatsby-plugin-react-helmet": "3.1.0",
        "gatsby-plugin-robots-txt": "1.5.0",
        "gatsby-plugin-root-import": "2.0.5",
        "gatsby-plugin-sass": "2.1.0",
        "gatsby-plugin-sentry": "1.0.1",
        "gatsby-plugin-sitemap": "2.2.0",
        "gatsby-source-apiserver": "2.1.3",
        "gatsby-source-filesystem": "2.1.0",
        "gatsby-transformer-json": "2.2.0",
        "gatsby-transformer-yaml": "2.2.0",
        "html-webpack-inline-source-plugin": "0.0.10",
        "html-webpack-plugin": "3.2.0",
        "jsdom": "15.2.1",
        "node-fetch": "2.3.0",
        "node-sass": "4.12.0",
        "prerender-loader": "1.3.0",
        "react-lorem-component": "0.13.0",
        "remark": "10.0.1",
        "remark-html": "9.0.0",
        "sass-loader": "8.0.0",
        "style-loader": "1.0.0",
        "uglify-js": "3.3.28",
        "uglifyjs-folder": "1.5.1",
        "webpack": "4.41.2",
        "webpack-cli": "3.3.10",
        "yaml": "1.7.2",
        "yup": "0.24.1"
    },
    "dependencies": {
        "@fortawesome/fontawesome-pro": "5.6.1",
        "@fortawesome/fontawesome-svg-core": "1.2.6",
        "@fortawesome/free-brands-svg-icons": "5.5.0",
        "@fortawesome/pro-regular-svg-icons": "5.4.1",
        "@fortawesome/pro-solid-svg-icons": "5.9.0",
        "@fortawesome/react-fontawesome": "0.1.3",
        "@storybook/addon-a11y": "5.1.8",
        "@storybook/addon-viewport": "5.1.8",
        "@storybook/addons": "5.1.8",
        "@storybook/cli": "5.1.8",
        "@storybook/react": "5.1.8",
        "anchorate": "1.2.3",
        "autosuggest-highlight": "3.1.1",
        "balance-text": "3.3.0",
        "classnames": "2.2.5",
        "common-tags": "1.8.0",
        "core-js": "2.6.9",
        "country-list": "2.1.1",
        "flubber": "0.4.2",
        "focus-trap-react": "4.0.0",
        "formik": "vai0/formik#d524e4c",
        "google-map-react": "1.1.2",
        "jquery": "3.3.1",
        "js-cookie": "2.2.0",
        "lodash": "4.17.11",
        "minisearch": "2.0.0",
        "moment": "2.22.0",
        "moment-timezone": "0.5.23",
        "netlify-cms-app": "2.9.6",
        "prop-types": "15.6.2",
        "query-string": "5.1.1",
        "react": "16.8.6",
        "react-add-to-calendar-hoc": "1.0.8",
        "react-anchor-link-smooth-scroll": "1.0.12",
        "react-autosuggest": "9.4.3",
        "react-compare-image": "vai0/react-compare-image#60bffe5",
        "react-dom": "16.8.6",
        "react-dotdotdot": "1.3.1",
        "react-helmet": "5.2.0",
        "react-loadable": "5.5.0",
        "react-player": "1.7.0",
        "react-redux": "6.0.0",
        "react-remove-scroll-bar": "1.2.0",
        "react-select": "1.2.1",
        "react-slick": "0.24.0",
        "react-spring": "8.0.27",
        "react-waypoint": "8.0.3",
        "react-youtube": "7.6.0",
        "redux": "4.0.1",
        "slick-carousel": "1.8.1",
        "typeface-inconsolata": "0.0.54",
        "typeface-lato": "0.0.54",
        "typeface-merriweather": "0.0.72",
        "uuid": "3.3.3",
        "whatwg-fetch": "2.0.4",
        "xr": "0.3.0"
    }
}

gatsby-config.js

const path = require("path");

const config = require("./src/config");
const colors = require("./src/utils/colors");

module.exports = {
    siteMetadata: {
        siteUrl: "redacted",
    },
    plugins: [
        {
            resolve: "gatsby-plugin-manifest",
            options: {
                icon: `${__dirname}/static/images/favicon/icon.png`,
                name: "redacted",
                short_name: "redacted",
                start_url: "/",
                background_color: colors.purple800,
                theme_color: colors.purple800,
                display: "standalone",
            },
        },
        {
            resolve: "gatsby-plugin-sass",
            options: {
                includePaths: [`${__dirname}/src`],
            },
        },
        "gatsby-plugin-react-helmet",
        "gatsby-transformer-json",
        "gatsby-transformer-yaml",
        {
            resolve: "gatsby-plugin-netlify-cms",
            htmlTitle: "Bifrost Content Manager",
            options: {
                enableIdentityWidget: false,
                modulePath: `${__dirname}/src/cms/cms.js`,
                htmlTitle: "Bifrost Admin",
                customizeWebpackConfig: (config, { plugins }) => {
                    config.resolve = {
                        modules: [path.resolve(__dirname, "src"), "node_modules"],
                    }

                    config.plugins.push(
                      plugins.define({
                        PRERENDER_NAVBAR: JSON.stringify(false),
                      })
                    )

                    config.module.rules.push({
                        test: /gatsby\/cache-dir.*\.js$/,
                        loader: require.resolve(`babel-loader`),
                        options: {
                            presets: [
                            require.resolve(`@babel/preset-react`),
                            [
                                require.resolve(`@babel/preset-env`),
                                {
                                shippedProposals: true,
                                useBuiltIns: `entry`,
                                corejs: 2
                                }
                            ]
                            ],
                            plugins: [
                            require.resolve(`@babel/plugin-proposal-class-properties`),
                            ]
                        }
                    })

                    config.devtool = false;
                },
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "data",
                path: `${__dirname}/src/data/`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "pages",
                path: `${__dirname}/src/content/pages`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "events",
                path: `${__dirname}/src/content/events-center`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "resources",
                path: `${__dirname}/src/content/resources-center`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "misc",
                path: `${__dirname}/src/content/misc`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "lp-ungated-asset",
                path: `${__dirname}/src/content/lp-ungated-asset`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "lp-thank-you",
                path: `${__dirname}/src/content/lp-thank-you`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "lp-beta-thank-you",
                path: `${__dirname}/src/content/lp-beta-thank-you`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "lp-standard",
                path: `${__dirname}/src/content/lp-standard`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "lp-ebook",
                path: `${__dirname}/src/content/lp-ebook`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "lp-webinar-series",
                path: `${__dirname}/src/content/lp-webinar-series`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "lp-event-main",
                path: `${__dirname}/src/content/lp-event-main`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "lp-event-happy-hour",
                path: `${__dirname}/src/content/lp-event-happy-hour`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "lp-event-activity",
                path: `${__dirname}/src/content/lp-event-activity`,
            },
        },
        {
            resolve: "gatsby-source-filesystem",
            options: {
                name: "lp-event-roadshow",
                path: `${__dirname}/src/content/lp-event-roadshow`,
            },
        },
        {
            resolve: "gatsby-source-apiserver",
            options: {
                typePrefix: "external__",
                method: "get",
                url: config.GREENHOUSE_JOBS_API,
                name: "greenhouse",
            },
        },
        {
            resolve: "gatsby-source-apiserver",
            options: {
                typePrefix: "internal__",
                method: "get",
                url: config.FEATURED_BLOG_POSTS_API,
                name: "blogPosts",
            },
        },
        {
            resolve: "gatsby-plugin-sentry",
            options: {
                dsn: config.SENTRY_DSN,
                environment: process.env.NODE_ENV,
            },
        },
        {
            resolve: "gatsby-plugin-intercom-spa",
            options: {
                app_id: config.INTERCOM_APP_ID,
                include_in_development: true,
            },
        },
        {
            resolve: "gatsby-plugin-sitemap",
            options: {
                exclude: ["/patents", "/datafeeds"],
            },
        },
        {
            resolve: "gatsby-plugin-polyfill-io",
            options: {
                features: [
                    "Array.from",
                    "String.prototype.startsWith",
                    "Object.entries",
                    "Array.prototype.findIndex",
                    "Array.prototype.includes",
                    "Set",
                ],
            },
        },
        {
            resolve: "gatsby-plugin-robots-txt",
            options: {
                host: "redacted",
                sitemap: "redacted",
                policy: [
                    { userAgent: "*", allow: "/", disallow: ["/assets/"] },
                ],
            },
        },
    ],
};

[vai0]

For what it's worth, simply removing the removal of MiniCSSExtractPlugin from https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L154 fixes it for me. I have no explanation for why it works though 🤷‍♂️

Here's my fork: https://www.npmjs.com/package/@vai0/gatsby-plugin-netlify-cms

[erezrokah]

Hi @vai0 do you think you could create a repo reproducing the issue? I tried using your package.json and gatsby-config.js to create a reproduction using https://github.com/netlify-templates/gatsby-starter-netlify-cms but I think I'm missing a lot of other configurations.
Tried just copying the cms plugin custom settings and that didn't reproduce the issue (build finished successfully).

[vai0]

@erezrokah Sorry for the delay. Unfortunately I cannot share the repo, but I will try to reproduce the issue in a public repo. Will have an update either today or tomorrow.

[vai0]

@erezrokah I've gotten past the TypeError: this[MODULE_TYPE] is not a function error after updating gatsby, some plugins, and react to the latest versions.

Now I am encountering several issues, which I've been able to reproduce in a fresh repo here: https://github.com/vai0/repo-css-dep-issue

I've copied over the latest package.json and gatsby-config.js into this new repo

Issues:

1. On gatsby build, I encounter the error:

...
 ERROR #11321  PLUGIN

"gatsby-plugin-netlify-cms" threw an error while running the onCreateWebpackConfig lifecycle:

No module factory available for dependency type: CssDependency



  Error: No module factory available for dependency type: CssDependency
  
  - Compilation.js:800 addDependency
    [repo-css-dep-issue]/[webpack]/lib/Compilation.js:800:12
...

2. If I remove this block of code, which compiles gatsby's es6 code - then I encounter this error on gatsby develop, which seems to be attributed to importing gatsby modules into a netlify cms preview component that it seems to have trouble handling.

 ERROR  Failed to compile with 1 errors                                             7:14:19 PM
⠀
 error  in ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
⠀
Module parse failed: Unexpected token (25:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <React.Fragment>
|       {finalData && render(finalData)}
|       {!finalData && <div>Loading (StaticQuery)</div>}

 @ ./src/components/StandardLp.js 13:0-30 34:25-29
 @ ./src/cms/previews/StandardLpPreview.js
 @ ./src/cms/cms.js
 @ multi ./node_modules/gatsby-plugin-netlify-cms/cms.js ./src/cms/cms.js
⠀
 ERROR  Failed to compile with 1 errors                                             7:14:19 PM
⠀
 error  in ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
⠀
Module parse failed: Unexpected token (25:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <React.Fragment>
|       {finalData && render(finalData)}
|       {!finalData && <div>Loading (StaticQuery)</div>}

 @ ./src/components/StandardLp.js 13:0-30 34:25-29
 @ ./src/cms/previews/StandardLpPreview.js
 @ ./src/cms/cms.js
 @ multi ./node_modules/gatsby-plugin-netlify-cms/cms.js ./src/cms/cms.js

3. Styles in netlify-cms dashboard are broken (see font styles and the mispositioned profile icons. ignore the yellow bg - that's intentional to test that importing a global scss stylesheet into the cms works)
   
   

If I remove all gatsby dependencies from the preview component, e.g., the Link and Layout components - it solves issue 2 and 3, but the 1st issue still persists. The way I've been able to fix this so far is by removing the removal of MiniCssExtractPlugin here.

[erezrokah]

@vai0 Thanks for setting up the repo, I'll try to reproduce and update when I have more information.

[erezrokah]

Hey @vai0, I got passed number 1 by removing the package-lock.json and switching to yarn as a dependency manager:

1. Remove package-lock.json and delete node_modules.
2. Run yarn install.
3. yarn build should finish successfully.

After getting passed number 1, I still had issues with running yarn develop which were fixed by updating some other dependencies, see here.

As for number 3, it only happens in dev mode and related to the comment here: #15126 (comment).

I'll open a new issue for that with a fresh repo.

Update: see here for number 3

[vai0]

Hey @erezrokah, thanks for promptness. I too was also able to get past 1 after switching from npm to yarn. Moving to yarn may take some convincing as our entire team + project uses it. Before moving towards that direction, is npm not equally supported by Gatsby? Is there a guess behind why this works with yarn but not npm?

[erezrokah]

Don't have a guess, though when I tried running npm run install it updated the lock file which was strange.
You could try with npm but with the updated dependencies from my PR.

[vai0]

@erezrokah will give that a shot - would you mind listing your npm and node versions?

[erezrokah]

node v12.13.0
npm 6.12.0
yarn 1.21.1

[vai0]

using your updates from vai0/repo-css-dep-issue#1 and running with the same node and npm versions didn't fix it, only running with yarn did the trick 😞

@KyleAMathews is npm equally supported by Gatsby, or is yarn the preferred package manager? We're running into a strange build issue that only occurs with npm and not yarn, not sure if worth going down the path of migrating our project over to yarn just to get over this particular problem