export default is not a function

[jhgeluk]

I'm submitting a bug report

Webpack Version: 5.91.0

Babel Core Version: 7.24.5

Babel Loader Version: 9.1.3

Please tell us about your environment: OSX 14.4.1

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: { default: [Function: center] }

And 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.

Expected/desired behavior: That the library gets imported and automatically uses the default export. Instead of trying to invoke the returned object.

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

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;