Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Lodash-es is not working with mocha and babel

I created a simple workspace to demonstrate the problem:

.babelrc:

{
  "presets": ["es2015"]
}

package.json

{
  "name": "mocha-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha --compilers js:babel-register"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.26.0",
    "lodash-es": "^4.17.4",
    "mocha": "^3.5.3"
  }
}

test/index.test.js

import {describe, it} from "mocha";
import {cloneDeep} from "lodash-es";

describe("Index", () => {
    it("should work", () => {
        // Init
        const a = {a: 1};
        const b = cloneDeep(a);

        // Action

        // Test
    });
});

And the error I cannot fix:

> [email protected] test C:\...\mocha-demo
> mocha --compilers js:babel-register "test"

C:\...\mocha-demo\node_modules\lodash-es\lodash.js:10
export { default as add } from './add.js';
^^^^^^

SyntaxError: Unexpected token export
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\...\mocha-demo\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:/.../mocha-demo/test/index.test.js:2:1)
    at Module._compile (module.js:569:30)
    at loader (C:\...\mocha-demo\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (C:\...\mocha-demo\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at C:\...\mocha-demo\node_modules\mocha\lib\mocha.js:231:27
    at Array.forEach (native)
    at Mocha.loadFiles (C:\...\mocha-demo\node_modules\mocha\lib\mocha.js:228:14)
    at Mocha.run (C:\...\mocha-demo\node_modules\mocha\lib\mocha.js:514:10)
    at Object.<anonymous> (C:\...\mocha-demo\node_modules\mocha\bin\_mocha:480:18)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3

Process finished with exit code 1

What should I do, to fix this problem? I am using lodash-es, because tree-shaking is better with this.

like image 537
Gergely Fehérvári Avatar asked Sep 12 '17 11:09

Gergely Fehérvári


People also ask

What is difference between lodash and lodash-es?

The lodash package needs to be able to support all browsers, it uses es5 modules. The lodash-es package uses es6 modules, allowing for it to be tree shaked by default in webpack v4. brings in the entire lodash file, all 70K.

Does lodash support Treeshaking?

Unfortunately, lodash-es still exports everything as a single object as the default ES module export, which means nothing is tree shakable. The bundle size remains at 87 KiB. The fix is to use a different import syntax.

How big is lodash?

The full size of Lodash is ~75kb, the way you import Lodash functions can make a big difference in your bundle size.


1 Answers

lodash-es is in esm module style while our common node module style is commonjs. You should use lodash instead.

Otherwise, following these steps to make it works:

  • Install esm:
npm install --save-dev esm
  • Run esm against mocha:
mocha -r esm test/**/*.test.js
like image 105
Clite Tailor Avatar answered Oct 19 '22 14:10

Clite Tailor