我的项目引入react-dnd16报错了

前言

react项目中如果要使用拖拽，我想大家应该都不陌生react-dnd，本想梳理一篇文章作为学习笔记。但是出师未捷身先死，第一步就遇到坎了~

引入报错

我自己搭建的项目使用的是`react17`、`webpack5`

import React from 'react';
import './App.css'
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

const App = () => {
  return (
    <div className="App">
      <DndProvider backend={HTML5Backend}>
        <div className='container'>2323</div>
      </DndProvider>
    </div>
  )
}

export default App;

真无语，明明最简单的引入就报错了： 不知道有没有小伙伴是这样，遇到问题、报错就慌了，不愿意看报错的内容，可能做法是马上修改库的版本再看会不会报错~

其实上面的报错已经很明显了Can't resolve 'react/jsx-runtime'，我们看到它源码里面：

解决报错

我们知道了问题，那要怎么解决呢？

webpack 里面有个 alias 可以去配置别名的；那我们配置一个react/jsx-runtime为react/jsx-runtime.js是不是就解决了呢~ 然后我们重启项目，nice~