Webpack + babel-loader is not compiling the react-monaco-editor project

I’m receiving this error from babel-loader:

ERROR in ./node_modules/react-monaco-editor/src/editor.js 55:12
Module parse failed: Unexpected token (55:12)
You may need an appropriate loader to handle this file type.
|   }
| 
>   assignRef = component => {
|     this.containerElement = component;
|   };
 @ ./node_modules/react-monaco-editor/src/index.js 1:0-36 4:0-53
 @ ./app/containers/Editor/index.js
 @ ./app/containers/Wrapper/index.js
 @ ./app/containers/HomePage/index.js
 @ ./app/containers/HomePage/Loadable.js
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js

ERROR in ./node_modules/react-monaco-editor/src/diff.js 63:12
Module parse failed: Unexpected token (63:12)
You may need an appropriate loader to handle this file type.
|   }
| 
>   assignRef = component => {
|     this.containerElement = component;
|   };
 @ ./node_modules/react-monaco-editor/src/index.js 2:0-38 4:0-53
 @ ./app/containers/Editor/index.js
 @ ./app/containers/Wrapper/index.js
 @ ./app/containers/HomePage/index.js
 @ ./app/containers/HomePage/Loadable.js
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js

Here is my webpack.base.babel.js(folder ./internals/webpack):

/**
 * COMMON WEBPACK CONFIGURATION
 */


const path = require('path')
const webpack = require('webpack')
const childProcess = require('child_process')
const packageJson = require('../../package.json')

const commitHash = childProcess
  .execSync('git rev-parse --short HEAD')``
  .toString()
const gitBranch = childProcess
  .execSync('git rev-parse --abbrev-ref HEAD')
  .toString()

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

const BUILD_FOLDER_PATH = process.env.BUILD_FOLDER_PATH || 'build'
const PUBLIC_PATH = process.env.PUBLIC_PATH || '/'



const MonacoEditorSrc = path.join(__dirname, '../../node_modules/react-monaco-editor/src')

const APP_DIR = path.resolve(__dirname, '../../app');
const MONACO_DIR = path.resolve(__dirname, '../../node_modules/monaco-editor');

module.exports = options => ({
  mode: options.mode,
  entry: options.entry,
  output: Object.assign(
    {
      // Compile into js/build.js
      path: path.resolve(process.cwd(), BUILD_FOLDER_PATH),
      publicPath: PUBLIC_PATH,
    },
    options.output,
  ), // Merge with env dependent settings
  optimization: options.optimization,
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // Transform all .js and .jsx files required somewhere with Babel
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: options.babelQuery,
        },
      },
      {
        // Preprocess our own .css files
        // This is the place to add your own loaders (e.g. sass/less etc.)
        // for a list of loaders, see https://webpack.js.org/loaders/#styling
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        // Preprocess 3rd party .css files located in node_modules
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.css$/,
        include: MONACO_DIR,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(eot|otf|ttf|woff|woff2)$/,
        use: 'file-loader',
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
              noquotes: true,
            },
          },
        ],
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                enabled: false,
                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
                // Try enabling it in your environment by switching the config to:
                // enabled: true,
                // progressive: true,
              },
              gifsicle: {
                interlaced: false,
              },
              optipng: {
                optimizationLevel: 7,
              },
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use: 'html-loader',
      },
      {
        test: /\.(mp4|webm)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
          },
        },
      },
    ],
  },
  plugins: options.plugins.concat([
    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; Terser will automatically
    // drop any unreachable code.
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
      PUBLIC_PATH: '/',
    }),
    new webpack.DefinePlugin({
      APP_VERSION: JSON.stringify(packageJson.version),
      COMMIT_HASH: JSON.stringify(commitHash),
      BRANCH: JSON.stringify(gitBranch),
    }),
    new MonacoWebpackPlugin({
      languages: ['javascript', 'php']
    }),
  ]),
  resolve: {
    modules: ['node_modules', 'app'],
    extensions: ['.js', '.jsx', '.react.js', '.json'],
    mainFields: ['browser', 'jsnext:main', 'main'],
    alias: { 'react-monaco-editor': MonacoEditorSrc }
  },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
})

Any thoughts on that?

[spchuang]

Since babel-loader in this webpack config excludes node_modules, the fix is to include react-monaco-editor to pass through babel-loader. See

{
      test: /\.(js|jsx)?$/, // Transform all .js and .jsx files required somewhere with Babel
      // react-monaco-editor uses arrow function, need to parse
      exclude: /node_modules(?!\/react-monaco-editor)/, 
      use: {
          loader: 'babel-loader',
          options: options.babelQuery,
      },
}

[dacharjaya]

I am still getting this `Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /node_modules/react-monaco-editor/src/editor.js: Support for the experimental syntax ‘classProperties’ isn’t currently enabled (55:13):

53 | } 54 |

55 | assignRef = (component) => { | ^ 56 | this.containerElement = component; 57 | }; 58 |

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the ‘plugins’ section of your Babel config to enable transformation.`

Package.json

"babel": {
    "plugins": [
      "styled-components",
      "@babel/plugin-syntax-dynamic-import",
      "@babel/plugin-proposal-class-properties"
    ],
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],