The problem with webpack and babel

[nullablemind]

I take an example from the documentation. I connect dependencies.

import React from 'react';
import { useToggleLayer, anchor } from 'react-laag';
import { translate } from 'react-i18next';
import './style.css';

const CWMainNone = () => {
  const [element, toggleLayerProps] = useToggleLayer(
    // render the layer
    ({ layerProps, isOpen }) => isOpen && <div {...layerProps} />,
    // provide some options, like placement
    { placement: { anchor: anchor.BOTTOM_CENTER } }
  );

  return (
    <div>
      {element}
      <div onClick={toggleLayerProps.openFromMouseEvent}>Click me!</div>
    </div>
  );
};

export default translate()(CWMainNone);

Running webpack and getting an error

ERROR in ./node_modules/react-laag/dist/index.es.js
Module parse failed: Unexpected token (497:11)
You may need an appropriate loader to handle this file type.
|   } = splitAnchor(anchor);
|   const primaryDirection = getPrimaryDirection(anchor);
|   return { ...getPrimaryStyle(primary, rects, scroll, triggerOffset),
|     ...getSecondaryStyle(secondary, rects, scroll, offsetSecondary, primaryDirection)
|   };

Fixed with option in webpack include: [/src/, /node_modules\/react-laag/]. With plugin for babel '@babel/plugin-proposal-object-rest-spread'. Before be exclude: /node_modules/.

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader'
        },
        include: [/src/, /node_modules\/react-laag/]
      },
      {
        test: /\.css$/,

Perhaps it is worth collecting bundle with the correct destructuring, rest, spread.

[everweij]

Hi @antonazgarovich , I'm so sorry for my late response! Yes, that's a nice work-around you've got there :) I've noticed other people running into this kind of problem as well. Fortutately, I've released v2.0.0 today, which contains proper es5 build-output, so there should be no extra config needed in webpack from now on. Let me now if this solves your issue.

[everweij]

I'm closing this issue for now. Feel free the re-open or refer to this issue if you run into similar problems.