Not creating "svg-icons" components

[FernandoGOT]

React crash or gives an error everytime I use an component that uses "material-ui/internal/svg-icons/"

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

For the svg icons to render and no more console's alerts

Current Behavior

When I use an select the "ArrowDropDown" component isn't rendering and I get a tag <e272eaa2fa1e676de9b817a5fb3b752f.js> or some other code.js. The html look like this:

<div class="MuiFormControl-root-59 SelectMaterial-select-77">
  <div class="MuiInput-root-63 MuiInput-formControl-64 MuiInput-underline-67">
    <div class="MuiSelect-root-78">
      <div class="MuiSelect-select-79 MuiSelect-selectMenu-80 MuiInput-input-71" aria-pressed="false" tabindex="0" role="button" aria-haspopup="true"><span>​</span>Texto do selectc</div><input type="hidden" value="372" name="debito" aria-required="false" aria-invalid="false">
      <e272eaa2fa1e676de9b817a5fb3b752f.js class="MuiSelect-icon-82"></e272eaa2fa1e676de9b817a5fb3b752f.js>
    </div>
  </div>
</div>

See the "e272eaa2fa1e676de9b817a5fb3b752f.js" tag, this is the problem. It generate the error:

Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

I have this problem with everything that uses the files from "material-ui/internat/scv-icons/". After some debugging I found that this tag is returned from var _ArrowDropDown = require('../internal/svg-icons/ArrowDropDown'); at "material-ui/Select/SelectInput".

• I suspect the problem may be due to the Webpack

Steps to Reproduce (for bugs)

I was unable to reproduce it to the current moment

Context

I can't use any component that have an "svg-icons" in it

Your Environment

Tech	Version
Material-UI	1.0.0-beta.36
React	16.2.0
browser	Chrome
material-ui-icons	1.0.0-beta.36
react-dom	16.2.0

[oliviertassinari]

@FernandoGOT Your issue has been closed because it does not conform to our issue requirements. Please provide a full reproduction test case. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

Also, It sounds like an issue with your bundler. I would encourage you to open the issue on their side. It's unlikely we can do anything about it here.

[FernandoGOT]

Just leaving here the fix in case other people get the same problem.

The problem was a configuration in the loader of the webpack, I needed to change the loader from file to url-loader?importLoaders=1&limit=100000, here an example:

module: {
    loaders: [{
      test: /.js[x]?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'es2017', 'react'],
        plugins: [
          'transform-runtime',
          'transform-decorators-legacy',
          'transform-class-properties',
          'transform-object-rest-spread',
          'transform-async-to-generator'
        ]
      }
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
    }, {
      test: /\.woff|.woff2|.ttf|.eot|.svg*.*$/,
      loader: 'file'
    }]
  }

module: {
    loaders: [{
      test: /.js[x]?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'es2017', 'react'],
        plugins: [
          'transform-runtime',
          'transform-decorators-legacy',
          'transform-class-properties',
          'transform-object-rest-spread',
          'transform-async-to-generator'
        ]
      }
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
    }, {
      test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
      loader: 'url-loader?importLoaders=1&limit=100000'
    }]
  }

more details here: https://webpack.js.org/loaders/url-loader/