Fix: Bundle Monaco-editor package

.vscode/settings.json

@@ -4,25 +4,22 @@
     "**/all.min.js": true
   },
   "files.exclude": {
-    "**/node_modules": true,
+    "**/node_modules": false,
     "**/.github": false
   },
   "files.trimTrailingWhitespace": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
   "eslint.format.enable": true,
-  "editor.formatOnSave": true,
-  "editor.formatOnPaste": true,
+  "editor.formatOnSave": false,
+  "editor.formatOnPaste": false,
   "typescript.updateImportsOnFileMove.enabled": "always",
-  "eslint.validate": [
-    "typescript",
-    "typescriptreact"
-  ],
+  "eslint.validate": ["typescript", "typescriptreact"],
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
     "*.ts": "$(capture).js, $(capture).d.ts, $(capture).spec.ts",
     "*.tsx": "$(capture).ts, $(capture).d.ts, $(capture).spec.tsx, $(capture).styles.ts",
     "package.json": "package-lock.json, .npmrc"
-  }
-}
+  },
+}

config/webpack.config.js

@@ -1,5 +1,3 @@
-
-
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
@@ -17,6 +15,7 @@ const paths = require('./paths');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
@@ -43,11 +42,11 @@ const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 
-const hasJsxRuntime = (() => {
+const hasJsxRuntime = () => {
   if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
     return false;
   }
-})
+};
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
@@ -156,7 +155,7 @@ module.exports = function (webpackEnv) {
     ].filter(Boolean),
     output: {
       // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
+      path: isEnvProduction ? paths.appBuild : path.resolve(__dirname, 'dist'),
       // Add /* filename */ comments to generated require()s in the output.
       pathinfo: isEnvDevelopment,
       // There will be one main bundle, and one file per asynchronous chunk.
@@ -389,21 +388,22 @@ module.exports = function (webpackEnv) {
                 'sass-loader'
               )
             },
+            {
+              test: /\.ttf$/,
+              type: 'asset/resource'
+            },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.
             // This loader doesn't use a "test" so it will catch all modules
             // that fall through the other loaders.
             {
-              loader: require.resolve('file-loader'),
               // Exclude `js` files to keep "css" loader working as it injects
               // its runtime that would otherwise be processed through "file" loader.
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
-              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              options: {
-                name: 'static/media/[name].[contenthash:8].[ext]'
-              }
+              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /data:image\/svg\+xml;/],
+              type: 'asset/resource'
             }
             // ** STOP ** Are you adding a new loader?
             // Make sure to add the new loader(s) before the "file" loader.
@@ -415,6 +415,19 @@ module.exports = function (webpackEnv) {
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1
       }),
+      new MonacoWebpackPlugin({
+        languages: [
+          'json',
+          'typescript',
+          'javascript',
+          'css',
+          'java',
+          'csharp',
+          'html',
+          'powershell',
+          'go'
+        ]
+      }),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(

jest.config.js

@@ -16,21 +16,21 @@ module.exports = {
     '**/__tests__/**/*.[jt]s?(x)',
     '**/?(*.)+(spec|test).[jt]s?(x)'
   ],
-  globals: {
-    crypto: require('crypto'),
-    'ts-jest': {
-      isolatedModules: true
-    }
-  },
   testEnvironmentOptions: {
     url: 'http://localhost'
   },
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
+    '^.+\\.(js|jsx|ts|tsx)$': ['ts-jest', {
+      isolatedModules: true
+    }],
     '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': 'ts-jest',
-    [`(${esModules}).+\\.js$`]: 'ts-jest'
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': ['ts-jest', {
+      isolatedModules: true
+    }],
+    [`(${esModules}).+\\.js$`]: ['ts-jest', {
+      isolatedModules: true
+    }]
   },
   transformIgnorePatterns: [
     '^.+\\.module\\.(css|sass|scss)$',

package.json

@@ -40,7 +40,8 @@
                 "isomorphic-fetch": "3.0.0",
                 "localforage": "1.10.0",
                 "mini-css-extract-plugin": "2.7.6",
-                "monaco-editor": "0.38.0",
+                "monaco-editor": "0.30.1",
+                "monaco-editor-webpack-plugin": "6.0.0",
                 "office-ui-fabric-core": "11.1.0",
                 "postcss-flexbugs-fixes": "5.0.2",
                 "postcss-loader": "7.3.2",

src/app/views/common/monaco/Monaco.tsx

@@ -1,5 +1,6 @@
 import { FocusZone } from '@fluentui/react';
-import Editor, { OnChange, useMonaco } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import Editor, { OnChange, loader } from '@monaco-editor/react';
 import { useEffect } from 'react';
 
 import { ThemeContext } from '../../../../themes/theme-context';
@@ -17,7 +18,6 @@ interface IMonaco {
 }
 
 export function Monaco(props: IMonaco) {
-
   let { body } = props;
   const { onChange, language, readOnly, height } = props;
 
@@ -26,7 +26,8 @@ export function Monaco(props: IMonaco) {
   }
   const itemHeight = height ? height : '300px';
 
-  const monaco = useMonaco();
+  loader.config({ monaco });
+
   useEffect(() => {
     if (monaco) {
       monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
@@ -43,7 +44,7 @@ export function Monaco(props: IMonaco) {
     <FocusZone disabled={props.extraInfoElement ? false : true}>
       <div className='monaco-editor'>
         {props.extraInfoElement}
-        <ThemeContext.Consumer >
+        <ThemeContext.Consumer>
           {(theme) => (<Editor
             width='800 !important'
             height={itemHeight}
@@ -62,7 +63,7 @@ export function Monaco(props: IMonaco) {
               renderLineHighlight: 'none',
               scrollBeyondLastLine: true,
               overviewRulerBorder: false,
-              wordSeparators:'"'
+              wordSeparators: '"'
             }}
             onChange={onChange}
             theme={theme === 'light' ? 'vs' : 'vs-dark'}