Update ant design examples (vercel#7490)

* Update with-ant-design example to not
need require.extensions hack

* Update other ant-design examples to not
use require.extensions hack

Author: ijjk

examples/with-ant-design-less/next.config.js

@@ -9,14 +9,32 @@ const themeVariables = lessToJS(
   fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8')
 )
 
-// fix: prevents error when .less files are required by node
-if (typeof require !== 'undefined') {
-  require.extensions['.less'] = file => {}
-}
-
 module.exports = withLess({
   lessLoaderOptions: {
     javascriptEnabled: true,
     modifyVars: themeVariables, // make your antd custom effective
   },
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      const antStyles = /antd\/.*?\/style.*?/
+      const origExternals = [...config.externals]
+      config.externals = [
+        (context, request, callback) => {
+          if (request.match(antStyles)) return callback()
+          if (typeof origExternals[0] === 'function') {
+            origExternals[0](context, request, callback)
+          } else {
+            callback()
+          }
+        },
+        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
+      ]
+
+      config.module.rules.unshift({
+        test: antStyles,
+        use: 'null-loader',
+      })
+    }
+    return config
+  },
 })

examples/with-ant-design-less/package.json

@@ -13,6 +13,7 @@
     "less": "3.0.4",
     "less-vars-to-js": "1.3.0",
     "next": "latest",
+    "null-loader": "2.0.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },

examples/with-ant-design/next.config.js

@@ -1,9 +1,28 @@
 /* eslint-disable */
 const withCss = require('@zeit/next-css')
 
-// fix: prevents error when .css files are required by node
-if (typeof require !== 'undefined') {
-  require.extensions['.css'] = file => {}
-}
+module.exports = withCss({
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      const antStyles = /antd\/.*?\/style\/css.*?/
+      const origExternals = [...config.externals]
+      config.externals = [
+        (context, request, callback) => {
+          if (request.match(antStyles)) return callback()
+          if (typeof origExternals[0] === 'function') {
+            origExternals[0](context, request, callback)
+          } else {
+            callback()
+          }
+        },
+        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
+      ]
 
-module.exports = withCss()
+      config.module.rules.unshift({
+        test: antStyles,
+        use: 'null-loader',
+      })
+    }
+    return config
+  },
+})

examples/with-ant-design/package.json

@@ -11,6 +11,7 @@
     "antd": "^3.9.2",
     "babel-plugin-import": "^1.9.1",
     "next": "latest",
+    "null-loader": "2.0.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },

examples/with-ant-design/pages/_document.js

@@ -1,9 +1,27 @@
 const withCSS = require('@zeit/next-css')
 
-// fix: prevents error when .css files are required by node
-if (typeof require !== 'undefined') {
-  // eslint-disable-next-line
-  require.extensions['.css'] = file => {}
-}
+module.exports = withCSS({
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      const antStyles = /antd-mobile\/.*?\/style.*?/
+      const origExternals = [...config.externals]
+      config.externals = [
+        (context, request, callback) => {
+          if (request.match(antStyles)) return callback()
+          if (typeof origExternals[0] === 'function') {
+            origExternals[0](context, request, callback)
+          } else {
+            callback()
+          }
+        },
+        ...(typeof origExternals[0] === 'function' ? [] : origExternals)
+      ]
 
-module.exports = withCSS()
+      config.module.rules.unshift({
+        test: antStyles,
+        use: 'null-loader'
+      })
+    }
+    return config
+  }
+})

examples/with-antd-mobile/next.config.js

@@ -6,6 +6,7 @@
     "antd-mobile": "2.2.5",
     "babel-plugin-import": "^1.2.1",
     "next": "latest",
+    "null-loader": "2.0.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },