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