Search code examples
webpackbabeljsjsxbabel-loader

Webpack jsx module loader fails when include given


I boiled my problem down to a minimum test. I have an App.js file which contains a bit of jsx and which is to be compiled to ./bundle.js:

// App.js
module.exports = () => <div/>

My webpack config seems quite standard with

module.exports = {
    entry: './App.js',
    output: {
        filename: './bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                //include: ['./includes'],  // <- Problem line
                query: {
                    plugins: [
                        ['transform-react-jsx']
                    ]
                }
            }
        ]
    }
}

This works and compiles correctly only if the line with include is removed. If I enable that line then I get the error

Module parse failed: ./App.js Unexpected token (1:23)
You may need an appropriate loader to handle this file type.
| module.exports = () => <div/>

I have no idea why it would fail when I specify an include for the loader, even include: [] fails with that same error.

Does anyone have an idea?


Solution

  • include is just like test.

    • include: [] means "include nothing"`
    • include: ["./include"] means "only include files in the include directory"

    so either if those will exclude ./App.js.