Why can't I import * these Javascript Files?

Question

I'm trying to import these files inside the perimeters folder

1. basePerimeter.js
2. byePerimeter.js
3. secretPerimeter.js

my import code:

import * as perimeters from '../perimeters'

basePerimeter.js

import { Perimeter } from 'vue-kindergarten';

export default class BasePerimeter extends Perimeter {
  isAdmin() {
    return this.child && this.child.role === 'admin';
  }
}

byePerimeter.js

import basePerimeter from './basePerimeter';

export default new basePerimeter({
  purpose: 'bye',
  govern: {    
    'can route': () => true,
    'can viewParagraph': function () {
      return this.isAdmin();
    },
  },
});

secretPerimeter.js

import basePerimeter from './basePerimeter';

export default new basePerimeter({
  purpose: 'secret',
  govern: {
    'can route': function () {
      return this.isAdmin();
    },
  },
});

but if I import it individually, it works.

Like this:

import basePerimeter from '../perimeters/basePerimeter'

I need to import via * because of this code:

router.beforeEach((to, from, next) => {
  const perimeter = perimeters[`${to.name}Perimeter`];
  if (perimeter) {
    const sandbox = createSandbox(child(store), {
      perimeters: [
        perimeter,
      ],
    });
    if (!sandbox.isAllowed('route')) {
      return next('/');
    }
  }
  return next();
});

Why is it throwing this error:

ERROR in ./src/router/index.js
Module not found: Error: Can't resolve '../perimeters' in 'E:\my\vue\instance\src\router'
 @ ./src/router/index.js 13:0-44
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

Answer 1

I Don't know what's happening here but adding an index.js file and importing the files I needed solved my problem.

index.js

import byePerimeter from './byePerimeter'
import secretPerimeter from './secretPerimeter'

export {
    byePerimeter,
    secretPerimeter
}