2

I'm using webpack and babel to create an app using ES6 syntax. The problem is that I'm not able to import express.

(Note: I'm able to import (and require) node module "path", didn't check any more)

Here's my app:

import express from 'express';

Even the below results in same error:

var app = require('express');

Here's my webpack.config.js

module.exports = {
    entry: './src/app.js',
    output: {
        path: 'builds',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js/,
                loader: 'babel',
                include: __dirname + '/src',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            }
        ],
    }
};

I've tried the following as well:

exclude: [/node_modules/],
exclude: __dirname + '/node_modules',

But I still keep getting a very big stack trace which starts with:

WARNING in ./~/express/lib/view.js
Critical dependencies:
78:29-56 the request of a dependency is an expression
 @ ./~/express/lib/view.js 78:29-56

ERROR in ./~/express/lib/request.js
Module not found: Error: Cannot resolve module 'net' in /home/projects/node_modules/express/lib
 @ ./~/express/lib/request.js 18:11-25

ERROR in ./~/express/lib/view.js
Module not found: Error: Cannot resolve module 'fs' in /home/projects/node_modules/express/lib
 @ ./~/express/lib/view.js 18:9-22

And ends with 

 @ ./~/mime/mime.js 87:12-35

ERROR in ./~/mime-db/db.json
Module parse failed: /home/projects/node_modules/mime-db/db.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "application/1d-interleaved-parityfec": {
|     "source": "iana"
|   },
 @ ./~/mime-db/index.js 11:17-37

I guess this is because node_modules folder is not being ignored?

Also this is my package.json if maybe module versions are a problem:

{
  "name": "testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "express": "^4.13.4"
  },
  "devDependencies": {
    "babel-core": "^6.6.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "webpack": "^1.12.14"
  }
}
Kartik Anand
  • 4,513
  • 5
  • 41
  • 72

2 Answers2

0

This can be fixed by using json-loader:

npm install json-loader --save-dev

And in webpack.config add this loader:

{ test: /\.json$/, loader: "json-loader" }
Michael Plakhov
  • 2,292
  • 2
  • 19
  • 21
  • Why do I need to add another loader to fix a problem with some another loader? Why can't I just ignore node_modules? – Kartik Anand Mar 03 '16 at 12:57
  • I did not dig in this issue too deep, just fixed for myself. Looks like webpack finds mime/db.json and cannot deal with this file type. – Michael Plakhov Mar 03 '16 at 13:12
  • Also you will have issues with node.js modules like "net", "fs" etc if you will not specify target: 'node' in webpack config. Some people creates separated config for frontend and backend. – Michael Plakhov Mar 03 '16 at 13:15
  • I guess you thought I want to bundle express in my app. I don't want to do it, I just want to run babel transpiler on it. – Kartik Anand Mar 03 '16 at 15:41
0

Please, look at this answer. SudoPlz - shared working example. Looks like the method Michael Plakhov suggested.

Community
  • 1
  • 1
Shulyk Volodymyr
  • 767
  • 6
  • 11
  • I don't want to bundle express into my code like in the answer. I just want to run babel transpiler on it. That's it. No node modules or bundling or anything. – Kartik Anand Mar 03 '16 at 15:40
  • If you want to just transpile, why not have an npm script specifically to transpile your express code? Webpack is for packaging stuff up for the front-end. – Sgnl May 14 '16 at 22:03
  • this answer works for me.. as question says import express with webpack.. but it also packaged node code on the browser – Alexander Jan 17 '17 at 04:21