react中使用import路径出错

Question

练习react的大致目录结构如下

app/
    components/
        Message/
            index.js
    containers/
        App/
            index.js
    app.js
    index.html
config/
    webpack.base.js
package.json

其中webpack的入口文件是app.js。
组件Message的index.js代码如下

import React from 'react';

function Message(props) {
    return <div>Hello {props.name}</div>
}

export default Message;

容器App下的index.js代码如下

import React from 'react';
import Message from '/components/Message';

class App extends React.Component {
    render() {
        return (
            <div>
                <Message name="React" />
            </div>
        );
    }
}

export default App;

npm start后，会出错，提示Cannot resolve 'file' or 'directory' /components/Message

按资料讲的是/是绝对路径，其是相对于入口文件的相对路径。按理上面import应该是对的。然而报路径错误。于是将其修改为：

import Message from '../../components/Message';

打包过程正常，但在运行过程中浏览器会报上面import代码行错误
Uncaught TypeError: Super expression must either be null or a function, not undefined

不是太明白。

Answer 1

Cannot resolve 'file' or 'directory' /compoents/Message

报错信息写的是compoents, 而你的真实路径是components, 路径名写错了。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

路经改成 '../../components/Message'
然后将你的message组件改一下，你现在return的是一个function，而不是一个react组件

import React, {Component} from 'react';

export default class Message extends Component {
    render() {
        return (
            <div>Hello {props.name}</div>
        )
    }
};

Answer 2

import Message from '../../components/Message';中试试将路径改成‘../../components/Message/index.js’

Answer 3

我也遇到过这个问题。
除了楼上所说的我还有一个小的tips:Component 拼写错误也会导致报这错误。