Namespace Collision when file name and variable name match?

Question

I'm running into a bug that only happens intermittently.

Let's say I'm importing a function from a file boats.js

// boats.js
export function inspectBoat(boats) {
  console.log(boats);
  return true;
}

// ocean.js
import { inspectBoat } from './boats'

export default function ocean() {
  const boats = 'many boats';
  return inspectBoat(boats);
}

The Babel transpiled version of the last line reads

  return (0, _boats2.inspectBoat)(_boats);

On occasion, I'll hit a bug that reads (0, _boats2.inspectBoat) is not a function. The bug goes away when I refresh the page and it'll work perfectly fine.

Is the fact that I have both a boats file and boats variable contributing to this intermittent bug? Or is it an issue with the import statement?

I could try changing my const boats variable name, but due to the intermittent nature of this bug, I wouldn't know if it truly solves the issue. Hoping someone could share some relevant background knowledge on this.

Answer 1

The issue is with the function call in the ocean function. The imported function is named inspectBoat, but the function call is using inspectBoats, which is not defined. Changing the function call to use the correct function name should fix the issue:

// boats.js
export function inspectBoats(boats) {
  console.log(boats);
  return true;
}

// ocean.js
import { inspectBoats } from './boats'; // exported as "inspectBoats"

export default function ocean() {
  const boats = 'many boats';
  return inspectBoats(boats);
}