Unexpected token when lazy loading components

Question

I'm attempting to refactor a growing React App to use lazy loading. Taking the following as an example:

import React, { Component } from 'react'
import { render } from 'react-dom'
import Loadable from 'react-loadable';

const Orders = Loadable({
    loader: () => import('./Orders'),
    loading() {
        return <div>Loading...</div>
    }
});

My webpack compile always fails with:

Module build failed: SyntaxError: Unexpected token
...
> 24 |   loader: () => import('./Orders'),

It's clearly the import that is choking the code, but I don't understand why.

My .babelrc file looks like this:

{
  "presets": ["env", "react"]
}

The import(...) syntax is Stage 3, are you sure you have the necessary options/plugins for it to work in your setup? — T.J. Crowder
– T.J. Crowder, Commented Apr 28, 2018 at 11:16

timstermatic · Accepted Answer · 2018-04-28 17:41:31Z

13

So following up on T.J. Crowder's comment to my original question I found the babel dynamic import plugin

Installing this with yarn:

yarn add babel-plugin-syntax-dynamic-import -dev

Then adding it to my .babelrc, thus:

{
    "presets": ["env", "react"],
    "plugins": ["syntax-dynamic-import"]
}

fixed the Unexpected token issue.

answered Apr 28, 2018 at 17:41

timstermatic

1,7401 gold badge14 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

angelod1as Over a year ago

yarn save dev function is used adding a -D at the end of the line, not -dev

Collectives™ on Stack Overflow

Unexpected token when lazy loading components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related