"Unexpected token import" after successful compilation

[CharlieIGG]

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
      }
    ]
  ]
}

[gauravtiwari]

@CharlieIGG Are you sure it's rendering compiled application.js? Are you using ./bin/webpack-dev-server or ./bin/webpack?

[gauravtiwari]

Perhaps run this ./bin/webpack-dev-server in separate terminal tab and then rails server in another. Then, open up the browser and see if it's still same. I am suspecting it's using uncompiled pack in your case - may be you copied it over earlier to packs directory inside public/packs?

Or the other way around. You haven't change any settings inside webpacker.yml right?

[CharlieIGG]

Perhaps run this ./bin/webpack-dev-server in separate terminal tab and then rails server in another.

I'm running both simultaneously with Foreman, but I just tried them separately and still got the same result.

may be you copied it over earlier to packs directory inside public/packs? Or the other way around. You haven't change any settings inside webpacker.yml right?

None of these, haven't touched either.

Also I just realized that if I load the example 'hello_react' module instead of my react app it does load, even though that example uses 'import':

    <%= javascript_pack_tag 'hello_react' %>

It appears to be something related to my react app or the dependencies it has, but after hours of fiddling around I haven't been able to trace it. Any pointers of how I might be able to trace/debug this are super welcome @gauravtiwari. Thanks for all your help.

[gauravtiwari]

Could you paste your browser logs please? I mean the rendered HTML inside elements tab - see what url it's using. What you have inside public/packs? Could you please open up and check the compiled files?

[CharlieIGG]

Here's what's rendered:

<html>
   <head>
    ...
   </head>

   <body>
        <script src="http://0.0.0.0:8080/packs/bot.js"></script>
   </body>
</html>

What you have instead public/packs? Could you please open up and check the compiled files?

All I have inside public/packs is a manifest.json file which has the following content:

{
  ".htaccess": "http://0.0.0.0:8080/packs/.htaccess.bin",
  "0.js": "http://0.0.0.0:8080/packs/0.js",
  "1.js": "http://0.0.0.0:8080/packs/1.js",
  "2.js": "http://0.0.0.0:8080/packs/2.js",
  "3.js": "http://0.0.0.0:8080/packs/3.js",
  "4.js": "http://0.0.0.0:8080/packs/4.js",
  "bot.js": "http://0.0.0.0:8080/packs/bot.js",
  "favicon.ico": "http://0.0.0.0:8080/packs/favicon.ico",
  "hello_react.js": "http://0.0.0.0:8080/packs/hello_react.js",
  "linkIcon2.svg": "http://0.0.0.0:8080/packs/linkIcon2.svg",
  "manifest.json": "http://0.0.0.0:8080/packs/manifest.json",
  "refreshWhite.svg": "http://0.0.0.0:8080/packs/refreshWhite.svg",
  "sendWhite.svg": "http://0.0.0.0:8080/packs/sendWhite.svg"
}

Am I supposed to see the actual compiled files inside this folder?

[gauravtiwari]

Why you got .htaccess there? 😄 Webpack shouldn't compile that

Anyway, so looks like it compiles and renders correct file. Do you have import statements inside the bot.js file i.e. inside public/packs/bot.js?

[CharlieIGG]

Why you got .htaccess there? 😄 Webpack shouldn't compile that

The React-Boilerplate project does this, I just copied that over 😳

Do you have import statements inside the bot.js file i.e. inside public/packs/bot.js?

Yes I do, my logic was that if hello_react.jsx could use them and work fine, then my bot.jsshould work. Am I missing something here?

[CharlieIGG]

AHA! I just realized I cannot import relative path components in hello_react.jsxeither, I get the same error.

I'm confused here. How should I structure and communicate my files then? I have:
-app/
--javascript/
---Bot/ <----- All my react components live here
---packs/
----bot.js <----- I'm loading this via javascript_pack_tag, so I'd like to call my components here.
----hello_react.jsx

Thanks for helping this newbie @gauravtiwari !

[gauravtiwari]

@CharlieIGG You can do it like so:

import SomeComponent from '../Bot/some_component.js'

[CharlieIGG]

That's exactly what I'm doing (minus the file extension):

// 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, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';


// 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';
/* 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, browserHistory);

// 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(browserHistory, 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}
        render={
            // Scroll to top when going to a new page, imitating default browser
            // behaviour
            applyRouterMiddleware(useScroll())
          }
      />
    </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
}

[gauravtiwari]

@CharlieIGG Could you please check public/packs/bot.js file and see if it's compiled? or localhost:8080/packs/bot.js in browser and see what you get (if using dev-server)? I am unsure why the pack isn't compiled

[CharlieIGG]

public/packs/bot.js

No such file in public/packs, just the manifest.json

localhost:8080/packs/bot.js

Here the code does show up apparently compiled

[gauravtiwari]

@CharlieIGG Could you try in incognito mode please?

[CharlieIGG]

Yeah, same thing, also across different browsers.

The issue seems only limited to importing relative file paths from a file inside app/javascript/packs

[gauravtiwari]

If this file is compiled - localhost:8080/packs/bot.js then why there is error in the browser? You still getting the same import error?