React dynamic import() syntax not working

Question

I am trying to import component using import(). It is giving me error.

I am using react-loadable I tried with react-import package as well but no luck

I tried with below code:

import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import './App.scss';

const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;


// Containers
const DefaultLayout = Loadable({
  loader: () => import('./containers/DefaultLayout'),
  loading
});

Module build failed: SyntaxError: ...../resources/assets/js/src/App.js: Unexpected token, expected { (5:7)

Any help would be appreciated

Check whether you have babel-loader and the dependencies installed, it can be the issue. — Shubham
– Shubham, Commented Dec 12, 2018 at 18:00
require() does work but now other react syntax is having an issue like const loading = () => .. is not valid syntax. @AbhishekKumawat I will chek other alternatives. — Yash
– Yash, Commented Dec 12, 2018 at 18:16

Eric Bishard · Accepted Answer · 2019-03-18 14:19:23Z

1

I have a custom Webpack/Babel config for my React application, in my situation I needed to install:

npm i @babel/plugin-syntax-dynamic-import

And then I needed to add one line to my package.json file under "babel" > "plugins":

"babel": {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
},

answered Mar 18, 2019 at 14:19

Eric Bishard

5,3817 gold badges54 silver badges76 bronze badges

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

Comments

Michael Abeln · Accepted Answer · 2018-12-12 20:34:04Z

0

You need to add support for the dynamic import syntax.

Babel has a plugin for this called @babel/plugin-syntax-dynamic-import
https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

Install the plugin with:
yarn add -D @babel/plugin-syntax-dynamic-import -D
or
npm install --save-dev @babel/plugin-syntax-dynamic-import

Then:
The Babel recommendation is to add the plugin to your .babelrc file like:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

answered Dec 12, 2018 at 20:34

Michael Abeln

2,58713 silver badges21 bronze badges

Collectives™ on Stack Overflow

React dynamic import() syntax not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related