Open Ashitak4 opened 6 years ago
Thank you @Matroshiro .
please try import 'react-intl-tel-input/dist/libphonenumber.js';
see if it works.
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
@Matroshiro Can you share your code?
Its hard to debug with just this.
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/
]
};
@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.
Made a simplest demo code here for your reference: https://gist.github.com/patw0929/413b94db69d0e0a7f1c43ca23d7a044f
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
Could you try setting url-loader or file-loader in webpack for .png
files?
@Matroshiro Is your issue resolved?
Not yet :/
@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
@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?
@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
import 'libphonenumber-js-utils/dist/libphonenumber.js';
I am facing same issue at time of using react-intl-tel-input
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,