Question

我正在尝试设置与babel的互动，并关注此视频https://www.youtube.com/watch?v=deyxI-6C2u4。但是在使用npm start时出现该错误

我逐步跟踪了视频。然后使用除babel-loader之外的@ babel-babel-plugins更改babel-babel-plugins，并更改.babelrc。还添加了一个新的React组件，但是尝试不包含它，仍然给我错误。

./ package.json

  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }

./。babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

./ src / index.html

<body>
    <div id="root"></div>   
</body>

./ src / Components / App.js

import React, { Component } from 'react';
import HeroeClasses from './HeroeClasses';

const classList = ["Warrior", "Mage", "Hunter","Paladin","Druid","Shaman","Rogue","Warlock","Priest","DeathKnight"];

class App extends Component {
    render() {
        return(
            <div>
                <HeroeClasses classes={classList} heroeNumber="first"/>
            </div>
        )
    }
}

export default App;

./ src / Components / HeroeClasses.js

import React, { Component } from 'react';

class HeroeMenu extends Component {
    render() {
        return (
            <div className={`HeroMenu  ${heroeNumber}`}>
                <ul>
                    {classes.map(element => {
                        return (<li type="radio" class={`heroClass_${heroeNumber}`} name={`heroClass_${heroeNumber}`} id={`${element}_${heroeNumber}`}>
                            <label for={`${element}_${heroeNumber}`}>
                                {element}
                            </label>
                        </li>)
                    })}
                </ul>
            </div>
        )
    }
}

HeroeMenu.defaultProps = {
    classes: ['Warrior, Mage'],
    heroeNumber: first
};

export default HeroeClasses;

**错误消息**

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] D:\Users\josea\Documents\Jose\Proyectos\It_as_a_hobby\code\randomFights\src\index.js: Cannot find module 'babel-types' (While processing: "D:\\Users\\josea\\Documents\\Jose\\Proyectos\\It_as_a_hobby\\code\\randomFights\\node_modules\\@babel\\preset-env\\lib\\index.js$20")
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (D:\Users\josea\Documents\Jose\Proyectos\It_as_a_hobby\code\randomFights\node_modules\regenerator-transform\lib\visit.js:17:19)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js main[2]

提前感谢您的时间：D

Answer 1

头脑又重新开始了吗？我今天早些时候也观看了相同的视频，除了必须更改babel的编写方式之外，没有任何问题。查看this 答案。

编辑：并且如果您将React Router添加到您的应用中，则在重新加载页面时可能会收到404，This帮助了我

如何修复“无法找到模块'babel-types'

1 个答案: