title: Babel config in a MERN app
body: <p>I have given up at trying to learn rails. I'm now focusing my energy on trying to get started with node, using the MERN stack. I have done both Stephen Grider and Andrew Mead's udemy course as well as all of the code school js courses. I'm afraid I'm not off to a promising start.</p>
  
  <p>I'm stuck at getting my import statements to work. So far, I have tried to import files. For that I need babel. My package.json has:</p>
  
  <pre><code>"scripts": {
      "test": "mocha test/**/*-test.js --compilers js:babel-core/register --recursive",
      "start": "nodemon -w server.js server.js  --source-maps"
    },
    "author": "Ol",
    "license": "MIT",
    "dependencies": {
      "axios": "^0.16.1",
      "babel-cli": "^6.24.1",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-polyfill": "^6.13.0",
      "body-parser": "^1.17.1",
      "caniuse-api": "^2.0.0",
      "express": "^4.13.4",
      "lodash": "^4.17.4",
      "material-ui": "^0.18.0",
      "nodemon": "^1.11.0",
      "react": "^15.5.4",
      "react-dom": "^15.5.4",
      "react-promise": "^1.1.2",
      "react-redux": "^5.0.4",
      "react-router": "^4.1.1",
      "react-tap-event-plugin": "^2.0.1",
      "redux": "^3.6.0",
      "redux-devtools": "^3.4.0",
      "redux-form": "^6.7.0",
      "redux-thunk": "^2.2.0",
      "socket.io": "^2.0.1",
      "source-map-support": "^0.4.15"
    },
    "devDependencies": {
      "babel": "^6.23.0",
      "babel-core": "^6.24.1",
      "babel-loader": "^7.0.0",
      "babelify": "^7.3.0",
      "enzyme": "^2.8.2",
      "mocha": "^3.3.0",
      "react-addons-test-utils": "^15.5.1",
      "webpack": "^2.5.1"
    }
  }
  </code></pre>
  
  <p>My .babelrc has:</p>
  
  <pre><code>{
    "presets": ["react", "es2015"]
  }
  </code></pre>
  
  <p>My server.js has:</p>
  
  <pre><code>import express from 'express';
  import bodyParser from 'body-parser';
  import { MongoClient } from 'mongodb';
  import 'babel-polyfill';
  import SourceMapSupport from 'source-map-support';
  
  
  SourceMapSupport.install(); //to get line numbers with file refs rather than compiled code line numbers
  
  
  // const app = express();
  
  app.use(express.static('open'));
  app.use(bodyParser.json());
  
  app.listen(3000, function(){
    console.log('listening on 3000');
  });
  </code></pre>
  
  <p>My webpack.config.js has:</p>
  
  <pre><code>module :{
      rules:[{
        // use : 'babel-loader',
        loader: 'babel-loader',
        query :{
          presets:['react','es2015']
          // ,'es2017'
        },
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/
      }]
  </code></pre>
  
  <p>When I try to use npm start, I get an error with my import statements. It says:</p>
  
  <pre><code>{ import express from 'express';
                                                                ^^^^^^
  SyntaxError: Unexpected token import
      at createScript (vm.js:56:10)
      at Object.runInThisContext (vm.js:97:10)
      at Module._compile (module.js:542:28)
      at Object.Module._extensions..js (module.js:579:10)
      at Module.load (module.js:487:32)
      at tryModuleLoad (module.js:446:12)
      at Function.Module._load (module.js:438:3)
      at Module.runMain (module.js:604:10)
      at run (bootstrap_node.js:390:7)
      at startup (bootstrap_node.js:150:9)
  [nodemon] app crashed - waiting for file changes before starting...
  </code></pre>
  
  <p>Can anyone give me a clue on how to get babel setup to work with a node app. I noticed that even when I run npm install in my console, I don't get a node_modules folder in my app. I used yarn to add dependencies to package.json, but don't seem to have the ability to generate an node_modules folder.</p>
  
  <p><strong>Next attempt</strong></p>
  
  <p>I then tried npm init and then npm upgrade (even though I use yarn for adding modules).</p>
  
  <p>The output of npm upgrade is below, but I still don't end up with a node modules folder. I think the reason babel isn't working to recognise my import statements is because I don't have the module in my app. Does anyone know how to get a node modules file to be created in the setup? I thought that happened automatically.</p>
  
  <pre><code>npm update
  npm WARN deprecated isarray@2.0.1: Just use Array.isArray directly
  
  &gt; uws@0.14.5 install /Users/mlc/may/node_modules/uws
  &gt; node-gyp rebuild &gt; build_log.txt 2&gt;&amp;1 || exit 0
  
  - ms@0.7.3 node_modules/engine.io-client/node_modules/ms
  - debug@2.6.4 node_modules/engine.io-client/node_modules/debug
  - ms@0.7.3 node_modules/finalhandler/node_modules/ms
  - react-addons-create-fragment@15.5.4 node_modules/react-addons-create-fragment
  - react-addons-transition-group@15.5.2 node_modules/react-addons-transition-group
  - ms@0.7.3 node_modules/socket.io-client/node_modules/ms
  - debug@2.6.4 node_modules/socket.io-client/node_modules/debug
  - camelcase@1.2.1 node_modules/uglify-js/node_modules/camelcase
  - cliui@2.1.0 node_modules/uglify-js/node_modules/cliui
  cr@1.0.0 /Users/mlc/may
  ├── axios@0.16.2 
  ├── body-parser@1.17.2 
  ├── express@4.15.3 
  ├── material-ui@0.18.2 
  ├── mocha@3.4.2 
  ├── react-promise@1.1.3 
  ├── react-redux@5.0.5 
  ├── socket.io@2.0.2 
  └── webpack@2.6.1 
  </code></pre>