Module parse failed: Unexpected token (83:4) webpack 3

[tiagoaramos]

how to reproduce

npm init mkdir src dist src/ touch webpack.config.js

var webpack = require('webpack');

var config = {
  context: __dirname + '/src', // `__dirname` is root of project and `/src` is source
  entry: {
    app: './index.js',
  },
  output: {
    path: __dirname + '/dist', // `/dist` is the destination
    filename: 'bundle.js', // bundle created by webpack it will contain all our app logic. we will link to this .js file from our html page.
  },
  module: {
    rules: [
      {
        test: /\.js$/, // rule for .js files
        exclude: /node_modules/,
        loader: "babel-loader" // apply this loader for js files
      },
      {
        test: /\.css$/,
        use: [
          'style-loader', // the order is important. it executes in reverse order !
          'css-loader' // this will load first !
        ]
      }
    ]
  }
};
module.exports = config;

npm install -D webpack@3 webpack-dev-server@2 npm i idb@6.1.2

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "build:prod": "webpack -p",
    "start": "node server.js",
    "dev": "webpack-dev-server"
  },

touch src/index.js

import * as idb from 'idb'

const dataBasename = 'database'

if (process.env.NODE_ENV == 'test') {
idb.deleteDB(dataBasename)
}
idb.openDB(dataBasename, 1, {
    upgrade (db, oldVersion, newVersion, transaction) {
        console.log('configDB - OLd Verison ' + oldVersion)
        console.log('configDB - New Verison ' + newVersion)
        switch (oldVersion) {
            case 0:
                dbPromise.createObjectStore('user', {
                    keyPath: 'id',
                    autoIncrement: true
                })
                dbMetaUser.createIndex('user', 'user', {unique: false})
        }
    }
})

npm run build

> webpack3-idb@1.0.0 build
> webpack

Hash: ec7c04c6760b7fb1adec
Version: webpack 3.12.0
Time: 528ms
    Asset     Size  Chunks             Chunk Names
bundle.js  9.51 kB       0  [emitted]  app
   [0] ./index.js 635 bytes {0} [built]
    + 2 hidden modules

ERROR in ../node_modules/idb/build/esm/index.js
Module parse failed: Unexpected token (83:4)
You may need an appropriate loader to handle this file type.
| }
| replaceTraps((oldTraps) => ({
|     ...oldTraps,
|     get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
|     has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop),
 @ ./index.js 1:0-27

[jakearchibald]

I get…

ERROR in Entry module not found: Error: Can't resolve 'babel-loader'

…which seems unrelated to this project.

I'm happy to take a look at this issue, but please provide a full reproduction of the issue (such as something I can check out from github, or a gist, or codesandbox).

I'll reopen if one is provided.

[Jiyang00]

I have the same problem. And I use react-cli

[jakearchibald]

I'm happy to take a look at this issue, but please provide a full reproduction of the issue (such as something I can check out from github, or a gist, or codesandbox).

I'll reopen if one is provided