Search code examples
javascriptlodashbabeljs

Lodash or any import causing Uncaught SyntaxError: Unexpected token import

What I'm doing: I'm writing a small JavaScript project using Three.JS. As I need to make some advanced operations on arrays I wanted to include lodash.

What is wrong: Whenever I write import _ from 'lodash'; I reveice error saying Uncaught SyntaxError: Unexpected token import. I'm using babel but no webpack since it's really easy JavaScript only project.

How can I fix it? My index.html file:

<!DOCTYPE html>
<html lang='en'>

<head>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <script src='../libs/three.js'></script>
    <script src='../libs/three.min.js'></script>
    <script src='../libs/PointerLockControls.js'></script>
    <script src="../libs/lodash.js"></script>
</head>

<body>
<div id='container'></div>
<div id="blocker">
    <div id="instructions">
        <strong>Click to look!</strong>
    </div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>

</html>

package.json

{
  "dependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0"
  },
  "devDependencies": {
    "babel-plugin-lodash": "^3.3.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "lodash": "^4.17.4"
  }
}

.babelrc

{
  "presets": ["es2015", "stage-2"]
}

The same error is thrown if I try to import anything into main.js - lodash or even my own function from another file. You may notice that lodash is in package.json and in ../lib/lodash.js. Trying to solve the issue I installed it once with yarn and downloaded the code manually the second time.

Solution

  • AFAIK, you can do import only in node.js scripts on your server. But on frontend you should include them like you did before (<script src="..."></script>) and start using it without any import statements.