Closed yujiangshui closed 5 years ago
With v1.0.5 it should work now. You will have to transform module, here is an example:
// next.config.js
const withPlugins = require('next-compose-plugins');
const withTranspileModules = require('next-transpile-modules')
const withTypescript = require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
module.exports = withPlugins([
[withCSS, {
webpack(config) {
if (process.env.ANALYZE) {
config.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerPort: 8888,
openAnalyzer: true
}))
}
return config
},
cssModules: true,
}],
[withTranspileModules, {
transpileModules: ['react-github-btn']
}],
withTypescript
])
And here is a patch for your example repo:
diff --git a/next.config.js b/next.config.js
index 628da95..25a98bb 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,9 +1,11 @@
+const withPlugins = require('next-compose-plugins');
+const withTranspileModules = require('next-transpile-modules')
const withTypescript = require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
-module.exports = withTypescript(
- withCSS({
+module.exports = withPlugins([
+ [withCSS, {
webpack(config) {
if (process.env.ANALYZE) {
config.plugins.push(new BundleAnalyzerPlugin({
@@ -15,5 +17,9 @@ module.exports = withTypescript(
return config
},
cssModules: true,
- })
-)
+ }],
+ [withTranspileModules, {
+ transpileModules: ['react-github-btn']
+ }],
+ withTypescript
+])
diff --git a/package.json b/package.json
index 1faf333..b3a9b5e 100644
--- a/package.json
+++ b/package.json
@@ -22,11 +22,13 @@
"classnames": "^2.2.6",
"isomorphic-fetch": "^2.2.1",
"moment": "^2.22.2",
- "next": "^8.0.0",
+ "next": "^8.0.4",
+ "next-compose-plugins": "^2.1.1",
+ "next-transpile-modules": "^2.2.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-ga": "^2.5.3",
- "react-github-btn": "^1.0.4",
+ "react-github-btn": "^1.0.5",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 8b22408..17ea338 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -12,15 +12,6 @@ export const Home: React.FunctionComponent = (props) => (
</GitHubButton>
</li>
<li>
- <a
- class="github-button"
- href="https://github.com/ntkme/react-github-btn"
- data-size="large"
- data-show-count="true"
- aria-label="Star ntkme/react-github-btn on GitHub"
- >
- Star
- </a>
</li>
</ul>
</div>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 36b80c4..f1f91fd 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -18,8 +18,6 @@ export const Layout: React.FunctionComponent = (props) => (
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
-
- <script async defer src="https://buttons.github.io/buttons.js" />
</Head>
<Header />
<main>{props.children}</main>
Got it, thanks.
Sorry for the late reply.
You can also clone this project and start, you will see more details.
https://github.com/yujiangshui/next.js-typescript-github-btn-bug