title: "Syntax error: import declarations may only appear at top level of a module" when using react-share package
body: <p>I have been through many threads to solve this issue but unfortunately non of them is working.
  I am trying to import react-share like this</p>
  
  <pre><code>    import {
      FacebookShareButton,
      GooglePlusShareButton,
      TwitterShareButton,
      WhatsappShareButton,
  
      FacebookIcon,
      TwitterIcon,
      WhatsappIcon
  
  } from 'react-share';
  
  "use strict";
  
  require('./../../../assets/styles/components/thread.less');
  
  
  //var reactShare = require('react-share');
  var React = require('react');
  var ReactDOM = require('react-dom');
  var Fluxxor = require('fluxxor');
  var _ = require("lodash");
  
  var FluxMixin = Fluxxor.FluxMixin(React);
  var StoreWatchMixin = Fluxxor.StoreWatchMixin;
  </code></pre>
  
  <p>But i am receiving the error of </p>
  
  <pre><code>syntaxerro: import declarations may only appear at top level of a module
  </code></pre>
  
  <p>I have installed babel and have performed all the suggestions given in threads but not been able to solve the issue</p>
  
  <p>For the reference my webpack.config.js file looks like this:</p>
  
  <pre><code>var path = require("path");
  var webpack = require("webpack");
  
  module.exports = {
      cache: true,
      devtool: 'hidden-source-map',
      entry: {
          microaudio: "./reactFrontend/js/main",
          notsupported: "./reactFrontend/js/notsupported",
          sharerender: "./reactFrontend/js/shareRender",
          privacyDeclaration: "./reactFrontend/js/privacyDeclaration",
          legal: "./reactFrontend/js/legal"
      },
      output: {
          path: path.join(__dirname, "dist"),
          publicPath: "frontend/",
          filename: "[name].js",
          chunkFilename: "[chunkhash].js"
      },
      node: {
          fs: "empty"
      },
      module: {
          loaders: [{
              test: /\.jsx$/,
              loader: "jsx-loader?insertPragma=React.DOM&amp;harmony"
          }, {
              test: /\.json/,
              loader: "json-loader"
          }, {
              test: /\.less/,
              loader: "style-loader!css-loader!autoprefixer-loader?{browsers:['last 3 versions', 'Android &gt;= 4', 'safari &gt;= 4']}!less-loader"
          }, {
              test: /\.tpl/,
              loader: "ejs-loader"
          }, {
              test: /\.woff(\?\S*)?$/,
              loader: "url-loader?prefix=/font&amp;limit=1000&amp;mimetype=application/font-woff"
          }, {
              test: /\.woff2(\?\S*)?$/,
              loader: "url-loader?prefix=/font&amp;limit=1000&amp;mimetype=application/font-woff"
          }, {
              test: /\.ttf(\?\S*)?$/,
              loader: "file-loader?prefix=/font"
          }, {
              test: /\.eot(\?\S*)?$/,
              loader: "file-loader?prefix=/font"
          }, {
              test: /\.svg(\?\S*)?$/,
              loader: "url-loader?limit=1000000&amp;mimetype=image/svg+xml"
          }, {
              test: /\.png$/,
              loader: "url-loader?limit=10000&amp;mimetype=image/png"
          }, {
              test: /\.gif$/,
              loader: "url-loader?limit=10000&amp;mimetype=image/gif"
          }, {
              test: /\.jpg$/,
              loader: "url-loader?limit=10000&amp;mimetype=image/jpeg"
          }]
      },
      plugins: [
          //setup momentjs context to only include languages we do need!
          new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/)
      ],
      resolve: {
          extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"],
          alias: {
              av: __dirname + "/reactFrontend/js/vendors/aurora/aurora",
              "ogg.js": __dirname + "/reactFrontend/js/vendors/aurora/ogg",
              "vorbis.js": __dirname + "/reactFrontend/js/vendors/aurora/vorbis"
          }
      },
  
      babel: {
      presets: ['es2015', 'stage-0'],
      plugins: ['transform-runtime']
    }
  };
  </code></pre>
  
  <p>and my package.json file looks like this</p>
  
  <pre><code>{
    "name": "audiyoh-frontend",
    "version": "1.0.0",
    "main": "./src/js/index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "test-martin-local": "SET NODE_ENV=development&amp;&amp; SET NODE_APP_INSTANCE=martin&amp;&amp; gulp test-bs",
      "test-robert-local": "SET NODE_ENV=development&amp;&amp; SET NODE_APP_INSTANCE=robert&amp;&amp; gulp test-bs",
      "wds": "webpack-dev-server --https --inline --hot --color --history-api-fallback"
    },
    "author": "atroo GbR",
    "contributors": [
      {
        "name": "Martin Foerster",
        "email": "martin@atroo.de"
      },
      {
        "name": "Robert Krüger",
        "email": "robert@atroo.de"
      }
    ],
    "license": "UNLICENSED",
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^8.0.2",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-stage-2": "^6.24.1",
      "blanket": "^1.1.6",
      "bootstrap-webpack": "0.0.3",
      "chai": "^3.3.0",
      "coveralls": "^2.11.2",
      "css-loader": "^0.7.0",
      "ejs-loader": "^0.1.0",
      "file-loader": "^0.8.1",
      "glob": "^4.3.5",
      "gulp": "^3.8.6",
      "gulp-debug": "^2.1.2",
      "gulp-mocha": "^2.0.0",
      "gulp-notify": "^2.2.0",
      "gulp-plumber": "^1.0.1",
      "gulp-rimraf": "^0.2.0",
      "gulp-spawn-mocha": "^2.0.1",
      "gulp-util": "^3.0.0",
      "i18next-resource-store-loader": "0.0.2",
      "imports-loader": "^0.6.5",
      "json-loader": "^0.5.1",
      "jsx-loader": "^0.12.2",
      "less": "^2.2.0",
      "less-loader": "^2.0.0",
      "mocha": "^2.1.0",
      "mocha-lcov-reporter": "^0.0.1",
      "node-notifier": "^4.4.0",
      "run-sequence": "^1.1.5",
      "selenium-webdriver": "^2.47.0",
      "sha1": "^1.1.1",
      "socket.io": "^1.3.7",
      "style-loader": "^0.8.3",
      "url-loader": "^0.5.5",
      "wasm-loader": "1.1.0",
      "webpack": "^1.15.0",
      "webpack-dev-server": "^1.14.1",
      "webpack-merge": "^4.1.4",
      "webpack-stream": "^3.0.1",
      "worker-loader": "^0.5.7",
      "yargs": "^3.26.0"
    },
    "dependencies": {
      "autoprefixer-loader": "^3.2.0",
      "av": "^0.4.9",
      "backbone": "^1.1.2",
      "backbone.wreqr": "^1.3.1",
      "bootstrap": "^3.3.2",
      "color": "^0.11.3",
      "crypto-js": "^3.1.2-5",
      "exports-loader": "^0.6.3",
      "flux": "^2.0.0",
      "fluxxor": "^1.7.3",
      "get-user-media-promise": "^1.1.1",
      "i18next-client": "^1.7.7",
      "jquery": "^2.1.1",
      "keymirror": "~0.1.0",
      "less-to-json-loader": "^1.0.0",
      "lodash": "^3.8.0",
      "modernizr": "^3.3.1",
      "modernizr-loader": "0.0.4",
      "moment": "^2.9.0",
      "node-uuid": "^1.4.2",
      "normalize.css": "^3.0.2",
      "object-assign": "^1.0.0",
      "ogg.js": "^0.1.0",
      "promise": "^6.1.0",
      "react": "^0.14.5",
      "react-bootstrap": "^0.21.2",
      "react-dom": "^0.14.5",
      "react-router": "^2.3.0",
      "react-tools": "^0.12.2",
      "scriptjs": "^2.5.8",
      "socket.io-client": "^1.4.5",
      "tunajs": "^0.4.5",
      "velocity-animate": "^1.2.1",
      "vorbis.js": "^0.1.1",
      "web-audio-daw": "^2.3.1"
    }
  }
  </code></pre>
  
  <p>i created a .babelrc file as well (manually in the root where webpack.config.js is)</p>
  
  <pre><code>{
    "presets": ["es2015", "stage-0"],
    "plugins": ["transform-runtime"],
  }
  </code></pre>
  
  <p>I am new in ReactJs so i am not having a good grasp on the requirements of such. Please help! Thanks</p>