npx webpack Unexpected token :

Question

I am trying to use Webpack for the first time with Node and Babel (this is my first time using Babel as well) on Windows 10. I think I have everything configured properly, but it's giving me a cryptic error: The same thing happens if I do npx webpack --exec bable-node.

In everything I've read about this, it gives a line number. I'm not sure what's the issue.

I have all of the files I thought were related to Node in a folder called "node", and all the other files in a folder called "src". I don't know if this is causing the issue. Here is the folder structure:

/node
    /config
    /node_modules
    .babelrc
    master-updated.sh
    package-lock.json
    package.json
    server2.js
    webpack.config.js
/src
    /model (this is has a bunch of js files, but I removed the references to them for now)
    /public
        /html
        /srcipts
        /stylesheets
            /css
            /scss
        /vue
.gitignore

master-updated.sh is a shell script for responding to a GitHub webhook.

Here is the beginning of server2.js:

'use strict';

process.env.NODE_CONFIG_DIR = './node/config';

const config = require('config'),
    babel = require('babel-core'),

    ejs = require('ejs'),

    util = require('util'),

    express = require('express'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    moment = require('moment'),
    plaid = require('plaid'),
    mariadb = require('mariadb'),

    fs = require('fs'),
    http = require('http'),
    https = require('https'),

    session = require('express-session'),

    exec = require('child_process').exec;

const GOOGLE_AUTH_CLIENT_ID = '<REDACTED>';

const { OAuth2Client } = require('google-auth-library');
const googleAuthClient = new OAuth2Client(GOOGLE_AUTH_CLIENT_ID);

const APP_PORT = config.APP_PORT;

Here is my webpack.config.js file:


module.exports = {
    target: 'node',
    entry: {
        app: ['./server2.js']
    },
    output: {
        filename: 'server.js',
        path: path.resolve(__dirname, 'test')
    },
    module: {
        loaders: [
            test: '/\.js$/',
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ["@babel/preset-env"]
            }
        ]
    }
}

Here is .babelrc:

{"presets": ["@babel/preset-env"]}

And here is package.json:

{
  "name": "sage-savings",
  "version": "0.0.1",
  "description": "An app for easy budgeting.",
  "main": "server2.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config node/webpack.config.js",
    "start": "node node/server2.js"
  },
  "author": "Dakota Dalton",
  "repository": "https://github.com/1silvertiger/Sage",
  "license": "ISC",
  "dependencies": {
    "@types/express": "^4.16.1",
    "aws-sdk": "^2.397.0",
    "body-parser": "^1.18.3",
    "config": "^3.0.1",
    "cors": "^2.8.5",
    "ejs": "^2.5.9",
    "express": "4.16.x",
    "express-session": "^1.15.6",
    "google-auth-library": "^3.0.1",
    "mariadb": "^2.0.3",
    "moment": "^2.22.2",
    "mysql": "^2.16.0",
    "plaid": "2.x.x"
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "ajv": "^6.10.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "typescript": "^3.3.3333",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

Please provide the whole error including stack trace. The error message alone does not tell us enough. — sdgluck, Mar 14 '19 at 15:47
The image you have shared only contains an error _message_. It is very likely the error also has a _stack trace_ beneath it (a bunch of lines with filenames). This is what we are after: the [stack trace](https://stackoverflow.com/questions/3988788/what-is-a-stack-trace-and-how-can-i-use-it-to-debug-my-application-errors). — sdgluck, Mar 14 '19 at 15:58
Unfortunately, there isn't any stacktrace. That's what makes it so cryptic and frustrating. I'll update the snip to show you. — silvertiger, Mar 14 '19 at 16:00

sdgluck · Accepted Answer · 2019-03-14T16:08:22.630

1

These syntax problems are easily identified if you use an IDE which has syntax highlighting, for example VS Code. All I did was copy your config into a file and load it into VS Code.

You are incorrectly closing the regular expression used for exclude:
```
exclude: /node_modules\,
```
You must use a forward slash instead of a back slash:
```
exclude: /node_modules/
```

You also need to wrap your loader in an object literal:

loaders: [
    { // <= wrap in object literal
        test: '/\.js$/',
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ["@babel/preset-env"]
        }
    }
]

edited Mar 14 '19 at 16:08

answered Mar 14 '19 at 15:48

sdgluck

24,894
8
75
90

@silvertiger Fair enough - you could re-enable it temporarily to catch these problems next time. I'll leave that part of the answer for others too. – sdgluck Mar 14 '19 at 16:18
I'm going to re-enable it as soon as I remember how to find it. – silvertiger Mar 14 '19 at 16:37

npx webpack Unexpected token :

1 Answers1