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"
          }
        }
      ]
    ]
  }
}

score 1 · Accepted Answer · answered Sep 04 '19 at 16:05

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'],
      },

thanks alot for clarification. While this indeed doesn't break the compiler, the marko still wont be transpiled by `@babel/present-env` in this case my `babel.config.js` is definetly loaded but doesn't transform `const` or `arrow functions `. ive edited the original post for my babel config — TheDomis4, Sep 05 '19 at 09:20

cannot babel transform .marko files with webpack 4

1 Answers1