javascript - reactjs Unexpected token '<' - Stack Overflow-369IT编程

admin管理员组
文章数量:1023059

i've created reactjs app with react-redux,redux. when starting reactjs project, getting unexpected token error at line 13 on index file. the index file is given beloow.

ERROR in ./src/index.js
Module build failed: SyntaxError: D:/Reactjs_work/
/src/index.js: Unexpected token (13:2)

  11 |
  12 | ReactDOM.render(
> 13 |   <Provider store={createStoreWithMiddleware(reducers)}>
     |   ^
  14 |     <App />
  15 |   </Provider>
  16 |   , document.querySelector('.container'));

 @ multi main
webpack: Failed to pile.

following is index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './ponents/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

i've gone through following topic over here.but no success. Reactjs: Unexpected token '<' Error ReactJS Syntax Error: Unexpected Token

webpack.config.js

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

i've created reactjs app with react-redux,redux. when starting reactjs project, getting unexpected token error at line 13 on index file. the index file is given beloow.

ERROR in ./src/index.js
Module build failed: SyntaxError: D:/Reactjs_work/
/src/index.js: Unexpected token (13:2)

  11 |
  12 | ReactDOM.render(
> 13 |   <Provider store={createStoreWithMiddleware(reducers)}>
     |   ^
  14 |     <App />
  15 |   </Provider>
  16 |   , document.querySelector('.container'));

 @ multi main
webpack: Failed to pile.

following is index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './ponents/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

i've gone through following topic over here.but no success. Reactjs: Unexpected token '<' Error ReactJS Syntax Error: Unexpected Token

webpack.config.js

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Share Improve this question edited Nov 4, 2017 at 11:12 asked Nov 4, 2017 at 10:35 romal tandel 50112 silver badges21 bronze badges

1 Do you have .babelrc file? – Durga Commented Nov 4, 2017 at 11:17
Are you setting presets inside .babelrc ? – Aaqib Commented Nov 4, 2017 at 11:19
as i'm new to reactjs, don't know much about it.i downloaded project from github./RoadToCode822/react-side-projects and try to make it – romal tandel Commented Nov 4, 2017 at 11:24

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

replace module with following code

module: {
    loaders: [{
      test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',

        query: {
           presets: ['es2015', 'react']
        }
    }]
  },

Had the same error:

ERROR in ./src/main.js
Module build failed: SyntaxError: Unexpected token (11:1)

   9 | 
  10 | ReactDOM.render(
> 11 |  <Provider store={store}>
     |  ^
  12 |      <App />
  13 |  </Provider>,
  14 |  mountNode

 @ multi main
webpack: Failed to pile.

Me don't help the change of the module section.

My error: a missing .babelrc file

After creating .babelrc with content:

{
    "presets": ["react", "es2015", "stage-0"]
}

my error disappeared. So simple :-)

i've created reactjs app with react-redux,redux. when starting reactjs project, getting unexpected token error at line 13 on index file. the index file is given beloow.

ERROR in ./src/index.js
Module build failed: SyntaxError: D:/Reactjs_work/
/src/index.js: Unexpected token (13:2)

  11 |
  12 | ReactDOM.render(
> 13 |   <Provider store={createStoreWithMiddleware(reducers)}>
     |   ^
  14 |     <App />
  15 |   </Provider>
  16 |   , document.querySelector('.container'));

 @ multi main
webpack: Failed to pile.

following is index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './ponents/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

i've gone through following topic over here.but no success. Reactjs: Unexpected token '<' Error ReactJS Syntax Error: Unexpected Token

webpack.config.js

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

i've created reactjs app with react-redux,redux. when starting reactjs project, getting unexpected token error at line 13 on index file. the index file is given beloow.

ERROR in ./src/index.js
Module build failed: SyntaxError: D:/Reactjs_work/
/src/index.js: Unexpected token (13:2)

  11 |
  12 | ReactDOM.render(
> 13 |   <Provider store={createStoreWithMiddleware(reducers)}>
     |   ^
  14 |     <App />
  15 |   </Provider>
  16 |   , document.querySelector('.container'));

 @ multi main
webpack: Failed to pile.

following is index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './ponents/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

i've gone through following topic over here.but no success. Reactjs: Unexpected token '<' Error ReactJS Syntax Error: Unexpected Token

webpack.config.js

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Share Improve this question edited Nov 4, 2017 at 11:12 asked Nov 4, 2017 at 10:35 romal tandel 50112 silver badges21 bronze badges

1 Do you have .babelrc file? – Durga Commented Nov 4, 2017 at 11:17
Are you setting presets inside .babelrc ? – Aaqib Commented Nov 4, 2017 at 11:19
as i'm new to reactjs, don't know much about it.i downloaded project from github./RoadToCode822/react-side-projects and try to make it – romal tandel Commented Nov 4, 2017 at 11:24

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

replace module with following code

module: {
    loaders: [{
      test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',

        query: {
           presets: ['es2015', 'react']
        }
    }]
  },

Had the same error:

ERROR in ./src/main.js
Module build failed: SyntaxError: Unexpected token (11:1)

   9 | 
  10 | ReactDOM.render(
> 11 |  <Provider store={store}>
     |  ^
  12 |      <App />
  13 |  </Provider>,
  14 |  mountNode

 @ multi main
webpack: Failed to pile.

Me don't help the change of the module section.

My error: a missing .babelrc file

After creating .babelrc with content:

{
    "presets": ["react", "es2015", "stage-0"]
}

my error disappeared. So simple :-)

本文标签： javascriptreactjs Unexpected token 39lt39Stack Overflow

版权声明：本文标题：javascript - reactjs Unexpected token '<' - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745571019a2156737.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - reactjs Unexpected token '<' - Stack Overflow

2 Answers 2

2 Answers 2

更多相关文章