Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Do NOT use this! #12

Open
davwheat opened this issue Jan 14, 2021 · 3 comments
Open

Do NOT use this! #12

davwheat opened this issue Jan 14, 2021 · 3 comments

Comments

@davwheat
Copy link

Do not use this plugin!

1. React is a dependency

This plugin has react as a dependency: it should not be. If you use this plugin, you'll end up with 2 different React packages in your bundle, increasing its size significantly.

2. You don't even need it!

Want ads? Copy .cache/default-html.js to your src folder, renaming it to html.js. Add your AdSense script tag to the head of that file. This replicates this plugin exactly.

@luba-media
Copy link

@davwheat I have installed the plugin, and then seen your comment.
What is the right way to remove it including the react dependency?

These are the current dependencies in my package.json:
"dependencies": { "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", "babel-plugin-styled-components": "^1.12.0", "disqus-react": "^1.0.8", "gatsby": "^2.32.0", "gatsby-image": "^2.11.0", "gatsby-plugin-catch-links": "^2.10.0", "gatsby-plugin-compile-es6-packages": "^2.1.0", "gatsby-plugin-google-adsense": "^1.1.3", "gatsby-plugin-google-analytics": "^2.7.0", "gatsby-plugin-manifest": "^2.12.0", "gatsby-plugin-mdx": "^1.10.0", "gatsby-plugin-offline": "^3.10.0", "gatsby-plugin-page-creator": "^2.10.0", "gatsby-plugin-react-helmet": "^3.6.0", "gatsby-plugin-sharp": "^2.14.0", "gatsby-plugin-styled-components": "^3.10.0", "gatsby-remark-autolink-headers": "^2.11.0", "gatsby-remark-copy-linked-files": "^2.10.0", "gatsby-remark-images": "^3.11.0", "gatsby-remark-prismjs": "^3.13.0", "gatsby-remark-responsive-iframe": "^2.11.0", "gatsby-remark-smartypants": "^2.10.0", "gatsby-source-filesystem": "^2.11.0", "gatsby-transformer-remark": "^2.16.0", "gatsby-transformer-sharp": "^2.12.0", "prismjs": "^1.23.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-helmet": "^6.1.0", "styled-components": "^5.2.0", "terser": "^4.6.11" }, "devDependencies": { "lighthousebot": "https://github.com/GoogleChromeLabs/lighthousebot", "prettier": "^2.2.1", "puppeteer": "^5.4.1", "semantic-release": "^17.2.2", "yaml": "^1.6.0" }, "peerDependencies": { "gatsby": "^2.20.0", "react": "^17.0.0", "react-dom": "^17.0.0" } }

@davwheat
Copy link
Author

@luba-media You just need to remove this plugin. Running yarn or npm i will updated your deps and fix the double React.

To be extra sure, use the Gatsby Webpack Bundle Analyzed plugin and build your site locally -- you should be able to see all your deps there and check there's no duplicate React.

By the way, if you want to cut down that bundle size more, check our the Gatsby Preact plugin. Preact is a smaller version of React and Preact can be an almost drop-in replacement unless you're doing VERY complex things with React.

@rake7h
Copy link

rake7h commented Jan 30, 2022

@isamrish moving react to the peer-dependancy should solve this problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants