Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 451|回复: 0

使用create-react-app遇到问题解决方案汇总

[复制链接]
  • TA的每日心情
    奋斗
    4 天前
  • 签到天数: 802 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726006
    发表于 2021-5-27 12:35:10 | 显示全部楼层 |阅读模式

    使用create-react-app时遇到Module not found问题

    本来项目跑的好好地,然后install了一个axios,然后项目就挂了。 各种Module not found,路径不对。 期初以为是可能丢包了,又重新install还是不行,根据错误提示一个个删一个个重新install。 最后干脆重新建了个项目,但仍然不行。 这时候意识到了问题应该是出在create-react-app上:

    根据这个猜想,清空了packge卸载了全部model,重新install才解决问题。原因我现在也还不知道什么情况会触发这个bug,欢迎指教。

    上代码:

    1.  
      npm install rimraf -g //安装删除指令
    2.  
      rimraf node_modules //卸载node库
    3.  
      npm install //重装

     

    npm WARN deprecated fsevents windows

     

    更新下 使用yarn貌似会帮助跳过这个问题:

    info fsevents@2.1.2: The platform "win32" is incompatible with this module.
    info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
    info fsevents@1.2.9: The platform "win32" is incompatible with this module.
    info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.

    ===

    有需要下载了一个模板项目,安装ui部分失败,提示:

    npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetch
    ing binaries from AWS, smaller package size
    npm ERR! Unexpected end of JSON input while parsing near '...LNCxGNsOAHRWRMGoXrtcI'

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2019-12-06T07_31_31_687Z-debug.log

    单独提出来安装:

    $ npm install fsevents
    npm ERR! code EBADPLATFORM
    npm ERR! notsup Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm ERR! notsup Valid OS: darwin
    npm ERR! notsup Valid Arch: any
    npm ERR! notsup Actual OS: win32
    npm ERR! notsup Actual Arch: x64

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\neoliu6\AppData\Roaming\npm-cache\_logs\2019-12-06T07_33_23_843Z-debug.log

    原因明了了,这个包是在mac系统中的,windows没有。查了下资料,大概是windows也不需要,不用安装。

    解决方法是,把fsevents依赖放到可选依赖中:

    vi package.json

      "optionalDependencies": {
        "fsevents": "*"
      }

    重新执行安装(有个坑,需要删除package_lock.json,否则标记会失效,所有依赖都将被安装):

    1
    npm install -- no -optional

     

    参考资料:

    https://stackoverflow.com/questions/41570364/npm-install-not-working-in-windows#

    But it says it is optional so I ran $npm install --no-optional and that error went away but I still can't install.

    https://github.com/npm/npm/issues/17633

    I'm seeing this today with npm 5.3.0. npm install --no-optional works IIF a package-lock.json does not exist. If the package-lock.json file exists, then the flag is ignored and all dependencies get installed.

     

    3.撤换taobao源后,使用create-reat-app命令生成的app,默认package.json文件中不带运行脚本命令如下:

    (node: ver2.13.1  npm ver:6.12.1)

    {
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
    }
    }

    需要手动添加运行脚本代码如下:
    {
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
    },
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
    },
    "eslintConfig": {
    "extends": "react-app"
    },
    "browserslist": {
    "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
    ],
    "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
    ]
    }
    }

    还有public,src等目录需要自己添加,当然业务代码需要自己编写哦
    然后才能通过npm run start 命令才能运行项目。

    使用系统默认源的配置信息如下:
    npm config list

    npm config list
    ; cli configs
    metrics-registry = "https://registry.npmjs.org/"
    scope = ""
    user-agent = "npm/6.12.1 node/v12.13.1 win32 x64"

    ; userconfig C:\Users\Administrator\.npmrc
    cache = "c:\\tmp\\node_cache"
    prefix = "c:\\tmp\\node_global"

     

    如果使用taobo源,使用npm config list 查看配置信息如下:

    ; cli configs
    metrics-registry = "https://registry.npm.taobao.org/"
    scope = ""
    user-agent = "npm/6.12.1 node/v12.13.1 win32 x64"

    ; userconfig C:\Users\Administrator\.npmrc
    cache = "c:\\tmp\\node_cache"
    disturl = "https://npm.taobao.org/dist"
    prefix = "c:\\tmp\\node_global"
    registry = "https://registry.npm.taobao.org/"

     

    经过测试对比发现,现在通过create-react-app命令生成的APP,没有原来带小卫星转的演示代码,现在只有

    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"

    的库及其依赖库,可能是新版本取消原来的模板了,知道的网友请指教,谢谢。

    如果生成的app是web应用程序,需要指定服务启动端口,可以在在package.json文件中配置"scripts“项中的start修改为如下

    "scripts": {
    "start": "SET PORT & react-scripts start",  
       。。。。。。 

     即可改变默认服务器启动端口。

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-11-15 12:56 , Processed in 1.118620 second(s), 27 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表