Closed vai0 closed 4 years ago
erezrokah
commented
4 years ago @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
commented
4 years ago 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
commented
4 years ago 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: https://github.com/gatsbyjs/gatsby/blob/deb41cdfefbefe0c170b5dd7c10a19ba2b338f6e/packages/gatsby-plugin-netlify-cms/src/cms.js#L20
For gatsby develop the plugin uses another method here:
https://github.com/gatsbyjs/gatsby/blob/deb41cdfefbefe0c170b5dd7c10a19ba2b338f6e/packages/gatsby-plugin-netlify-cms/src/cms.js#L26
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
commented
4 years ago 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
commented
4 years ago 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/"] },
],
},
},
],
};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 :man_shrugging:
Here's my fork: https://www.npmjs.com/package/@vai0/gatsby-plugin-netlify-cms
erezrokah
commented
4 years ago 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
commented
4 years ago @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
commented
4 years ago @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:
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](https://github.com/vai0/repo-css-dep-issue/blob/master/gatsby-config.js#L64-L86), 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 &&
Loading (StaticQuery)}
@ ./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 &&
Loading (StaticQuery)}
@ ./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](https://github.com/vai0/repo-css-dep-issue/blob/master/src/cms/previews/StandardLpPreview.js), e.g., the [Link and Layout components](https://github.com/vai0/repo-css-dep-issue/blob/master/src/components/StandardLp.js#L2-L4) - 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](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L154).@vai0 Thanks for setting up the repo, I'll try to reproduce and update when I have more information.
erezrokah
commented
4 years ago Hey @vai0, I got passed number 1 by removing the package-lock.json and switching to yarn as a dependency manager:
package-lock.json and delete node_modules.yarn install.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: https://github.com/gatsbyjs/gatsby/issues/15126#issuecomment-570251461.
I'll open a new issue for that with a fresh repo.
Update: see here for number 3
vai0
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago @erezrokah will give that a shot - would you mind listing your npm and node versions?
erezrokah
commented
4 years ago node v12.13.0
npm 6.12.0
yarn 1.21.1using your updates from https://github.com/vai0/repo-css-dep-issue/pull/1 and running with the same node and npm versions didn't fix it, only running with yarn did the trick :disappointed:
@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
Description
After updating to the latest
gatsby-plugin-netlify-cms, runninggatsby buildfails and throws the following errorgatsby developworks without issue. Looking at https://github.com/webpack-contrib/mini-css-extract-plugin/issues/73, suspect it may be relatedSteps 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 buildcomplete without errorActual result
See error above
Environment