模块构建失败：错误：ENOENT：没有这样的文件或目录 - React

Posted 2023-03-10

【中文标题】模块构建失败：错误：ENOENT：没有这样的文件或目录 - React

【英文标题】：Module build failed: Error: ENOENT: no such file or directory - React

【发布时间】：2019-06-01 16:28:26

【问题描述】：

我正在尝试在我的反应应用程序中实现分页。这是我关注的网站React Pagination Component。但是在构建应用程序时出现以下错误。

./node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js 模块构建失败：错误：ENOENT：没有这样的文件或目录，打开'/Users/siddharthsinha/WebstormProjects/tweelyze-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized. js'

由于我是 react 新手，我无法弄清楚我的实现有什么问题。这是我实现分页的js文件。

import React from 'react';
import NavigationBar from './NavigationBar';
import SearchPageResultsStyle from "../assets/css/SearchResultsPage.css"
import JwPagination from 'jw-react-pagination';
import Homepage from "./Homepage";
import SearchBarComponent from "./SearchBarComponent"
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

class SearchResultsPage  extends React.Component
    constructor(props) 
        super(props);
        console.log("Printing in the results component")
        console.log(this.props.location.state)
        this.state = 
            results: this.props.location.state.results,
            keyword: this.props.location.state.keyword,
            pageOfItems: []
        ;
        this.onChangePage = this.onChangePage.bind(this);
    

    onChangePage(pageOfItems) 
        // update local state with new page of items
        this.setState(pageOfItems);
    
    render() 
        return(
            <div>
                <NavigationBar/>
                <h4 style=textAlign:'center', color:'#1a0dab'>Showing search results for <span style=fontWeight:'bold', fontStyle:'Italic'>'this.state.data.keyword'</span></h4>
                <hr/>
                <div className='wrap' style=SearchPageResultsStyle>
                    <div className='fleft'>left column</div>
                    <div className='fcenter'>
                        <h3 style=color:'#1a0dab'>Tweeter tweets text will be displayed here!!!</h3>
                        <a href='https://google.com'>Tweet urls will be displayed here</a>
                        <br/>
                        <div style=display:'inline'>
                            <p><span style=fontWeight:'bold', textColor:'#6a6a6a'>topic: </span>crime</p>
                            <p><span style=fontWeight:'bold', textColor:'#6a6a6a'>city: </span>delhi</p>
                            <p><span style=fontWeight:'bold', textColor:'#6a6a6a'>lang: </span>Hindi</p>
                            <p><span style=fontWeight:'bold', textColor:'#6a6a6a'>Hashtags: </span></p>
                            <hr/>
                            <JwPagination items=this.state.results onChangePage=this.onChangePage/>
                        </div>
                    </div>
                    <div className='fright'>right column</div>
                </div>
            </div>


        )
    



export default SearchResultsPage;

【问题讨论】：

没有 jw-react-pagination 模块可以工作吗？

是的，它以前工作得很好。

这可能是因为您正在导入的文件 github.com/cornflourblue/jw-react-pagination/blob/master/src/…（如果您查看 package.json 中的“main”字段）没有被 babel 转译。通常，当您从 NPM 导入某些内容时，作者已经为您转译了它。许多 webpack 设置实际上忽略了来自 node_modules 目录的任何模块的转译。我建议只需将该文件复制/粘贴到您的应用程序中，创建一个问题让作者执行此操作，或修改 webpack 加载器以包含此模块

【参考方案1】：

您应该进入 index.js 文件，在此代码中 import App from './App'; 您应该将 ./App 更改为当前使用的文件路径。