bug#46713: 27.1; Variable binding depth exceeds max-specpdl-size in js-mode with js-indent-level 2 and indent-tabs-mode nil on new line

[Ryan Olson]

Hi Lars,

I do. I'm not sure why it takes this, but for my specific js file
(with a few things replaced -- because it's company code) it has
issues.

Repro steps:
1. Open foo.js with emacs -Q --eval '(setq-default js-indent-level 2
indent-tabs-mode nil)' foo.js
2. Go to line 61
3. Delete brace at end of that line
4. Save
5. Add brace back
6. Press RET
7. Errors happen

foo.js:
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router';
import { Link } from 'react-router-dom';
import { Grid } from '@rmwc/grid';

import {
  getFoos,
  selectFoos,
  selectIsLoadingFoos,
  selectTotalTimesFoosFetched,
} from 'store/slices/foos.slice';
import { clearFoo } from 'store/slices/foo.slice';
import {
  filterDefinitions,
  getUniqueFooKey,
  searchProperties,
  getFeaturesForFoo,
} from './foosHelpers';
import { useFilters } from 'components/Filtering/useFilters';
import Fab from 'components/Fab';
import SortableDataTable from 'components/SortableDataTable';
import FilterBar from 'components/Filtering/FilterBar';
import useUpdateEffect from 'hooks/useUpdateEffect';

export default function FoosList() {
  const dispatch = useDispatch();
  const history = useHistory();
  const isLoading = useSelector(selectIsLoadingFoos);
  const foos = useSelector(selectFoos);
  const totalTimesFoosFetched = useSelector(
    selectTotalTimesFoosFetched
  );
  const filterBag = useFilters(
    'foos',
    foos,
    filterDefinitions,
    searchProperties
  );
  const { getFilterByKey, clearFilter } = filterBag;

  const canAddFoo = useSelector(state => state.permissions.canAddFoo);

  function requestFoos() {
    dispatch(getFoos({ dispatch }));
  }

  // Get foos from the server (if needed).
  // It attempts to skip reloading the foos, when it can.
  useEffect(() => {
    const isFirstLoad = totalTimesFoosFetched === 0;
    // Since we're only checking this on mount, I think
    // it's safe to say that if we don't have foos and it's
    // not our first load (while mounting), then this would be a
    // place where we've invalidated foos by clearing them out.
    // (to force a load)
    const foosInvalidated = !isFirstLoad && foos.length === 0;

    const shouldFetch = isFirstLoad || foosInvalidated;

    if (shouldFetch) {
      requestFoos();
    }
  }, []);

  // When show foos filter changes,
  // get foos from the server.
  useUpdateEffect(() => {
    requestFoos();
  }, []);

  // Clear foo data from redux.
  useEffect(() => {
    // Clear foo itself.
    dispatch(clearFoo());
  }, []);

  // If we initially load foos and none come back that follow
  // our initial filter (only show centralized foos == true)
  // Remove that filter and fetch foos again.
  useEffect(() => {
    if (totalTimesFoosFetched === 1 && foos.length === 0) {
      // NOTE: this triggers a different effect to get foos that
      // match this filter.
      clearFilter();
    }
  }, [foos, totalTimesFoosFetched]);

  function getFooLink(foo) {
    if (hasValue(foo.fooCode)) {
      return `/foos/foo/fooCode/${foo.fooCode}`;
    }

    if (foo(foo)) {
      return `/foos/foo//${foo.id}`;
    }

    // Shouldn't get here. If all else fails, it shouldn't route anywhere.
    return '#';
  }

  return (
    <Grid>
      <FilterBar filterBag={filterBag}>
        < />
      </FilterBar>
      <SortableDataTable
        data={filterBag.filteredData}
        isLoading={isLoading}
        noRowsMessage="No foos to display."
        schema={{
          getRowKey: getUniqueFooKey,
          columns: [
            {
              headerName: 'Foo Name',
              getColumnValue: foo => (
                <Link
                  to={getFooLink(foo)}
                  className={sharedCss.colorPrimary}
                >
                  {foo.fooName}
                </Link>
              ),
              getSortValue: foo => foo.fooName,
            },
            {
              headerName: 'Foo Code',
              getColumnValue: foo => foo.fooCode,
              className: globalCss.width100,
            },
            {
              headerName: 'Site ID',
              // If there's no site id, it comes down as 0.
              getColumnValue: foo => foo.siteId || null,
              className: globalCss.width100,
            },
            {
              headerName: 'Master Foo ID',
              getColumnValue: foo => foo.id,
              className: globalCss.width100,
            },
          ].filter(Boolean),
        }}
      />
      {canAddFoo && (
        <Fab icon="add" onClick={() => history.push('/foos/new')} />
      )}
    </Grid>
  );
}

On Mon, Feb 22, 2021 at 3:36 PM Lars Ingebrigtsen <larsi@gnus.org> wrote:
>
> Ryan Olson <ryan.olson.x@gmail.com> writes:
>
> > (error "Variable binding depth exceeds max-specpdl-size")
> > back-to-indentation: internal--syntax-propertize did not move
> > syntax-propertize--doneError during redisplay:
> > (internal--syntax-propertize 2645) signaled (error "Variable binding
> > depth exceeds max-specpdl-size")
>
> Do you have a recipe to reproduce this error, starting from "emacs -Q"?
>
> --
> (domestic pets only, the antidote for overdose, milk.)
>    bloggy blog: http://lars.ingebrigtsen.no