Module parse failed: 'import' and 'export' may appear only with 'sourceType: module'

[connordeckers]

Hey! Just found this package after looking for something more up-to-date than typescript-memoize and so far it looks great! However, I'm having some difficulty building it into my project.

When trying to import the Memoize method into my Typescript project, as outlined in the docs, I'm getting the warning below with Webpack:

ERROR in ./node_modules/.pnpm/@[email protected]/node_modules/@boost/decorators/esm/index.js 243:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (243:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|
> export { Bind, Debounce, Deprecate, Memoize, Throttle };
| //# sourceMappingURL=index.js.map
|
 @ ./application/index.ts 3:0-16

webpack 5.87.0 compiled with 1 error in 7774 ms

I noticed that when I changed the type key to module in the @boost/decorators package.json file, it imported successfully! However, I recognise that it isn't sustainable, and from what I can determine on the migrations to 4.0 page, is a deliberate decision.

Is there something I'm missing? I feel like there's an obvious oversight of mine here, but I'm not sure what to do to make it play nicely.

Details of my config and versions below.
Thanks!

---

Webpack config (trimmed for confidentiality/brevity):

import path, { sep } from "node:path";
import PathsPlugin from "tsconfig-paths-webpack-plugin";
import ForkTypescriptCheckPlugin from "fork-ts-checker-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { Configuration, Module } from "webpack";

const WebpackConfig: Configuration = {
	mode: "development",
	devtool: "eval-source-map",
	plugins: [new ForkTypescriptCheckPlugin()]
	entry: { [...] },
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "[name].[contenthash].js",
		clean: true,
		publicPath: public_path
	},
	module: {
		rules: [
			{
				test: /\.ts$/,
				use: [{ loader: "ts-loader", options: { transpileOnly: true } }],
				exclude: /[\\/]node_modules[\\/]/
			},
			{ test: /\.css$/i, type: "asset/source" },
			{ test: /\.(png|jpe?g|gif)$/i, type: "asset/resource" },
			{ test: /\.(html|svg)$/i, loader: "html-loader" },
			{ resourceQuery: /raw/, type: "asset/source" }
		]
	},
	resolve: {
		plugins: [new PathsPlugin({ configFile: "./tsconfig.json" })],
		extensions: [".ts", ".js"]
	},
	plugins: [
		new HtmlWebpackPlugin([...])
	],
	optimization: {
		splitChunks: {
			chunks: "all",
			cacheGroups: {
				vendor: {
					test: new RegExp(`${sep}node_modules${sep}`, "i"),
					name: (module: Module, chunks: any, cacheGroupKey: string) => { [...] },					},
					reuseExistingChunk: true,
					maxSize: 1 * 1000 * 1000 // 1mb
				},
				app: {
					test: new RegExp(`${sep}application${sep}(?!entry\.ts)`, "i"),
					name: (module: any) => { [...] },
					chunks: "all",
					maxSize: 500 * 1000 // 500kb
				}
			}
		}
	}
};

export default WebpackConfig;

My webpack and typescript versions are:

Webpack:
  System:
    OS: Linux 5.15 Arch Linux
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
    Memory: 4.51 GB / 7.76 GB
  Binaries:
    Node: 20.2.0 - ~/.local/share/pnpm/node
    Yarn: 1.22.19 - /usr/sbin/yarn
    npm: 9.6.6 - ~/.local/share/pnpm/npm
  Packages:
    compression-webpack-plugin: ^10.0.0 => 10.0.0 
    css-loader: ^6.8.1 => 6.8.1 
    file-loader: ^6.2.0 => 6.2.0 
    fork-ts-checker-webpack-plugin: ^8.0.0 => 8.0.0 
    html-loader: ^4.2.0 => 4.2.0 
    html-webpack-plugin: ^5.5.3 => 5.5.3 
    raw-loader: ^4.0.2 => 4.0.2 
    style-loader: ^3.3.3 => 3.3.3 
    ts-loader: ^9.4.3 => 9.4.3 
    tsconfig-paths-webpack-plugin: ^4.0.1 => 4.0.1 
    webpack: ^5.87.0 => 5.87.0 
    webpack-cli: ^5.1.4 => 5.1.4  

Typescript: Version 4.9.3

[milesj]

This is pretty odd since it looks to be hitting the correct exports entry point: https://github.com/milesj/boost/blob/master/packages/decorators/package.json#L57

But then still fails on syntax. So webpack is resolving as esm... but then failing on it not being esm???

What's your output format supposed to be? esm too?

[connordeckers]

Sorry for the delay! It should just be building to a standard IIFE-style bundle, for browser consumption. Based on the webpack docs, it looks like that for the default target of web, it's default output.chunkFormat is array-push.

Is it likely that this is because the rest of my codebase is typescript, and thus being parsed by ts-loader, whereas this module is not because it's already transpiled down to JS ESM? (I'm happy for this to be a my-side-of-things problem, but I didn't know where to start diving in).

[milesj]

@connordeckers It's been a while but maybe try setting this? https://webpack.js.org/configuration/resolve/#resolveconditionnames

I'm thinking that the browser esm is not compatible with an IIFE, so maybe force everything into commonjs?