Home » Javascript » javascript – Npm ES Module package do not work with Express / Babel – Stack Overflow

javascript – Npm ES Module package do not work with Express / Babel – Stack Overflow

Posted by: admin February 20, 2020 Leave a comment

Questions:

First, all the code are available on this repository to easily try it. (and the package is published into npm so can be used as test)

I’m trying to make this simple NPM ESModule package works backwards with Nodejs CommonJS + babel.

1- The package

package.json

{
  "name": "test-es6-module-npm-package",
  "version": "0.1.0",
  "description": "Text NPM package ESModule",
  "main": "src/index.js",
  "type": "module",
  "author": "ArthyFiciel"
}

src/index.js

export const sayHello = (name) => {
  console.log(`[Npm module package]: Hello ${name}`);
};

Ps: This package is published to npm and can be used with npm i test-es6-module-npm-package and import { sayHello } from 'test-es6-module-npm-package'

2- An Express Module Project to test (1) works fine (and it does)

package.json

{
  "name": "tet-es6-express-module",
  "version": "0.1.0",
  "description": "",
  "main": "src/index.js",
  "type": "module",
  "scripts": {
    "start": "node --experimental-modules --experimental-json-modules src/index.js"
  },
  "author": "Arthy",
  "dependencies": {
    "test-es6-module-npm-package": "^0.1.0",
    "express": "^4.16.4"
  }
}

src/index.js

import express from 'express';

import { sayHello } from 'test-es6-module-npm-package';

const PORT = process.env.PORT || 7000;
const app = express();

app.listen(PORT, async () => {
  sayHello(`I'm server on port ${PORT}`);
});

Running npm start return:

ExperimenalWarning: The ESM module loader is experimental.
[Npm module package]: Hello I'm server on port 7000

PROBLEM START HERE:

3- Make it works with CommonJS express + babel

Okay.. now I have another express running using CommonJS and Babel in order to use ES6 import/..:

package.json with Babel settings (Linking from Github to avoid big files)

src/index.js

import express from 'express'; // Use import

const PORT = process.env.PORT || 7000;
const app = express();

app.listen(PORT, async () => {
  console.log(`I'm server on port ${PORT}`);
});

4- THE ERROR. 3 + import 1

Now, when I try to implement test-es6-module-npm-package into the project (3):

package.json

Same as 3 but with test-es6-module-npm-package as dependencies.

src/index,js

import express from 'express';

import { sayHello } from 'test-es6-module-npm-package'; // <<< THIS CAUSING ERROR

const PORT = process.env.PORT || 7000;
const app = express();

app.listen(PORT, async () => {
  sayHello(`I'm server on port ${PORT}`);
});

But now when I try to run it I got an error:

/test-es6-module/4-commonjs-express-with-babel-and-esm/node_modules/test-es6-module-npm-package/src/index.js:1
export const sayHello = (name) => {
^^^^^^

SyntaxError: Unexpected token 'export'
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/arthyficiel/Dev/GrilledCode/StackOverflow/test-es6-module/4-commonjs-express-with-babel-and-esm/dist/index.js:11:32)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)

Node version v12.14.0

NPM version v6.13.4

Answers: