使用ngx-intl-tel-input遇rollup报错：PhoneNumberUtil未导出求方案

Hey there, let's work through this rollup error you're hitting with PhoneNumberUtil not being exported from google-libphonenumber—I've dealt with similar CommonJS/ES module mismatches in rollup before, so here are some practical fixes and alternative libraries to consider:

Troubleshooting the Rollup Configuration #

First, let's try adjusting your rollup setup to properly resolve the PhoneNumberUtil export:

• Fix the namedExports path and syntax
  The google-libphonenumber package distributes its code as a CommonJS module where PhoneNumberUtil is attached to the default export. Try updating your rollupCommonjs config to explicitly map this:

  commonjs({
    namedExports: {
      // Map the correct export from the libphonenumber.js file
      'node_modules/google-libphonenumber/dist/libphonenumber.js': ['PhoneNumberUtil']
    },
    // Optional: Enable default exports to auto-resolve if needed
    defaultIsModuleExports: true
  })
  

  Also, double-check that rollup-plugin-node-resolve is configured to handle node_modules modules (set browser: true if you're building for the browser).

• Downgrade google-libphonenumber
  Version 3.2.2 might have changed the export structure in a way that breaks rollup's CommonJS parsing. Try reverting to a more stable, rollup-friendly version like 3.1.20:

  npm install google-libphonenumber@3.1.20 --save-exact
  

  After downgrading, clean your node_modules and rebuild to ensure no cached code is causing issues.

• Adjust import syntax in your code
  If rollup still can't resolve the export, try importing PhoneNumberUtil directly using CommonJS-style requires in your components:

  // Replace ES imports with this
  const PhoneNumberUtil = require('google-libphonenumber').PhoneNumberUtil;
  

  Or use wildcard imports to bypass export resolution:

  import * as libphonenumber from 'google-libphonenumber';
  const phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
  

Alternative Libraries to ngx-intl-tel-input #

If the rollup issues persist, here are some reliable alternatives that might play nicer with your build setup:

• ngx-mat-intl-tel-input
  If you're using Angular Material, this library provides a Material Design-styled phone input, built on the same google-libphonenumber dependency but with better module resolution for modern Angular builds.

• Direct intl-tel-input integration
  Skip the Angular wrapper entirely and use the vanilla intl-tel-input library. You can wrap it in a custom Angular component/directive to add Angular-specific functionality—this gives you full control over how the library is bundled and imported.

• ng-phone-input
  A lightweight, minimal Angular phone input component that handles validation and formatting without heavy dependencies. It's designed to be easy to bundle with rollup or webpack.

内容的提问来源于stack exchange，提问作者user2608601