代码之家 › 专栏 › 技术社区 › daydreamer

在“npm run build”之后,material ui和react不会重现相同的行为?

create-react-app babel material-ui redux reactjs

0

daydreamer · 技术社区 · 6 年前

我正在创建一个内容库,我在其中使用react app using create react app 。 package.json 看起来像


   
    
     < PRE> >代码>
“名字”:“演示”,
“version”:“0.1.0”,
“private”:对,
“依赖项”:。{
“@material ui/core”:“^1.4.1”,
“@material ui/icons”:“^2.0.1”,
“firebase”:“^5.3.0”,
“md5”:“^2.2.1”,
“react”:“^16.4.1”,
“react dom”:“^16.4.1”,
“react flexbox grid”:“^2.1.2”,
“react katex”:“^2.0.2”,
“react redux”:“^5.0.7”,
“react router dom”:“^4.3.1”,
“react scripts”:“1.1.4”,
“redux”:“^4.0.0”,
“redux thunk”:“^2.3.0”,
“uuid”:“^3.3.2”
}
“脚本”:{
“start”:“反应脚本启动”,
“build”:“react scripts build”,
“test”:“react scripts test--env=jsdom”,
“eject”:“反应脚本eject”
}
}
< /代码>
     
      当运行
      
       yarn install&yarn start
       
        The application comes out fine,see the snapshot below
        

        当我运行
        
         yarn build&serve-s build时,应用程序看起来不一样,UX混乱,请参见下面的
         

         
          yarn.lock
          
           file is linked
           
            https://pastebin.com/ddhnvrwa
           
          
         
        
       
      
     
     
      
       
        
         预期行为
        
        
         
          yarn start
          
           上的页面和运行后的页面应该完全相同
          
         
        
        
         
          
           当前行为
          
          
           在
           
            npm run build&serve-s build之后出现的页面是不同的(请参阅随附的快照)。
           
          
          
           
            你的环境
           
           tech version|
|————————————————|
|材料界面/核心^1.4.1|
|材料界面/图标^2.0.1|
|反应^16.4.1|
|浏览器Google Chrome版本68.0.3440.106(官方版本)(64位)|
|楷体无|
|等等。||
< /代码> 

.

.
{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^1.4.1",
    "@material-ui/icons": "^2.0.1",
    "firebase": "^5.3.0",
    "md5": "^2.2.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-flexbox-grid": "^2.1.2",
    "react-katex": "^2.0.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "uuid": "^3.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

           
            
            
            
             
              跑步时
              
               yarn install && yarn start
              
              应用程序运行良好,请参阅下面的快照
              

              当我跑步时
              
               yarn build && serve -s build
              
              或
              
               npm run build && serve -s build
              
              ,应用程序看起来不一样,用户体验混乱,请参阅下面的
              

              这个
              
               yarn.lock
              
              文件链接
             
             
              https://pastebin.com/dDHnvRWA
             
            
            
             预期行为
            
            
             页面上
             
              yarn start
             
             跑完一个
             
              NPM运行构建和服务构建
             
             应该完全一样
            
            
             当前行为
            
            
             后面出现的页面
             
              NPM运行构建和服务构建
             
             不同(见随附的快照)
            
            
             你的环境
            
            | Tech         | Version |
|--------------|---------|
| Material-UI/core  | ^1.4.1 |
| Material-UI/icons | ^2.0.1|  
| React        |    ^16.4.1     |
| Browser      |   Google Chrome Version 68.0.3440.106 (Official Build) (64-bit)      |
| TypeScript   |      None   |
| etc.         |         |

1 回复 | 直到 6 年前

1

Matt 6 年前

由于从错误路径导入了材料反应组件,因此创建了问题。

路径不正确(导致问题)

import {AppBar, Toolbar, Typography} from
    "@material-ui/core/umd/material-ui.production.min";

正确路径

import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";

从导入后 正确路径 ,应用程序开始按预期运行