Javascript 导入组件时响应无法解析模块

试图从src目录中的组件导入组件，但抛出错误，无法找到新模块进行响应。如有任何帮助，将不胜感激

src

app.js

import React, { Component } from "react";
import { BrowserRouter as Router,Link } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";

import CreateTodo from './components/create-todo.component';
// import EditTodo from './components/edit-todo.component';
// import TodosList from './components/todos-list.component';

// import logo from "./logo.png";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            {/* <a class="navbar-brand" href="https://codingthesmartway.com" target="_blank">
              <img src={logo} width="30" height="30" alt="CodingTheSmartWay.com" />
            </a> */}
            <Link to="/" className="navbar-brand">MERN-Stack Todo App</Link>
            <div className="collpase navbar-collapse">
              <ul className="navbar-nav mr-auto">
                <li className="navbar-item">
                  <Link to="/" className="nav-link">Todos</Link>
                </li>
                <li className="navbar-item">
                  <Link to="/create" className="nav-link">Create Todo</Link>
                </li>
              </ul>
            </div>
          </nav>
          <br/>
         <Route path="/create" component={CreateTodo} />
  
        </div>
      </Router>
    );
  }
}

export default App;

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Link}；
导入“bootstrap/dist/css/bootstrap.min.css”；
从“./components/create todo.component”导入CreateTodo；
//从“./components/edit todo.component”导入Editodo；
//从“./components/todos list.component”导入todoList；
//从“/logo.png”导入徽标；
类应用程序扩展组件{
render（）{
返回(
{/*  */}
MERN堆栈待办事项应用程序


待办事项


创建待办事项




);
}
}
导出默认应用程序；

创建组件

import React, { Component } from 'react';

export default class CreateTodo extends Component {
    render() {
        return (
            <div>
                <p>Welcome to Create Todo Component!!</p>
            </div>
        )
    }
}

import React，{Component}来自'React'；
导出默认类CreateTodo扩展组件{
render（）{
返回(
欢迎创建Todo组件

)
}
}

尝试在您尝试从中导入的目录上添加一个s：

import CreateTodo from./components/create todo.component'

应该是：

import CreateTodo from./components/create todo.components'

如果这不起作用，你能澄清一下你的目录结构吗？它将进入
src/components/create todo.components
？
尝试将文件扩展名从
.component.js
切换到
.jsx

因此，文件名为
create todo.jsx
，您的导入如下所示：

import CreateTodo from './components/create-todo';

文件
create todo.components
是否有
.js
文件扩展名？@JayKariesch是的，它是js文件。我不认为文件名中有“.”对代码有任何好处。也，检查是否有默认导出，导出名称是否与组件名称完全相同。@Krisztianagy添加了创建组件代码我认为这与我导入的方式有关，我发现
src/components/create todo.component
没有
s
，我认为这不重要，但我的目录就是这样的结构正在运行，但仍不工作
import CreateTodo from './components/create-todo';