webpacker: "Unexpected token import" after successful compilation

Hi @gauravtiwari @dhh!

First of all thanks for this gem 😃

Hope you can help me with my problem:

I’m getting an “Unexpected token import” on my browser after webpack successfully compiles everything down. Haven’t been able to trace back the problem even after a clean reinstall and restart of my project. I am trying to implement a project that I previously created using React-Boilerplate as as a base.

Here’s my webpack log:

16:48:41 webpacker.1 | Hash: 1d36acb323e794b2c6b5                                                           
16:48:41 web.1       | Started GET "/" for ::1 at 2017-07-05 16:48:41 -0500
16:48:41 webpacker.1 | Version: webpack 3.0.0
16:48:41 web.1       | Processing by StaticController#index as HTML
16:48:41 webpacker.1 | Time: 2004ms
16:48:41 web.1       |   Rendering static/index.html.erb within layouts/application
16:48:41 webpacker.1 |          Asset       Size  Chunks                    Chunk Names
16:48:41 web.1       |   Rendered static/index.html.erb within layouts/application (4.8ms)
16:48:41 webpacker.1 |  manifest.json  720 bytes          [emitted]         
16:48:41 webpacker.1 |           1.js     376 kB       1  [emitted]  [big]  
16:48:41 webpacker.1 | application.js     5.3 MB       5  [emitted]  [big]  application
16:48:41 webpacker.1 |  [417] ./app/javascript/packs/application.js 7.11 kB {5} [built]
16:48:41 webpacker.1 |  [704] ./node_modules/react-router-dom/es/Link.js 3.82 kB {5} [built]
16:48:41 webpacker.1 |  [705] ./node_modules/react-router-dom/es/index.js 925 bytes {5} [built]
16:48:41 webpacker.1 |  [706] ./node_modules/react-router-dom/es/BrowserRouter.js 2.12 kB {5} [built]
16:48:41 webpacker.1 |  [708] ./node_modules/react-router-dom/es/HashRouter.js 2.1 kB {5} [built]
16:48:41 webpacker.1 |  [710] ./node_modules/react-router-dom/es/MemoryRouter.js 55 bytes {5} [built]
16:48:41 web.1       | Completed 200 OK in 51ms (Views: 48.0ms)
16:48:41 webpacker.1 |  [711] ./node_modules/react-router-dom/es/NavLink.js 2.48 kB {5} [built]
16:48:41 web.1       | 
16:48:41 webpacker.1 |  [712] ./node_modules/react-router-dom/es/Prompt.js 49 bytes {5} [built]
16:48:41 web.1       | 
16:48:41 webpacker.1 |  [713] ./node_modules/react-router-dom/es/Redirect.js 51 bytes {5} [built]
16:48:41 webpacker.1 |  [714] ./node_modules/react-router-dom/es/Route.js 48 bytes {5} [built]
16:48:41 webpacker.1 |  [715] ./node_modules/react-router-dom/es/Router.js 49 bytes {5} [built]
16:48:41 webpacker.1 |  [716] ./node_modules/react-router-dom/es/StaticRouter.js 55 bytes {5} [built]
16:48:41 webpacker.1 |  [717] ./node_modules/react-router-dom/es/Switch.js 49 bytes {5} [built]
16:48:41 webpacker.1 |  [718] ./node_modules/react-router-dom/es/matchPath.js 52 bytes {5} [built]
16:48:41 webpacker.1 |  [719] ./node_modules/react-router-dom/es/withRouter.js 53 bytes {5} [built]
16:48:41 webpacker.1 |     + 692 hidden modules
16:48:41 webpacker.1 | webpack: Compiled successfully.

In my browser:

Uncaught SyntaxError: Unexpected token import
    at Object.<anonymous> (application.js:6600)
    at __webpack_require__ (application.js:50)
    at eval (webpack-internal:///417:191)
    at Object.<anonymous> (application.js:5028)
    at __webpack_require__ (application.js:50)
    at Object.<anonymous> (application.js:5015)
    at __webpack_require__ (application.js:50)
    at application.js:145
    at application.js:148

The pack I’m trying to load:

/**
 * app.js
 *
 * This is the entry file for the application, only setup and boilerplate
 * code.
 */

// Needed for redux-saga es6 generator support
import 'babel-polyfill';

// Import all the third party stuff
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyRouterMiddleware, Router } from 'react-router';
import { BrowserRouter } from 'react-router-dom'
import { syncHistoryWithStore } from 'react-router-redux';
// import 'sanitize.css/sanitize.css';

// Import root app
import App from '../Bot/containers/App';

// Import selector for `syncHistoryWithStore`
import { makeSelectLocationState } from '../Bot/containers/App/selectors';

// Load the favicon, the manifest.json file and the .htaccess file
/* eslint-disable import/no-unresolved, import/extensions */
import '!file-loader?name=[name].[ext]!../Bot/favicon.ico';
import '!file-loader?name=[name].[ext]!../Bot/manifest.json';
import 'file-loader?name=[name].[ext]!../Bot/.htaccess';
/* eslint-enable import/no-unresolved, import/extensions */

import configureStore from '../Bot/store';

// Import i18n messages
import { translationMessages } from '../Bot/i18n';

// Import CSS reset and Global Styles
import '../Bot/global-styles';

// Import root routes
import createRoutes from '../Bot/routes';

// Create redux store with history
// this uses the singleton browserHistory provided by react-router
// Optionally, this could be changed to leverage a created history
// e.g. `const browserHistory = useRouterHistory(createBrowserHistory)();`
const initialState = {};
const store = configureStore(initialState, BrowserRouter);

// Sync history and store, as the react-router-redux reducer
// is under the non-default key ("routing"), selectLocationState
// must be provided for resolving how to retrieve the "route" in the state
const history = syncHistoryWithStore(BrowserRouter, store, {
  selectLocationState: makeSelectLocationState(),
});

// Set up the router, wrapping all Routes in the App component
const rootRoute = {
  component: App,
  childRoutes: createRoutes(store),
};

const render = () => {
  ReactDOM.render(
    <Provider store={store}>
      <Router
        history={history}
        routes={rootRoute}
      />
    </Provider>,
    document.getElementById('app')
  );
};

// Hot reloadable translation json files
if (module.hot) {
  // modules.hot.accept does not accept dynamic dependencies,
  // have to be constants at compile-time
  module.hot.accept('../Bot/i18n', () => {
    render(translationMessages);
  });
}

// Chunked polyfill for browsers without Intl support
if (!window.Intl) {
  (new Promise((resolve) => {
    resolve(import('intl'));
  }))
    .then(() => Promise.all([
      import('intl/locale-data/jsonp/en.js'),
    ]))
    .then(() => render(translationMessages))
    .catch((err) => {
      throw err;
    });
} else {
  render(translationMessages);
}

// Install ServiceWorker and AppCache in the end since
// it's not most important operation and if main code fails,
// we do not want it installed
if (process.env.NODE_ENV === 'production') {
  require('offline-plugin/runtime').install(); // eslint-disable-line global-require
}

My .babelrc:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}