import React from 'react';
import Route from 'react-router-dom/Route';
import { connectFor } from '@folio/stripes-connect';
import { modules } from 'stripes-loader'; // eslint-disable-line
import AddContext from './AddContext';

if (!Array.isArray(modules.app) && modules.length < 0) {
  throw new Error('At least one module of type "app" must be enabled.');
}

function getModuleRoutes(stripes) {
  return modules.app.map((module) => {
    const name = module.module.replace(/^@folio\//, '');
    const perm = `module.${name}.enabled`;
    if (!stripes.hasPerm(perm)) return null;

    const connect = connectFor(module.module, stripes.epics, stripes.logger);
    const Current = connect(module.getModule());
    const moduleStripes = stripes.clone({ connect });

    return (
      <Route
        path={module.route}
        key={module.route}
        render={props => (
          <AddContext context={{ stripes: moduleStripes }}>
            <div id={`${name}-module-display`} data-module={module.module} data-version={module.version} >
              <Current {...props} connect={connect} stripes={moduleStripes} />
            </div>
          </AddContext>
        )}
      />
    );
  }).filter(x => x);
}

export default getModuleRoutes;

import React from 'react';
import Route from 'react-router-dom/Route';
import { connectFor } from '@folio/stripes-connect';
import { modules } from 'stripes-loader'; // eslint-disable-line
import AddContext from './AddContext';

if (!Array.isArray(modules.app) && modules.length < 0) {
  throw new Error('At least one module of type "app" must be enabled.');
}

function getModuleRoutes(stripes) {
  return modules.app.map((module) => {
    const name = module.module.replace(/^@folio\//, '');
    const perm = `module.${name}.enabled`;
    if (!stripes.hasPerm(perm)) return null;

    const connect = connectFor(module.module, stripes.epics, stripes.logger);
    const Current = connect(module.getModule());
    const moduleStripes = stripes.clone({ connect });

    return (
      <Route
        path={module.route}
        key={module.route}
        render={props => (
          <AddContext context={{ stripes: moduleStripes }}>
            <span id={`${name}-module-display`} data-module={module.module} data-version={module.version} >
              <Current {...props} connect={connect} stripes={moduleStripes} />
            </span>
          </AddContext>
        )}
      />
    );
  }).filter(x => x);
}

export default getModuleRoutes;

--- 
+++ 
@@ -24,9 +24,9 @@
         key={module.route}
         render={props => (
           <AddContext context={{ stripes: moduleStripes }}>
-            <span id={`${name}-module-display`} data-module={module.module} data-version={module.version} >
+            <div id={`${name}-module-display`} data-module={module.module} data-version={module.version} >
               <Current {...props} connect={connect} stripes={moduleStripes} />
-            </span>
+            </div>
           </AddContext>
         )}
       />
Use <div> instead of <span> when dynamically generating module routes and containers

The `getModuleRoutes` method appears to generate a routing entry for all loaded stripes modules.  It then maps those routes to a container node that sort of functions as a namespace for the different UI modules installed in the Folio instance.
We were using spans here, but it's probably better to use divs to avoid nesting block-level elements inside inline elements.  This isn't blocking anything that we know of, but we stumbled across it while doing some layout work and figured it was worthy of a quick patch.
