在ReactJS中导入/导出子组件错误

Question

I just simply want to export and import a child component into my rot-directory (App.js) and render it out in the browser, but I get this error message in terminal "Module not found: Error: Cannot resolve 'file' or 'directory'". I don't understand what I typed wrong or why I cannot import my child to my App.js.

Have tried to solve this problem but with no results. I've been testing this in my "App.js" to get a more explicit name but not working:

import { ContactsList } from './ContactsList';

I've also tried typing this in my "ContactsList.js" but with no result:

export default class ContactsList extends React.Component {}

I'am a beginner so excuse me for my knowledge but I really want to learn this and the power of react. Please help me for better understanding!

--------App.js---------

import React from 'react';
import ReactDOM from 'react-dom';
import ContactsList from './ContactsList';


class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Contacts List</h1>
                <ContactsList />
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

--------ContactsList.js---------

import React from 'react';
import ReactDOM from 'react-dom';

class ContactsList extends React.Component {
    render() {
        return (
            <ul>
                <li>Joe 555 555 5555</li>
                <li>Marv 555 555 5555</li>
            </ul>
        )
    }
}
export default ContactsList;

--------webpack.config.js---------

module.exports = {
    entry: './src/App.js',
    output: {
        path: __dirname,
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test:/\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
};

Answer 1

In your ContactsList.js file, use a <div> to wrap the <ul>

Also in your webpack config file. Can you try to use loader : "babel-loader" instead of loader: 'babel' (Don't forget to install the babel-loader package)

Also remove the query part and try to create a separate .babelrc file with the following settings:

{
    "presets" : [
        "react",
        "es2015"
    ]
}

Hope this can solve your problem

Answer 2

According to es6 module mechanism the default module should be imported without {}

import ContactsList  from './ContactsList';

and export like

export default class ContactsList extends React.Component {}

But I guess you are trying babel on .jsx extension however it seams you are using ContactsList.js

Just change the to .jsx to .js in

--webpack.config.js

module.exports = {
    entry: './src/App.js',
    output: {
        path: __dirname,
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test:/\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
};

Hope it works

Answer 3

You need to do some changes on webpack.config.js file. first replace

    test:/\.jsx?$/,

with

    test: /\.(js|jsx)$/,

Secondly import modules as follows

import ContactsList  from 'path-of-the-file';

But you need to provide the actual path. to get the path correct there are many plugins available depending on the text editors we use. i am using https://github.com/sagold/FuzzyFilePath