Import libphonenumber.js issue

[Ashitak4]

Hello there,

First i would like to say that this project is awesome i really want to use this component in my project but i can not manage to use it properly. I'm getting error on those lines : ~ import 'file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js'; import './node_modules/react-intl-tel-input/dist/main.css'; ~

Does someone got these errors and succeed to fix it ? I'm guessing there is a link with my webpack config (i'm not the one who created it) but still not sure.

PS : I already try with correct direct path in these import lines

Best regards,

[superhit0]

Thank you @Matroshiro .

please try import 'react-intl-tel-input/dist/libphonenumber.js';

see if it works.

[Ashitak4]

Thanks you for answering so quickly,

Indeed, there aren't errors anymore but as a result I get this :

The main.css is not load correctly here but if i load it from the index.html the result is :

Flags are missing and the text doesn't fit the format

[superhit0]

@Matroshiro Can you share your code?

Its hard to debug with just this.

[Ashitak4]

Component is in AddressesList with import lines and component declaration same as the example

Architecture :

WebpackConfigFile :

var webpack = require('webpack'); // Requiring the webpack lib
var InterpolateHtmlPlugin = require('interpolate-html-plugin');

module.exports = {
  entry: [
    //'webpack-dev-server/client?http://localhost:8080', // Setting the URL for the hot reload
    //'webpack/hot/only-dev-server', // Reload only the dev server
    //'webpack/hot/dev-server',
    'whatwg-fetch',
    './src/index.jsx'
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel' // Include the react-hot loader
    },
    {
      test: /\.css$/,
      loader: 'style!css' // We add the css loader
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    //publicPath: '/',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true // Activate hot loading
  },
  /*
  debug: true,
  devtool: "#eval-source-map",
  */
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // Wire in the hot loading plugin
    new InterpolateHtmlPlugin({
      'LTE': 'XXX'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }) // production mode see here  http://moduscreate.com/optimizing-react-es6-webpack-production-build/

  ]
};

[superhit0]

@Matroshiro I can't help you without the code. If it is opensource, please send me the link.

Otherwise, try this import 'react-intl-tel-input/dist/main.css';

If that doesn't work, I can't help you without code. Maybe @patw0929 can help.

[patw0929]

Made a simplest demo code here for your reference: https://gist.github.com/patw0929/413b94db69d0e0a7f1c43ca23d7a044f

[Ashitak4]

Thank you, the demo code works fine, i really think the error come from the webpack config : With the 3 baics import lines in your example i get :

Maybe it's the last thing to solve to finally make it works

[patw0929]

Could you try setting url-loader or file-loader in webpack for .png files?

[superhit0]

@Matroshiro Is your issue resolved?

[Ashitak4]

Not yet :/

[superhit0]

@Matroshiro If your issue is still not resolved, & if it is open source can we have a look at it or remote login into your system to find the issue?

Other wise I am not sure I can help you here

[Aidar-Frontend-Developer]

@patw0929 Hello Could you try setting url-loader or file-loader in webpack for .png files? {test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}, in my case i also get images invisible what the problem is?

[Aidar-Frontend-Developer]

@patw0929 Maybe https://www.npmjs.com/package/react-intl-tel-input#heads-up-css-sourcemaps should help us but really in my webpack.config for dev i use output.publicPath = '/static/' and when page renders the backround-image link returns background-image: url(/static/9c96e0e….png); but it's empty

[yasardemirtas]

import 'libphonenumber-js-utils/dist/libphonenumber.js';

[chougulenikita]

I am facing same issue at time of using react-intl-tel-input