Powered By Google not being imported - Require Cannot find module

[yannskee]

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]

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

[hibiken]

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

[yannskee]

@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]

@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]

+1

[hibiken]

@helloncanella Are you using webpack to bundle assets?

[ducdigital]

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]

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]

Also getting this problem

[hibiken]

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

[timfisher]

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]

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

[Floriferous]

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]

+1 on meteor 1.5

[jmlag]

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]

+1

[hibiken]

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]

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]

@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]

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

[jacobimpson]

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]

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

[hibiken]

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