cannot babel transform .marko files with webpack 4

Question

i have a working marko setup for my widget. Im using webpack 4 and babel 7. When i add babel-loader to .marko files, the webpack compiler throws because it couldn't recognize marko's syntax as valid javascript. However the loader should work after the marko transpilation.

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Volumes/Workspace/product-curator-widget/src/index.marko: A class name is required (1:6)

> 1 | class {
    |       ^
  2 |   onCreate () {

index.marko

class {
  onCreate () {
    this.state = {
      items: [ {label: 'foo'}, {label: 'bar'} ] 
    }
    const pr = new Promise((resolve) => resolve()) //trying to transpile this arrow function
  }
}


<paper>
  <chip for (item in state.items) label="${item.label}" value="${item.value}" />
</paper>

webpack.config.js

'use strict'
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = () => ({
  mode: 'development',
  devtool: 'cheap-source-map',
  entry: [
    'core-js',
    './src/index.js'
  ],
  resolve: {
    extensions: ['.js', '.marko'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/, /\.test\.js$/],
        use: ['babel-loader'],
      },
      {
        test: /\.marko$/,
        exclude: [/node_modules/, /\.test\.js$/],
        use: ['@marko/webpack/loader', 'babel-loader'],
      },
      {
        test: /\.scss$/,
        exclude: [/node_modules/],
        use: ['style-loader', 'css-loader', 'sass-loader'],
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
})

babel.config.js

module.exports = function (api) {
  api.cache(true)

  return {
    "plugins": [
      "@babel/plugin-proposal-object-rest-spread",
      "@babel/plugin-transform-async-to-generator",
      "@babel/plugin-transform-regenerator",
    ],
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "ie": "10"
          }
        }
      ]
    ]
  }
}

Answer 1

Loaders in webpack are evaluated from right to left . In this case, you'll want @marko/webpack/loader to be the first loader to run (put it last in the array), so by the time babel-loader is called, the .marko file has been compiled to JS.

Side note: if you're using Marko components that have been published to npm, you don't want to ignore node_modules . Marko recommends publishing the source .marko files because the compiler produces different output for the server vs the browser. Additionally, the compilation output can be different depending on the version of Marko your app is using.

      {
        test: /\.marko$/,
        use: ['babel-loader', '@marko/webpack/loader'],
      },