Including the ./package.json in my webpack.config.ts was straightforward, but to make it work, I had to utilize the
"resolveJsonModule" : trueEverything worked perfectly when I placed the tsconfig.json file at the same level as webpack.config.ts.
--
|
- tsconfig.json
- package.json
- webpack.json
The npm script looked like this:
"webpack": "webpack -c webpack.config.ts --stats=errors-warnings"However, things took a bad turn when I decided to rename tsconfig.json or add another file named tsconfig.dev.json. This caused the webpack build to fail:
> webpack -c webpack.config.ts --stats=errors-warnings
[webpack-cli] Failed to load '/path/to/frontend-shared/webpack.config.ts' config
[webpack-cli] webpack.config.ts:5:25 - error TS2732: Cannot find module './package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.
5 import packageJson from './package.json';
I attempted to guide webpack on how to locate this configuration file:
loader: 'ts-loader',
options: {
configFile: './tsconfig.dev.json'
}
The complete webpack configuration looks like this:
const config: webpack.Configuration = {
context: path.resolve(__dirname),
mode: 'production',
entry: {
sdpFrontend: {
import: path.join(__dirname, 'index.tsx',),
dependOn: ["framework"]
},
framework: ['react']
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
configFile: './tsconfig.dev.json'
}
}
]
// ,
// options: {
// configFile: "tsconfig.dev.json"
// }
}
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
modules: [path.resolve(__dirname, 'src'), 'node_modules']
},
output: {
path: path.resolve(__dirname, "js"),
filename: "[name]-[contenthash].js",
clean: true
},
optimization: {
// splitChunks: {
// chunks: 'all'
// },
// https://webpack.js.org/configuration/optimization/#optimizationruntimechunk
runtimeChunk: 'single',
minimize: false
},
plugins: [
new HtmlWebpackPlugin({
// https://github.com/jantimon/html-webpack-plugin#options
inject: false,
template: "./index.tmpl.html",
filename: "../index.html",
appVersion: packageJson.version
}),
]
};
What could be going wrong here? Could it be that ts-loader is simply ignoring this option?
Just for clarification, here are some versions being used:
"devDependencies": {
"@types/webpack": "^5.28.0",
"html-webpack-plugin": "^5.5.0",
"npm-run-all": "^4.1.5",
"ts-loader": "^9.2.6",
"ts-node": "^10.4.0",
"typescript": "^4.5.4",
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2"
}