Some errors in Next.js + TypeScript project

[yujiangshui]

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

[ntkme]

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
])

[ntkme]

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>

[yujiangshui]

Got it, thanks.