export default is not a function

[jhgeluk]

Bug report

What is the current behavior?
I have a legacy project written in CommonJS, so I had to bundle and transpile this project in combination with Babel. Almost everything works fine, except a few import statements from the package '@Turf'.

My project consists of .js (CommonJS) files and .mjs files (ECMAscript 6). This interoperability works good for the most part, but when I import import center from '@turf/center'; in one of my .mjs files, I get this error:
center_ is not a function

When I look at the bundled code I see this:

// EXTERNAL MODULE: external "@turf/center"
var center_ = __webpack_require__("@turf/center");

But when I console.log the center_ variable, I see that it exports a default function. But in the code it's trying to access this function like so:
center_(boundingBoxPolygon);

Which does not work, and raises the "center_ is not a function" error.

If the current behavior is a bug, please provide the steps to reproduce.

1. Create a project with CommonJS files
2. Add .mjs (ECMAscript) files to that project
3. import an ECMAscript library into an .mjs file
4. Bundle and transpile the code with babel
5. Run the bundle

What is the expected behavior?
That the library gets imported and automatically uses the default export. Instead of trying to invoke the returned object.

Other relevant information:
webpack version: ^5.74.0
Node.js version: v20.11.1
Operating System: macOS
Additional tools: None

Webpack config file

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
	target: 'node',
	externals: [nodeExternals()],
	devtool: 'source-map',
	entry: {
		'server': './src/server/index.js',
		'server.prod': './server.prod.js',
	},
	output: {
		path: path.resolve(process.cwd(), 'dist', 'server'), // Output directory
		filename: '[name].js',
		libraryTarget: 'commonjs2',
	},
	optimization: {
		moduleIds: 'named',
		minimize: false,
	},
	module: {
		rules: [
			{
				test: /\.(mjs|js)$/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: [['@babel/preset-env'], ['@babel/preset-react']],
						plugins: [['@babel/transform-runtime']],
					},
				},
				exclude: /node_modules/,
			},
		],
	},
	resolve: {
		extensions: ['.mjs', '.js', '...'],
	},
};

@turf/center/index.d.ts

`import { BBox, Id, AllGeoJSON, Feature, Point, Properties } from "@turf/helpers";
/**
 * Takes a {@link Feature} or {@link FeatureCollection} and returns the absolute center point of all features.
 *
 * @name center
 * @param {GeoJSON} geojson GeoJSON to be centered
 * @param {Object} [options={}] Optional parameters
 * @param {Object} [options.properties={}] Translate GeoJSON Properties to Point
 * @param {Object} [options.bbox={}] Translate GeoJSON BBox to Point
 * @param {Object} [options.id={}] Translate GeoJSON Id to Point
 * @returns {Feature<Point>} a Point feature at the absolute center point of all input features
 * @example
 * var features = turf.points([
 *   [-97.522259, 35.4691],
 *   [-97.502754, 35.463455],
 *   [-97.508269, 35.463245]
 * ]);
 *
 * var center = turf.center(features);
 *
 * //addToMap
 * var addToMap = [features, center]
 * center.properties['marker-size'] = 'large';
 * center.properties['marker-color'] = '#000';
 */
declare function center<P = Properties>(geojson: AllGeoJSON, options?: {
    properties?: P;
    bbox?: BBox;
    id?: Id;
}): Feature<Point, P>;
export default center;

[jhgeluk]

Related to:

• Bug in Webpack 3 and 4: can't require a module with a ESM entry point #6584
• Broken cjs & esm interop #7973

[alexander-akait]

Please use this option to solve your problem - https://github.com/liady/webpack-node-externals?tab=readme-ov-file#optionsimporttype-commonjs, and use the right type for @turf/center, I can provide more help if you provide reproducible test repo