title: React Module parse failed: Unexpected character '@'
body: <p>I am getting an error when trying to import the following in my react component:</p>
  
  <pre><code>import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
  import '@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css';
  </code></pre>
  
  <p>I'm using this module: <a href="https://fonticonpicker.github.io/react-fonticonpicker/" rel="nofollow noreferrer">https://fonticonpicker.github.io/react-fonticonpicker/</a></p>
  
  <p>I get this error:</p>
  
  <blockquote>
    <p>./node_modules/@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css
    Module parse failed: Unexpected character '@' (18:0) You may need an
    appropriate loader to handle this file type. |  *  |  <em>/ |
    @font-face{font-family:fontIconPicker;src:url(assets/fontIconPicker.ttf)
    format("truetype"),url(assets/fontIconPicker.woff)
    format("woff"),url(assets/fontIconPicker.svg#fontIconPicker)
    format("svg");font-weight:400;font-style:normal}[class</em>="
    fipicon-"],[class^=fipicon-]{font-family:fontIconPicker!important;speak:none;font-style .......</p>
  </blockquote>
  
  <p>The error can be reproduced with my code from github: <a href="https://github.com/gregbia/my-app" rel="nofollow noreferrer">https://github.com/gregbia/my-app</a></p>
  
  <p>Use <code>npm install</code>, and <code>npm start</code> and the error will show.</p>
  
  <p>My webpack looks like this:</p>
  
  <pre><code>/**
   * Webpack Configuration
   *
   * Working of a Webpack can be very simple or complex. This is an intenally simple
   * build configuration.
   *
   * Webpack basics — If you are new the Webpack here's all you need to know:
   *     1. Webpack is a module bundler. It bundles different JS modules together.
   *     2. It needs and entry point and an ouput to process file(s) and bundle them.
   *     3. By default it only understands common JavaScript but you can make it
   *        understand other formats by way of adding a Webpack loader.
   *     4. In the file below you will find an entry point, an ouput, and a babel-loader
   *        that tests all .js files excluding the ones in node_modules to process the
   *        ESNext and make it compatible with older browsers i.e. it converts the
   *        ESNext (new standards of JavaScript) into old JavaScript through a loader
   *        by Babel.
   *
   * TODO: Instructions.
   *
   * @since 1.0.0
   */
  
  const paths = require( './paths' );
  const autoprefixer = require( 'autoprefixer' );
  const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
  
  // Extract style.css for both editor and frontend styles.
  const blocksCSSPlugin = new ExtractTextPlugin( {
      filename: './dist/blocks.style.build.css',
  } );
  
  // Extract editor.css for editor styles.
  const editBlocksCSSPlugin = new ExtractTextPlugin( {
      filename: './dist/blocks.editor.build.css',
  } );
  
  // Configuration for the ExtractTextPlugin — DRY rule.
  const extractConfig = {
      use: [
          // "postcss" loader applies autoprefixer to our CSS.
          { loader: 'raw-loader' },
          {
              loader: 'postcss-loader',
              options: {
                  ident: 'postcss',
                  plugins: [
                      autoprefixer( {
                          browsers: [
                              '&gt;1%',
                              'last 4 versions',
                              'Firefox ESR',
                              'not ie &lt; 9', // React doesn't support IE8 anyway
                          ],
                          flexbox: 'no-2009',
                      } ),
                  ],
              },
          },
          // "sass" loader converts SCSS to CSS.
          {
              loader: 'sass-loader',
              options: {
                  // Add common CSS file for variables and mixins.
                  data: '@import "./src/common.scss";\n',
                  outputStyle: 'nested',
              },
          },
      ],
  };
  
  // Export configuration.
  module.exports = {
      entry: {
          './dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'.
      },
      output: {
          // Add /* filename */ comments to generated require()s in the output.
          pathinfo: true,
          // The dist folder.
          path: paths.pluginDist,
          filename: '[name].js', // [name] = './dist/blocks.build' as defined above.
      },
      // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
      devtool: 'cheap-eval-source-map',
      module: {
          rules: [
              {
                  test: /\.(js|jsx|mjs)$/,
                  exclude: /(node_modules|bower_components)/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          // @remove-on-eject-begin
                          babelrc: false,
                          presets: [ require.resolve( 'babel-preset-cgb' ) ],
                          // @remove-on-eject-end
                          // This is a feature of `babel-loader` for webpack (not Babel itself).
                          // It enables caching results in ./node_modules/.cache/babel-loader/
                          // directory for faster rebuilds.
                          cacheDirectory: true,
                      },
                  },
              },
              {
                  test: /style\.s?css$/,
                  exclude: /(node_modules|bower_components)/,
                  use: blocksCSSPlugin.extract( extractConfig ),
              },
              {
                  test: /editor\.s?css$/,
                  exclude: /(node_modules|bower_components)/,
                  use: editBlocksCSSPlugin.extract( extractConfig ),
              },
          ],
      },
      // Add plugins.
      plugins: [ blocksCSSPlugin, editBlocksCSSPlugin ],
      stats: 'minimal',
      // stats: 'errors-only',
      // Add externals.
      externals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          ga: 'ga', // Old Google Analytics.
          gtag: 'gtag', // New Google Analytics.
          jquery: 'jQuery', // import $ from 'jquery' // Use the WordPress version.
      },
  };
  </code></pre>