webpack config for haml

Question

So I've just started using webpack for my projects. I am using webpack to try and compile my haml templates to jsx to react elements. To do this I am using the haml-jsx and babel-loader loaders.

so, the problem I'm having right now arises when webpack goes to load the .haml template. I keep getting this error "module parse failed: unexpected token. you may need an appropriate loader to handle this file type". idk what is preventing the haml-jsx loader from working right, but as I said I'm new to webpack so idk if it's my webpack config file or something outside of that. That's why I'm coming to you folks!

the following is my webpack config file:

const path = require('path');
module.exports = {
    entry:path.resolve(__dirname,"index.js"),
    module:{
        rules:[
            {
                test:/\.haml$/,
                use:[
                    {
                        loader:"babel-loader",
                        options:{
                            presets: ['@babel/preset-env'],
                            plugins: [require('@babel/plugin-syntax-jsx')]
                        }
                    },
                    {
                        loader:"haml-jsx-loader"
                    }
                ]   
            },
        ]
    },
    output: {
        filename:"bundle.js",
        path: path.resolve(__dirname,"/distro")
    },
};

also my directory structure looks like this

webpack
-sass(dir)
-distro(dir)
-haml(dir)
  -tamplate.haml
-node_modules
-webpack.config.js
-babel.config.js
-index.js
-package.json

any suggestions at all would help! thanks!

What version of webpack are you using? Also can you post entire stacktrace of the error? — Dipen Shah, Oct 05 '18 at 04:03
Can you replace `loader:"haml-jsx-loader"` with `loader:"haml-jsx"` and see if that works? — Dipen Shah, Oct 05 '18 at 04:24

score 0 · Answer 1 · answered Oct 06 '18 at 10:30

The issue does not have anything to do with haml itself. The loaders are fine, except of the fact, that one of them can not parse - and therefore load - the given file.

Having a look at your babel-loader config, the fact that you're using React is the key to your issue. @babel/plugin-syntax-jsx is not what you're looking for. You should be using @babel/plugin-transform-react-jsx.

To be honest, the documentation for all the babel plugins is pretty bad actually.

webpack config for haml

1 Answers1