Extruded shape with hole missing inside mesh

I created a shape with a hole like this:

const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(0, 5);
shape.lineTo(5, 5);
shape.lineTo(5, 0);
shape.lineTo(0, 0);

const hole = new THREE.Path();
hole.moveTo(0.5, 0.5);
hole.lineTo(0.5, 4.5);
hole.lineTo(4.5, 4.5);
hole.lineTo(4.5, 0.5);
hole.lineTo(0.5, 0.5);

shape.holes = [hole];

const extrudeSettings = {
	depth: 10,
};

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial());

And it works fine but the entire hole makes the backside of the 3D object transparent, the back wall is not present inside the hole like this:

I think my mesh may be missing “backside” setting or something similar (ability to see polygons of mesh from the inside too).

Can this be fixed somehow?

I solved it by adding side: THREE.DoubleSide to the material.

But I have another question: is there a way to do the above shape more easily (without holes)? Like with a line that has thickness?

Live example with your solution: Edit fiddle - JSFiddle - Code Playground

You consider to author the geometry offline with Blender and then load it via THREE.GLTFLoader. But there is no other geometry generator that produces the same result in an “easier” way.

Thank you very much!

You can use this method for a non-hollow rod:

Construction of frames with contour/profile