Question

我正在尝试将无状态组件导入到我的应用中，并收到以下错误：

App.jsx：13未捕获错误：找不到模块“./components/test”

和

找不到模块：错误：无法解析'./components/test'

这是我的代码：

App.jsx

import React, {Component} from 'react';
import Username from './components/test';

class App extends Component {
  render() {
    return (
      <h1>Hello React :)</h1>
    );
  }
}
export default App;

test.jsx

import React from 'react';

const Username = function(props) {
  return (
    <p>The logged in user is: </p>
  )
}
export default Username;

无法理解为什么会出现此错误？

Answer 1

如果您希望能够在不指定扩展名的情况下导入.jsx文件，则需要稍微修改您的webpack配置。

您需要将resolve.extensions添加到[".js", ".json"]数组（默认为[".js", ".json", ".jsx"]，因此您应将其设置为resolve.enforceExtension，并确保false为设置为<form id="register-form" method="post" role="form" style="display: none;" action=""> <div class="form-group"> <input type="text" name="firstname" id="firstname" tabindex="1" class="form-control" placeholder="Firstname" value="" required> <span class="error" id="fnError"></span> </div> <div class="form-group"> <input type="text" name="lastname" id="lastname" tabindex="1" class="form-control" placeholder="Lastname" value=""required> <span class="error" id="lnError"></span> </div> <div class="form-group"> <input type="email" name="email2" id="email2" tabindex="1" class="form-control" placeholder="Email Address" value=""required> </div> <div class="form-group"> <input type="password" name="password2" id="password2" tabindex="2" class="form-control" placeholder="Password"required> <span class="error" id="pass2Error"></span> </div> <div class="form-group"> <input type="password" name="confirm_password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password" required> <span class="error" id="confError"></span> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now"> <span class="throw_error" id="success"></span> <div id="divLoader"></div> </div> <div class="col-sm-6 col-sm-offset-3"> <span id="result"></span> </div> </div> </div> </form>（这是默认设置。）

React - 导入无状态组件导致错误

1 个答案: