qonto/ember-phone-input

v9 upgrade cause a build error with classic build

Closed this issue · 3 comments

sinankeskin commented

ERROR in ./node_modules/intl-tel-input/build/img/flags.png 1:0
Module parse failed: Unexpected character '�' (1:0)
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
(Source code omitted for this binary file)
@ ./node_modules/css-loader/dist/cjs.js!./node_modules/intl-tel-input/build/css/intlTelInput.css 4:0-61 7:73-102
@ ./node_modules/intl-tel-input/build/css/intlTelInput.css 2:12-87 9:17-24 13:15-29
@ ./node_modules/ember-phone-input/dist/components/phone-input.js 1:144-194

ERROR in ./node_modules/intl-tel-input/build/img/flags@2x.png 1:0
Module parse failed: Unexpected character '�' (1:0)
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
(Source code omitted for this binary file)
@ ./node_modules/css-loader/dist/cjs.js!./node_modules/intl-tel-input/build/css/intlTelInput.css 5:0-64 8:73-102
@ ./node_modules/intl-tel-input/build/css/intlTelInput.css 2:12-87 9:17-24 13:15-29
@ ./node_modules/ember-phone-input/dist/components/phone-input.js 1:144-194

cleaning up...
Build Error (WebpackBundler)

webpack returned errors to ember-auto-import

v8 works just fine. Haven't tried with embroider.

sinankeskin commented

ember-cli: 4.8.0
node: 16.20.0
os: darwin x64

and "ember-auto-import": "^2.6.3" also "webpack": "^5.83.1"

anas7asia commented

Hello @sinankeskin,
Thanks for reaching out!

In v9 ember-phone-input has been converted from v1 addon format to v2. It means that it has become a normal JS library without any additional Ember functionality.

Under the hood ember-phone-input uses images and styles from intl-tel-input which is another JS dependency located in node_modules.

To be able to load it, image loading configuration should be provided. For example, with a file loader:

        module: {
          rules: [
            {
              test: /\.(png|jpe?g)$/i,
              use: [{ loader: 'file-loader' }]
            }
          ]
        }

To make it work, you will need to:

  1. add file-loader to the package.json.
  2. add configuration for ember-auto-import or Embroider in ember-cli-build.js. You can find an example here.
sinankeskin commented

Hey @anas7asia thanks for the reply but I don't think I should add another package for use an addon. As you can check my profile I have a lot of ember addons and in my opinion that's addon author's responsibility to solve that but in this case I guess intl-tel-input needs to change their asset load approach.

Closing. Thanks again.