Node Webpack not recognizing “Import”

1
votes

So I'm new to Node and Webpack, and I'm having trouble getting my project to compile correctly. Every time I load it into the browser I get the error: Uncaught SyntaxError: Unexpected token import. Here's a copy of my webpack.config.js file:

webpack.config.js:

var path = require('path');
var webpack = require('webpack');

var loaders = [
  {
    "test": /\.js?$/,
    "exclude": /node_modules/,
    "include": ["/js","/src", "/build"],
    "loader": "babel",
    "query": {
      "presets": [
        "es2015",
        "react",
        "stage-0"
      ],
      "plugins": []
    }
  }
];

module.exports = {
  devtool: 'eval-source-map',
  entry: path.resolve('js', 'main.js'),
  output: {
    path: path.resolve('build'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [],
  module: {
    loaders: loaders
  }
};

And here's a copy of my main.js file:

main.js

import React from 'react';
import {render} from 'react-dom';

And finally, here's a list of my installed node packages:

  • babel-core
  • babel-loader
  • babel-preset-es2015
  • babel-preset-react
  • babel-preset-stage-0
  • babelify
  • react
  • react-dom
  • webpack
  • webpack-dev-server

Does anyone know what I'm doing wrong? Thanks for your help!

1
javascriptnode.jsreactjsnpmwebpack
are you running webpack / webpack-dev-server in your terminal? – Kannaj
@kunkka Yeah, I'm actually not using the server, but yes. I'm just building out from my terminal. – Chris Patty
That "include": ["/js","/src", "/build"] looks suspicious. Could you try replacing those with absolute paths (i.e., path.join(__dirname, 'js') etc.)? – Juho Vepsäläinen
@bebraw Thanks for the comment, it doesn't appear to have helped however... :( – Chris Patty
Ok. There's not much else I can say without having anything to run. :( – Juho Vepsäläinen

1 Answers

0
votes

The exclude and include settings expect either a RegExp, an absolute path or an array of these. Your example sets the include property to an array of strings. What you need instead is an array of RegExp:

include: [/.js?$/, /src/, /build/]

The first parameter matches a us file and the latter two match the src and build folders respectively.

Notice how I've omitted the speech marks around the object properties. In addition I'd also just nest the loader contents within module.exports instead of separating it out but for the sake of argument I shall edit in situ:

var loaders = [
  {
    test: /\.js?$/,
    exclude: /node_modules/,
    include: ["/.js?&/","/src/", "/build/"],
    loader: "babel",
    query: {
      presets: [
        "es2015",
        "react",
        "stage-0"
      ],
      plugins: []
    }
  }
];

module.exports = {
  devtool: 'eval-source-map',
  entry: path.resolve('js', 'main.js'),
  output: {
    path: path.resolve('build'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [],
  module: {
    loaders: loaders
  }
};