search

jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers
https://intl-tel-input.com
MIT License
7.36k stars 1.92k forks source link

Error when import then build #1669

Closed dohoangtung closed 2 weeks ago

dohoangtung commented 2 weeks ago

Plugin version

From v21.x.x => v23.1.0

Steps to reproduce

  1. import intlTelInput from "intl-tel-input";
  2. yarn build

Got the error:

ERROR in ./node_modules/intl-tel-input/build/js/intlTelInput.js 1513:6 Module parse failed: Unexpected token (1513:6) 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 | var Iti = class { | //* Can't be private as it's called from intlTelInput convenience wrapper.

id;

| //* NOT Private | promise; @ ./src/form-elements/TelInput/index.js 4:0-42 @ ./src/form-elements/index.jsx @ ./src/form.jsx @ ./src/index.jsx

Downgrade to version v20.x.x or v19.x.x => Build OK

jackocnr commented 2 weeks ago

What does yarn build do? Please give as much detail as possible - what your build system is, which version, include config files etc.

But from the error message, it appears to be struggling with the syntax on this line which uses class fields.

So I guess your build system is not setup for that syntax. The error message suggests you might need to use an appropriate loader to handle this syntax?

dohoangtung commented 2 weeks ago

Hi,

thanks for quick response

My env:

Nodejs v18 "@babel/cli": "^7.12.10", "@babel/core": "^7.12.10", ... "webpack": "^4.46.0",

Yarn build will execute webpack with babel

Update webpack to latest version fix the issue!