Cannot find module package.json
Explanation of the problem
When attempting to use a custom webpack TypeScript configuration with the define plugin, the user encountered an error indicating that the package.json file could not be imported. Despite trying to add the file to every webpack configuration, the error persisted. Specifically, the error message reads as follows:
“webpack.config.ts:7:22 – error TS2732: Cannot find module ‘./package.json’. Consider using ‘–resolveJsonModule’ to import module with ‘.json’ extension”
The user provided a minimal reproduction that includes creating a start, including the “@angular-builders/custom-webpack:browser” package, creating a webpack.config.ts file, and adding package.json as a module. The user then attempted to run “npm run build,” but encountered the aforementioned error.
Troubleshooting with the Lightrun Developer Observability Platform
Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.
- Instantly add logs to, set metrics in, and take snapshots of live applications
- Insights delivered straight to your IDE or CLI
- Works where you do: dev, QA, staging, CI/CD, and production
Start for free today
Problem solution for: Cannot find module package.json
The error message suggests using the “–resolveJsonModule” flag to import the module with the “.json” extension. The flag can be added to the tsconfig.json file as follows:
{
"compilerOptions": {
"resolveJsonModule": true
}
}
Another potential solution is to modify the webpack configuration to include the resolveJsonModule property:
module.exports = {
//...
resolve: {
extensions: ['.ts', '.js', '.json'],
modules: ['node_modules'],
//...
resolveJsonModule: true,
},
//...
}
Additionally, some users have reported that modifying the tsconfig.app.json file instead of the tsconfig.json file can resolve the issue. This can be accomplished by adding the following to the tsconfig.app.json file:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"resolveJsonModule": true
},
"exclude": ["test.ts", "**/*.spec.ts"]
}
Other popular problems with angular-builders
Problem 1: One common problem with angular-builders is related to the execution of custom webpack configurations. When trying to use a custom webpack configuration file in an Angular project, users often encounter errors that prevent the configuration from being executed. These errors can occur due to a variety of reasons, including issues with package dependencies, module imports, and file paths. One example of such an error message is:
Error: Cannot find module 'webpack-cli/bin/config-yargs'
To resolve this issue, users can try installing the webpack-cli package and running the command again. Another potential solution is to update the @angular-devkit/build-angular package to the latest version, which may include bug fixes and improvements to the build process.
Problem 2: Another common issue with angular-builders is related to the use of custom build options. When attempting to add custom build options to an Angular project, users may encounter errors that prevent the build process from completing successfully. These errors can occur due to issues with the configuration of the options or with the integration of the options with the build process. One example of such an error message is:
Error: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
To resolve this issue, users can review the documentation for the @angular-builders/custom-webpack package and ensure that their configuration file is correctly formatted. Additionally, users can try removing any custom build options that may be causing the error and running the build process again to identify the root cause of the problem.
Problem 3: A third common problem with angular-builders is related to the configuration of tests and test runners. When attempting to run tests in an Angular project, users may encounter errors that prevent the tests from executing or from completing successfully. These errors can occur due to issues with the configuration of the test runner, dependencies, or file paths. One example of such an error message is:
Error: Cannot find module 'jest-preset-angular'
To resolve this issue, users can try installing the missing package or updating their dependencies to ensure that all required packages are installed. Additionally, users can review the configuration of their test runner and ensure that it is correctly set up to work with their project. This may involve configuring paths to test files or updating settings related to test coverage or reporting.
A brief introduction to angular-builders
Angular-builders is a tool that allows developers to use custom webpack configurations to build and serve Angular applications. It is a command line interface that allows developers to modify the configuration of Angular build tasks. This tool is based on Angular CLI, but it allows for greater flexibility and customization. It works by using webpack as the underlying build tool, and provides additional functionality through plugins.
One of the main benefits of using angular-builders is that it allows developers to use their own custom webpack configurations. This means that they can modify the build process to suit their specific needs. For example, they can add plugins to optimize the size of the final bundle, or they can modify the source code to include custom functionality. The tool also provides a number of pre-built plugins that can be used to add additional functionality, such as support for SASS or LESS stylesheets. Overall, angular-builders is a powerful tool that provides developers with greater control over the build process, and allows them to create optimized and customized builds of their Angular applications.
Another key feature of angular-builders is that it integrates seamlessly with the Angular CLI. This means that developers can continue to use the same CLI commands they are familiar with, while still being able to take advantage of the additional functionality provided by angular-builders. This makes it easy for developers to adopt the tool into their existing workflows, without having to learn a completely new set of commands or tools. Additionally, because angular-builders is built on top of webpack, developers can take advantage of the many plugins and loaders available for webpack, making it easy to add additional functionality to their builds. Overall, angular-builders is a powerful tool that allows developers to customize their build process and create optimized and customized builds of their Angular applications, without having to learn new tools or workflows.
Most popular use cases for angular-builders
- Angular-builders is a powerful tool that can be used to customize the build process of Angular applications. It allows developers to create custom builders that can be added to the Angular CLI configuration. For instance, developers can use it to configure a custom webpack configuration to optimize their build process. Here is an example of how to use the Angular-builders to create a custom webpack configuration:
{
"name": "my-app",
"version": "0.0.1",
"scripts": {
"build": "ng run my-app:build:prod --builder=@angular-builders/custom-webpack:browser",
},
"dependencies": {
"@angular/core": "^8.2.0"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^8.4.1",
"webpack": "^4.41.5"
}
}
- Another use case for Angular-builders is to create custom builders that can be used to deploy Angular applications to various hosting platforms. For instance, developers can create a custom builder to deploy their Angular application to Firebase hosting. Here is an example of how to use the Angular-builders to deploy an Angular application to Firebase hosting:
{
"name": "my-app",
"version": "0.0.1",
"scripts": {
"deploy": "ng run my-app:deploy --builder=@angular-builders/deploy-firebase",
},
"dependencies": {
"@angular/core": "^8.2.0"
},
"devDependencies": {
"@angular-builders/deploy-firebase": "^8.4.1",
"firebase-tools": "^8.12.0"
}
}
- Finally, Angular-builders can be used to create custom builders that can be used to run tests in Angular applications. For instance, developers can use it to create a custom builder to run their tests in headless Chrome. Here is an example of how to use the Angular-builders to run tests in headless Chrome:
{
"name": "my-app",
"version": "0.0.1",
"scripts": {
"test": "ng run my-app:test --builder=@angular-builders/jest:run",
},
"dependencies": {
"@angular/core": "^8.2.0"
},
"devDependencies": {
"@angular-builders/jest": "^8.4.1",
"jest-puppeteer": "^4.4.0"
}
}
It’s Really not that Complicated.
You can actually understand what’s going on inside your live applications.