hibiken / react-places-autocomplete

React component for Google Maps Places Autocomplete
https://hibiken.github.io/react-places-autocomplete/
MIT License
1.38k stars 388 forks source link

Powered By Google not being imported - Require Cannot find module #103

Closed yannskee closed 6 years ago

yannskee commented 7 years ago

Hello, I get this error since lastest release 5.4.0, please help !

Uncaught Error: Cannot find module 'react-places-autocomplete/images/powered_by_google_default.png' from 'react-places-autocomplete/dist/PlacesAutocomplete.js'

Line 372 of /node_modules/react-places-autocomplete/dist/PlacesAutocomplete.js is generating the error. this.props.googleLogo && _react2.default.createElement( 'div', { id: 'PlacesAutocomplete__google-logo', style: this.inlineStyleFor('googleLogoContainer'), className: this.classNameFor('googleLogoContainer') }, _react2.default.createElement('img', { src: require('./images/powered_by_google_' + this.props.googleLogoType + '.png'), style: this.inlineStyleFor('googleLogoImage'), className: this.classNameFor('googleLogoImage') }) )

When using hard coded path of copy of the image from my assets/images folder works perfectly. E.g. src: "http://localhost:4000/images/powered_by_google_default.png"

hibiken commented 7 years ago

@yannskee Thank you for reporting this! Will fix this ASAP

hibiken commented 7 years ago

@yannskee Could you check again? I just rebuilt and published to NPM registry

yannskee commented 7 years ago

@kenny-hibino just did a npm remove then npm install and I got this version "react-places-autocomplete": "0.0.0-semantically-released", i'm guessing this is normal. I've tested and I am still getting the same error message. I will keep looking on my side, there is a very good chance the issue is coming from my env. I will keep you posted. Thanks again for the help :)

yannskee commented 7 years ago

@kenny-hibino forgot to mention, I am using brunch on phoenixframework. Could that be where my issue is coming from ?

brunch-config.js

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        before: [
        "css/vendor/foundation.min.css",
        "css/vendor/react-datepicker-cssmodules.min.css",
        "css/vendor/react-datepicker.min.css",
        "css/vendor/rc-slider.css"
        ]
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      presets: ["es2015", "react"],
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true,
    whitelist: ["phoenix", "phoenix_html", "react", "react-dom"]
  }
}

Only thing that works for me is locking the version to 5.3.1 "react-places-autocomplete": "5.3.1",

helloncanella commented 7 years ago

+1

hibiken commented 7 years ago

@helloncanella Are you using webpack to bundle assets?

ducdigital commented 7 years ago

The answer is to add url-loader in your project package.json.

I just added the package and it work fine.

I think it's better to specify it in this project package.json if possible because in my case I do not use url-loader

Floriferous commented 7 years ago

This is a breaking issue for me, adding url-loader did not fix it, since I am not using webpack. I am on version 5.3.1

Edit: Upgraded to 5.4.2 and still having this issue.

timfisher commented 7 years ago

Also getting this problem

hibiken commented 7 years ago

Thank you for reporting. @Floriferous @timfisher are you guys using Webpack? if so, could you try adding file-loader to your webpack config?

timfisher commented 7 years ago

Tried with file-loader was using url-loader, no luck, here is my full webpack.config.js file. I am using SPAServices with .net core

const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; const bundleOutputDir = './wwwroot/dist'; const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env) => { const isDevBuild = !(env && env.prod); return [{ stats: { modules: false }, entry: { 'main': './ClientApp/boot.tsx' }, resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] }, output: { path: path.join(dirname, bundleOutputDir), filename: '[name].js', publicPath: '/dist/' }, module: { rules: [ { test: /.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }, { test: /.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) }, { test: /.(png|jpg|gif)$/, use: [{loader: 'file-loader', options: {}}]} ] }, plugins: [ new CheckerPlugin(), new webpack.DllReferencePlugin({ context: dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }), new CopyWebpackPlugin([ { from: 'ClientApp/images/*' } ]) ].concat(isDevBuild ? [ // Plugins that apply in development builds only new webpack.SourceMapDevToolPlugin({ filename: '[file].map', // Remove this line if you prefer inline source maps moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk }) ] : [ // Plugins that apply in production builds only new webpack.optimize.UglifyJsPlugin(), new ExtractTextPlugin('site.css') ]) }]; };

Floriferous commented 7 years ago

I'm not using webpack. Tried adding file-loader anyways, which did not solve the issue.

Floriferous commented 7 years ago

I wrote a custom implementation of the autocomplete rendering, so the logo wasn't showing anyways. For me a quick workaround is to set the googleLogo prop to false, and add the image later myself when we go live, or if someone can find a fix.

LazerJesus commented 7 years ago

+1 on meteor 1.5

jmlag commented 7 years ago

I can't replicate this, but if someone could post a link to their repo or something I could give it a try.

Or for a short-term fix you could just point the image src directly to the Google-hosted images: https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-non-white3_hdpi.png

ccsheeha commented 7 years ago

+1

hibiken commented 7 years ago

Would it make sense to remove Google Image from the library and add an optional footer prop so that user of the library can provide their custom footer element for the dropdown? Feedback would be appreciated!

jth0024 commented 7 years ago

I think this sounds like a good solution. For users that wish to use a file-loader, you could still include the image in the library, but not directly referenced in code.

mostlyharmless2024 commented 7 years ago

@kenny-hibino Please do make it a optional footer prop. I've been playing with various libraries for autocomplete and no one seems to be doing that... i've had to hack/hide it with dodgy CSS ...

In the meantime, is there something I can do to prevent this from failing to load in the current version? It's breaking on every keystroke when a user types (each state update appears to try and load the image again)

Using Meteor 1.5 and React 15

EDIT- hold up, there is a "googleLogo" property already... I misunderstood what you meant about the optional "footer" property.... setting that to false solves the above issue if you're okay not showing the "Powered by google" credit.

Sorry, working too late haha- The optional "Custom" footer component possibility still sounds good though - The option to say "Powered by Bing" on the bottom of a Google powered auto-complete would be hilarious.

OleksandrPoltavets commented 7 years ago

Added url-loader to my project package.json worked for me as well. I'm using webpack.

jacobimpson commented 6 years ago

Expanding on @Floriferous 's solution, this is a quick workaround that I am using until something more permanent is implemented into the package.

const myStyles = {
    autocompleteContainer: {
        paddingBottom: '20px',
        backgroundSize: 'auto 12px',
        backgroundPosition: 'bottom left 10px',
        backgroundRepeat: 'no-repeat',
        backgroundImage: "url('https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png')",
    },
};
<PlacesAutocomplete
    styles={myStyles}
    googleLogo={false}
/>

You lose some semantics this way (by not having an inline image) but seems like a decent work around in the short time that could come in handy for some.

dmoli commented 6 years ago

@jacobimpson thank you for the solution, it's a patch but works!

hibiken commented 6 years ago

Please use v6.x or above. Google logo image is no longer part of the library.