Getting error when i am trying to use constant when importing in React.JS

Question

I am working on react, when i am trying to use const app_url i am getting error, in this line i am getting error import MobileEsp from app_url+'/js/mdetect.js'; it is because of app_url, here is my full code of it, can anyone please help me to resolve this issue ?

Error :

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /var/www/minimal-react-webpack-babel-setup/src/App.js: Unexpected token (6:22)

Code

import React from 'react';

const app_url = 'https://*******.com/';

import $ from "jquery";
import MobileEsp from app_url+'/js/mdetect.js'; 

//const App = ({ title }) =>

class App extends React.Component {

  componentDidMount() {
    if (!MobileEsp.DetectTierIphone() && !MobileEsp.DetectTierTablet()) {

      var LinkDownloadAppMac1 = "*****";
      var LinkDownloadAppWin1 = "******";
      switch (navigator.platform) {
        case 'MacIntel':
          $('#menu-download-link').attr('href', LinkDownloadAppMac1);
          break;
        default:
          $('#menu-download-link').attr('href', LinkDownloadAppWin1);
          break;

      }
    }
}

In app_url you have a slash at the end and when you are importing MobileEsp you are adding another slash at the beginning '/js/mdetect.js'. Also, I don't think this is the correct way to import. — Ramesh Reddy
– Ramesh Reddy, Commented Dec 27, 2019 at 6:35
the import should always have to be at the top , unless you are dynamically importing, and use ES6 string literal, look at @wentjun answer — 0xAnon
– 0xAnon, Commented Dec 27, 2019 at 6:40

wentjun · Accepted Answer · 2019-12-27 06:39:06Z

3

I don't think this is a legal syntax. even in modern JavaScript/ES6 JavaScript and beyond. This is because JavaScript dependency imports have to be statically resolved.

However, you can dynamically import the dependency within your component.

For instance, you can import it within your ComponentDidMount lifecycle hook.

async ComponentDidMount() {
  const appUrl = 'https://*******.com/';
  const MobileEsp = await import(`${appUrl}/js/mdetect.js`);
   // do the rest here
}

edited Dec 27, 2019 at 6:39

answered Dec 27, 2019 at 6:36

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

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

Collectives™ on Stack Overflow

Getting error when i am trying to use constant when importing in React.JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related