0

I am working on a React project and am having trouble getting webpack.config.js to work, I keep getting SyntaxError: Unexpected token import on a simple import statement: import path from "path" I looked at other stackoverflow answers and have modified my configs accordingly but nothing helped so far

webpack.config.js

import path from "path";

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve("dist"),
        filename: "index_bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                query: {
                    babelrc: false,
                    presets: [
                        "stage-0",
                        "react",
                        ["es2015", { "modules": false }],
                        ["env", {
                            "targets":
                                { "uglify": false }
                            }
                        ]
                    ]
                }
            }
        ]
    }
};

.babelrc

{
  "presets": ["es2015"]
}

Error am getting:

(function (exports, require, module, __filename, __dirname) { import path from "path";
                                                              ^^^^^^
SyntaxError: Unexpected token import

Experience with webpack-babel tells me this is something really silly, but I have been pulling my hair out for last couple hours and cant figure.

user988544
  • 556
  • 1
  • 11
  • 32
  • Which version of webpack are you using? Did you actually install `babel-presets?` I see it in the config but it is intalled? `npm install --save-dev babel-preset-es2015` – pmiranda Jun 21 '17 at 15:58

1 Answers1

2

Babel does not transpile the config files, just code in the entry points. You have to do this old school.

const path = require("path");
Garry Taylor
  • 940
  • 8
  • 19
  • I am pretty sure I have seen `webpack.config.js` files that use `import` instead of the old `require` how do they transpile their code then? – user988544 Jun 21 '17 at 18:25
  • 2
    @user988544 https://stackoverflow.com/questions/31903692/how-can-i-use-es6-in-webpack-config-js – robertklep Jun 21 '17 at 19:07