Converse headless unexpected token

[c0m1t]

Describe the bug I'm working on a react app. I have installed @converse/headless package from npm. But when i import the package and run my app it throws an error:

ERROR in ./node_modules/@converse/headless/dist/converse-headless.min.js 2:409134
    Module parse failed: Unexpected token (2:409134)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Environment (please complete the following information):

• "@converse/headless": "^8.0.1"

What am I missing? Any help would be appreciated.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[jcbrand]

Looks like you're missing a webpack loader. Probably for Babel, see here: https://github.com/conversejs/converse.js/blob/5dd00659368991b37446208b39e89a65fa8a48fd/webpack.common.js#L76

[c0m1t]

@jcbrand This is part of my webpack.config:

{
            // Transpile ES2015 (aka ES6) to ES5. Accept the JSX syntax by React
            // as well.

            exclude: [
                new RegExp(`${__dirname}/node_modules/(?!@jitsi/js-utils)`)
            ],
            loader: 'babel-loader',
            options: {
                // Avoid loading babel.config.js, since we only use it for React Native.
                configFile: false,

                // XXX The require.resolve bellow solves failures to locate the
                // presets when lib-jitsi-meet, for example, is npm linked in
                // jitsi-meet.
                plugins: [
                    require.resolve('@babel/plugin-transform-flow-strip-types'),
                    require.resolve('@babel/plugin-proposal-class-properties'),
                    require.resolve('@babel/plugin-proposal-export-default-from'),
                    require.resolve('@babel/plugin-proposal-export-namespace-from'),
                    require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
                    require.resolve('@babel/plugin-proposal-optional-chaining')
                ],
                presets: [
                    [
                        require.resolve('@babel/preset-env'),

                        // Tell babel to avoid compiling imports into CommonJS
                        // so that webpack may do tree shaking.
                        {
                            modules: false,

                            // Specify our target browsers so no transpiling is
                            // done unnecessarily. For browsers not specified
                            // here, the ES2015+ profile will be used.
                            targets: {
                                chrome: 58,
                                electron: 2,
                                firefox: 54,
                                safari: 11
                            }

                        }
                    ],
                    require.resolve('@babel/preset-flow'),
                    require.resolve('@babel/preset-react')
                ]
            },
            test: /\.jsx?$/
        }

[jcbrand]

Well, it's either that or some other loader that's missing.

[c0m1t]

@jcbrand But as far as I see there is no other loader for a js file in the webpack config that @converse/headless uses. And unfortunately headless-example is outdated. It uses v4.

[jcbrand]

The headless-example is so old, I even forgot that I ever made it.

Best to look at the webpack config in the main repo:

https://github.com/conversejs/converse.js/blob/master/webpack.common.js https://github.com/conversejs/converse.js/blob/master/webpack.headless.js

[c0m1t]

I have imported the package from npm and I haven't built it myself. Aren't minified files supposed to be built and not need any loader to read from?

[jcbrand]

Yeah, they should be. I don't know what the issue is. You can try loading the unminified build and then get a line number which can point to the actual code/token that it's struggling to load.