4

I am using laravel for backend and ReactJS for the frontend. I tried to use the asyncComponent method for loading components when needed, to decrease load time. The issue is that I am getting an error in dynamic import below:

const asyncCheckout = asyncComponent(() => {
  return import('./containers/Checkout/Checkout');
});

I am getting error Unexpected token error on import keyword. I tried installing babel-plugin-syntax-dynamic-import but it still gives Unexpected token error. I am new to React and I would appreciate any help that can point me in the right direction. My .babelrc file has latest and react and env as presets. Thanks you.

My .babelrc file that is in project root:

{
  "presets": [
    "env"
  ],
  "plugins": ["transform-class-properties"]
}

Web pack config, from laravel mix:

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
 */

require('../src/index');
require(Mix.paths.mix());

/**
 * Just in case the user needs to hook into this point
 * in the build process, we'll make an announcement.
 */

Mix.dispatch('init', Mix);

/**
 * Now that we know which build tasks are required by the
 * user, we can dynamically create a configuration object
 * for Webpack. And that's all there is to it. Simple!
 */

let WebpackConfig = require('../src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

And my package.json file:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.17",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-env": "^1.6.1",
        "babel-preset-latest": "^6.24.1",
        "babel-preset-react": "^6.23.0",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "react": "^16.2.0",
        "react-dom": "^16.2.0"
    },
    "dependencies": {
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "react-bootstrap": "^0.31.5",
        "react-redux": "^5.0.6",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "react-social-login": "^3.4.2",
        "redux": "^3.7.2",
        "redux-thunk": "^2.2.0",
        "watch": "^1.0.2"
    }
}
Rashi Karanpuria
  • 1,605
  • 1
  • 11
  • 18
  • 1
    Did you configured the `babel-plugin-syntax-dynamic-import` plugin in babel? Can you share your .babelrc, webpack conf, ...? – keul Jan 14 '18 at 11:04
  • @LucaFabbri Added the code you need, and I just did npm install --save, I am not sure how to configure `babel-plugin-syntax-dynamic-import` – Rashi Karanpuria Jan 15 '18 at 17:59
  • 1
    It's documented here: https://babeljs.io/docs/plugins/syntax-dynamic-import/ You need to add also the "syntax-dynamic-import to you .babelrc `plugins` section. – keul Jan 15 '18 at 22:19
  • Thanks @LucaFabbri. – Rashi Karanpuria Jan 23 '18 at 12:22
  • Share answer if you solved propblem https://stackoverflow.com/questions/53669239/module-build-failed-syntaxerror-when-i-try-for-asynccomponent-in-laravel-reac – Dhruv Raval Dec 07 '18 at 12:19

1 Answers1

1

the best way i found to do a dynamic import is :)

use require() instead of import();

const HomeLazy = React.lazy(() => {
    return new Promise((resolve) => {
        setTimeout(() => resolve(require("./pages/home")), 300);
    });
});
Abdelhafid Mahmoudi
  • 81
  • 1
  • 2