Remove ansi-html dep (vercel#6394)

It's not needed since we use react-error-overlay for webpack errors.
raul782 · Feb 21, 2019 · d14d170 · d14d170
1 parent ce7dcae
commit d14d170
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 31 deletions.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -83,7 +83,7 @@ export default function getBaseWebpackConfig (dir: string, {dev = false, isServe
     target: isServer ? 'node' : 'web',
     externals: isServer && target !== 'serverless' ? [
       (context, request, callback) => {
-        const notExternalModules = ['next/app', 'next/document', 'next/link', 'next/router', 'next/error', 'http-status', 'string-hash', 'ansi-html', 'hoist-non-react-statics', 'htmlescape']
+        const notExternalModules = ['next/app', 'next/document', 'next/link', 'next/router', 'next/error', 'http-status', 'string-hash', 'hoist-non-react-statics', 'htmlescape']
 
         if (notExternalModules.indexOf(request) !== -1) {
           return callback()

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -49,7 +49,6 @@
     "@babel/runtime": "7.1.2",
     "@babel/runtime-corejs2": "7.1.2",
     "@babel/template": "7.1.2",
-    "ansi-html": "0.0.7",
     "arg": "3.0.0",
     "async-sema": "2.1.4",
     "autodll-webpack-plugin": "0.4.2",

diff --git a/packages/next/server/error-debug.js b/packages/next/server/error-debug.js
@@ -1,21 +1,14 @@
 import React from 'react'
-import ansiHTML from 'ansi-html'
 import Head from 'next-server/head'
 
-// This component is rendered through dev-error-overlay on the client side.
-// On the server side it's rendered directly
+// This component is only rendered on the server side.
 export default function ErrorDebug ({ error, info }) {
-  const { name, message } = error
   return (
     <div style={styles.errorDebug}>
       <Head>
         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
       </Head>
-      {
-        name === 'ModuleBuildError' && message
-          ? <pre style={styles.stack} dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
-          : <StackTrace error={error} info={info} />
-      }
+      <StackTrace error={error} info={info} />
     </div>
   )
 }
@@ -68,21 +61,3 @@ export const styles = {
     marginTop: '0px'
   }
 }
-
-const encodeHtml = str => {
-  return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-// see color definitions of babel-code-frame:
-// https://github.com/babel/babel/blob/master/packages/babel-code-frame/src/index.js
-
-ansiHTML.setColors({
-  reset: ['6F6767', '0e0d0d'],
-  darkgrey: '6F6767',
-  yellow: '6F6767',
-  green: 'ebe7e5',
-  magenta: 'ebe7e5',
-  blue: 'ebe7e5',
-  cyan: 'ebe7e5',
-  red: 'ff001f'
-})
diff --git a/test/integration/basic/test/client-navigation.js b/test/integration/basic/test/client-navigation.js
@@ -663,7 +663,7 @@ export default (context) => {
     })
 
     describe('runtime errors', () => {
-      it('should show ErrorDebug when a client side error is thrown inside a component', async () => {
+      it('should show react-error-overlay when a client side error is thrown inside a component', async () => {
         let browser
         try {
           browser = await webdriver(context.appPort, '/error-inside-browser-page')
@@ -678,7 +678,7 @@ export default (context) => {
         }
       })
 
-      it('should show ErrorDebug when a client side error is thrown outside a component', async () => {
+      it('should show react-error-overlay when a client side error is thrown outside a component', async () => {
         let browser
         try {
           browser = await webdriver(context.appPort, '/error-in-the-browser-global-scope')