javascript - react js中的类型错误需要不是一个函数

Question

最近我正在学习和研究电子+反应应用程序，我已经构建了简单的应用程序，但现在我想做一些凝乳操作，所以我在我的项目中安装了knex并在项目中安装了sqlite3。现在，每当我想获取 knex 的访问权限以进行凝乳操作时，它都会出错

TypeError: webpack_require (...) 不是函数

以前我添加了一些如下的包来创建 Electron + React 应用程序

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react css-loader style-loader sass-loader sass webpack webpack-cli npm install --save-dev babel-loader

这是我的 webpack cofig 文件代码如下

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'inline-source-map',
  target: 'electron-renderer',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              '@babel/preset-env', {
                targets: {
                  esmodules: true
                }
              }],
              '@babel/preset-react']
          }
        }
      },
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      }
    ]
  },
  resolve: {
    extensions: ['.js'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'build', 'js'),
  },
};

这是我在 js 文件中的 sqlite3 连接代码，如下所示

import React from 'react';
import { Header } from './Header';
import { Footer } from './Footer';
export const Home = () => {

    //db operation
    const knex = require('knex')({
        client: 'sqlite3',
        connection: {
          filename: ".../database.sqlite3"
        }
    });
    console.log(knex.select().from('employee'));
    
    return (
        <>
        <div>
            <Header />
                <h4 className="my-3 text-left p-2">Employee List</h4>
            <Footer />
        </div>
        </>
    )
}

错误附件

提前致谢。:)

标签： javascriptreactjswebpackelectronknex.js