CODEWITHSUNDEEP
angularwebpacknrwl-nxangular-builder
afriedman111
afriedman111

Reputation: 2341

Using @angular-builder/custom-webpack to change a webpack property for Angular 13

I am building an Angular 13 application inside a NX monorepo. This repo contains a react library that uses jsx files. When I run my app, the React library files don't resolve the jsx extension correctly (all of the import statements for jsx files need to end in '.jsx'). I think to solve this I need to add 'jsx' to the resolve.extensions array in webpack config. To do this I am using angular-builder's custom webpack package. First I installed the package:

npm install --save-dev @angular-builders/custom-webpack@13

Then I created a custom-webpack.config.js file in the application root with the following contents:

module.exports = {
    resolve: {
        extensions: ['', '.tsx', '.ts', '.js','min.js', 'jsx']
      }
  };

Next I replaced architect.build.builder in the angular json: "builder": "@angular-devkit/build-angular:browser" changed to "builder": "@angular-builders/custom-webpack:browser" I added the following to architect.build.options:

"customWebpackConfig": {
  "path": "custom-webpack.config.js",
  "replaceDuplicatePlugins": true
},

I changed architect.serve.builder from "builder": "@angular-devkit/build-angular:dev-server" to "builder": "@angular-builders/custom-webpack:dev-server"

When I run the applicaiton, it builds and serves fine, but if I change the import statement to exclude '.jsx' it breaks export * from './lib/my-component' breaks but export * from './lib/my-component.jsx' works.

Is my approach correct? Am I creating a custom webpack file and including it the right way?

Upvotes: 4

Views: 1845

Answers (0)

Related Questions