CODEWITHSUNDEEP
javascriptreactjswebpackbabeljs
Rahul Dagli
Rahul Dagli

Reputation: 4502

Babel loader unable to import React

I'm using babel loader with webpack for combining multiple React components. Although I've installed webpack and babel-loader along with its dependencies. I'm getting two errors:

ERROR in ./components/layout.jsx
Module parse failed: /Users/myuser/Desktop/Projects/Demo/Scorecard/SPA/React/components/layout.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
| 
| class Layout extends React.Component {
 @ ./build/import.js 15:14-49

ERROR in ./components/topic-list.jsx
Module parse failed: /Users/myuser/Desktop/Projects/Demo/Scorecard/SPA/React/components/topic-list.jsx Line 17: Unexpected token <
You may need an appropriate loader to handle this file type.
|     render: function () {
|         return (
|             <div>
|                 <div className="row topic-list">
|                     <SingleTopicBox 
 @ ./build/import.js 11:17-56

webpack.config.js

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

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: APP_DIR + '/import.js',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            include: APP_DIR,
            loader: 'babel',

            exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
          }
        ],
        resolve: {
          extensions: ['', '.js', '.jsx']
        }
    }
};

import.js

import React from 'react';
import ReactDOM from 'react-dom';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

layout.jsx

import React from 'react';

class Layout extends React.Component {

    render() {
        return (
            <div className="container">
                <TopicsList />

            </div>
        );
    }
};

ReactDOM.render(<Layout />, document.getElementById('app'));

Upvotes: 1

Views: 1597

Answers (4)

ling
ling

Reputation: 10019

I had the same case and resolved it by removing the exclude part of the webpack rule (since the failing import was an import of an imported npm package that was in the node_modules directory).

So, applying to your example:

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

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: APP_DIR + '/import.js',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            include: APP_DIR,
            loader: 'babel',

            // we want the loader to search in node_modules,
            // so we comment the line below
            // exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
          }
        ],
        resolve: {
          extensions: ['', '.js', '.jsx']
        }
    }
};

Upvotes: 0

jdlm
jdlm

Reputation: 6644

You seem to be missing the React preset for Babel: babel-preset-react

npm install --save-dev babel-preset-react

And add it to your babel-loader presets.

Upvotes: 0

The Reason
The Reason

Reputation: 7973

Remove include options from your webpack.config.js file. Include folder should be the folder where webpack can find your loader in this case babel loader

Upvotes: 1

jasonslyvia
jasonslyvia

Reputation: 2535

I'm not clear about your file structure but it might be the include part in resolve section of your webpack.config.js that results the problem.

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

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: APP_DIR + '/import.js',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            include: THIS_SHOULD_BE_YOUR_SOURCE_FOLDER,
            loader: 'babel',

            exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
          }
        ],
        resolve: {
          extensions: ['', '.js', '.jsx']
        }
    }
};

Upvotes: 0

Related Questions