React Unexpected token with babel-loader

Question

I am using Webpack, Gulp and React to use a React app in my Jekyll static site. I am getting an unexpected token error on the React element:

Module parse failed: Unexpected token (8:4)
You may need an appropriate loader to handle this file type.
| window.mount = function(id, type) {
|   render(
|     <App type={type} />,
|     document.getElementById(id)
|   )

I have tried various methods and babel presets.

webpack.config.js

module.exports = {
  entry: {
    app: './webpack/app.js'
  },
  output: {
    path: __dirname + '/src/_assets/js',
    filename: 'app.js'
  },
  module: {
    rules: [{
      // I've tried node_modules/my-app as well
      include: __dirname + 'node_modules/my-app/src',
      test: /\.(js|jsx)$/,
      use: {
        loader: "babel-loader",
        options: {
          // I've tried several variations of this:
          presets: ["react", "env", "stage-0", "es2015", { targets: { node: true } }],
        }
      }
    }]
  }
};

Pertinent gulp code:

const webpack_stream = require('webpack-stream');
const webpack_config = require('./webpack.config.js');

// I have tried gulp-webpack and gulp ( no webpack ) with the babel-loader
gulp.task('app', function () {
  return webpack_stream(webpack_config).pipe(gulp.dest('src/_assets/js/'));
});

Can anyone see anything I am missing, have wrong, or are there some issues with versions/presets?

I have looked through the other similar questions and answers like this and this with no luck.

Edit 1:

If I change the webpack.config.js to use the babel-polyfill and exclude instead of include I can get past the first error, but I still error on a <Provider> element.

**webpack.config**

module.exports = {
  entry: './webpack/rfi.js',
  output: {
    path: __dirname + '/src/_assets/js',
    filename: 'rfi.js'
  },
  module: {
    rules: [{
      exclude: /node_modules/,
      test: /\.(js|jsx)$/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["react", "env", "stage-3", "es2015"],
        }
      }
    }]
  }
};

**App.js**

class Rfi extends Component {
  render() {
    return (
        <Provider store={store}>
          <Form />
        </Provider>
    );
  }
}

**error**

Module parse failed: Unexpected token (36:8)
You may need an appropriate loader to handle this file type.
|
|     return (
|         <Provider store={store}>
|           <Form />
|         </Provider>

And yes Provider is imported import { Provider } from 'react-redux';

Edit 2 ( per comment request )

For some reason I'm not getting a good trace in my messages anymore. Here's one from yesterday though.

Is this a recent issue? I'm suddenly seeing the same issue on some of my react repos. I'm suspecting some third-party dependency released a new version that has a bug. Can you paste your full stacktrace? — Carl von Buelow, Mar 14 '18 at 16:35

Aaqib · Answer 1 · 2018-03-13T17:21:14.073

2

One of the ways is make use of babel-polyfill , You can install it as a project dependency npm install --save babel-polyfill and inside your webpack.config.js you can pass it to the entry point (You can amend this accordingly):

entry: ["babel-polyfill", "./webpack/app.js"],

Edit 1 Answer :

You need to make sure your store is on the top of hierarchy , like (app.js) (You can amend this accordingly) :

import { render } from "react-dom";

import { Provider } from "react-redux";

render(
    <Provider store={store}>
        <Form />
    </Provider>,
    document.getElementById("app") // Ammend this accordignly
);

You can read more about babel Polyfill Here

edited Mar 13 '18 at 17:21

answered Mar 13 '18 at 16:12

Aaqib

9,942
4
21
30

I had tried this as well. With my current set up it does get a little farther in to the code but still gets similar errors on . I will update the question with those results. – sareed Mar 13 '18 at 17:02
Please provide a link to your working demo or repo so one can have detail inside and help you in a effective way – Aaqib Mar 13 '18 at 17:04
If I make that change, it does get a little farther but still errors on syntax, just a div. I think the root issue here is versioning which I thought was the purpose of babel-loader and it's presets. This app works fine as is when in its own instance. I only have an issue when I try to include it on a static site. – sareed Mar 13 '18 at 17:45
I feel like I'm missing something or maybe presets need updating. If I have to completely rework the app just to get it to work as a JS module please let me know what version of React/JS standards I need to use. – sareed Mar 13 '18 at 17:51
If you provide a link to github repo or something I can help you out with that – Aaqib Mar 13 '18 at 17:54
I cannot make the current repo public as it belongs to the client. I will strip out the client based code and put something up on a public github when I get the chance. Might not be until tomorrow. I appreciate your assistance and will post a link to the question when I get it up. – sareed Mar 13 '18 at 18:05

React Unexpected token with babel-loader

1 Answers1