使用webapck打包的库无法使用import语法引入

Question

问题
开发一个React组件想发布到npm上，发现无法使用 import 语法导入使用组件
组件部分程序

class KeyboardNavigation extends Component {
    ...
}

export default KeyboardNavigation;

将组件进行打包，webpack部分配置文件如下：

module.exports = {
  mode: 'production',
  entry: {
    main: './src/keyNav.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd',
    library: 'keyboardnavigation'
  }

package.json 部分配置文件如下:

{
  "name": "keyboardnavigation",
  "main": "dist/bundle.js",
  
}

打包完成后引用打包后的文件dist下的 bundle.js 进行测试：

 import KeyNav from '../dist/bundle';
 ReactDOM.render(<KeyNav />, document.getElementById('root'))

使用 import 语法时就会报错。
现在使用 CommonJS，修改上述文件。
组件部分程序

class KeyboardNavigation extends Component {
    ...
}

module.exports = { KeyboardNavigation };

将组件进行打包，webpack部分配置文件如下：

module.exports = {
  mode: 'production',
  entry: {
    main: './src/keyNav.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd',
    library: 'keyboardnavigation'
  }

package.json 部分配置文件如下:

{
  "name": "keyboardnavigation",
  "main": "dist/bundle.js",
  
}

打包完成后引用打包后的文件dist下的 bundle.js 进行测试：

 const { KeyNav } = require('../dist/bundle');
 ReactDOM.render(<KeyNav />, document.getElementById('root'))

此时就不会报错。
请问这是怎么回事,能直接使用打包后的文件进行测试吗？
找了一天原因也没有找到，哪位大佬知道麻烦解答一下，感激不尽。