Laravel+React+Vite项目"require is not defined"错误解决求助

在Windows cmd环境下接手由5名学生开发完成的Laravel+React+Vite项目，项目原本运行正常，但接手后出现异常：

• 应用可正常构建、启动，PHP与JS基础功能正常
• Tezos区块链相关的NFT铸造、钱包导入功能全部失效
• 浏览器控制台报错：Uncaught ReferenceError: require is not defined at app-578e34b2.js:5:36016，对应构建生成的代码中存在未被转译的require调用：

  require("./src/ConnectWallet.js");
  require("./src/MyNFTpage.js");
  require("./src/DashboardNFT");
  require("./src/ArtistNFTS");
  require("./src/DisconnectWalletG");
  

已尝试的解决方法 #

1. 替换入口文件中的require为import
   将resources/js/App.js中的require调用全部替换为import：

   import '../css/app.css';
   import './src/ConnectWallet.js';
   import './src/MyNFTpage.js';
   import './src/DashboardNFT';
   import './src/ArtistNFTS';
   import './src/DisconnectWalletG'
   import Alpine from 'alpinejs';
   

   结果：出现JSX转译失败，错误涉及import { TezosContext, TezosProvider } from "./components/initTezos.js";这类文件导入语句

2. 重命名JS文件为JSX
   将所有Tezos相关.js文件重命名为.jsx（如ConnectWallet.jsx、initTezos.jsx等）
   结果：可正常构建，但Tezos功能仍失效，控制台出现axios相关的require未定义错误：

   const settle$2 = require("axios/lib/core/settle")
         , buildURL$3 = require("axios/lib/helpers/buildURL")
   

3. 其他尝试

   • 在vite.config.js中配置CommonJS支持，无效
   • 更新项目依赖、使用学生开发时的旧版本依赖，均无效

项目关键配置文件 #

package.json #

{
    "private": true,
    "scripts": {
        "first" : "npm install && composer require laravel/cashier && php artisan key:generate && php artisan migrate && composer require stripe/stripe-php && composer dump-autoload",
        "build" : "vite build",
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
        "start": "php artisan serve",
        "postinstall": "patch-package"
    },
    "devDependencies": {
        "@airgap/beacon-sdk": "^3.3.4",
        "@babel/preset-react": "^7.22.5",
        "@headlessui/react": "^1.4.2",
        "@inertiajs/react": "^1.0.0",
        "@tailwindcss/forms": "^0.5.2",
        "@taquito/beacon-wallet": "^14.0.0",
        "@taquito/ledger-signer": "^14.0.0",
        "@taquito/taquito": "^14.2.0",
        "@taquito/tzip12": "^14.0.0",
        "@vitejs/plugin-react": "^3.0.0",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.1.2",
        "laravel-mix": "^6.0.49",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "nft.storage": "^7.0.0",
        "postcss": "^8.4.6",
        "react": "^18.2.0",
        "react-app-rewired": "^2.2.1",
        "react-dom": "^18.2.0",
        "react-redux": "^8.1.0",
        "react-router-dom": "^6.12.1",
        "react-scripts": "5.0.1",
        "redux": "^4.2.0",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.4.2",
        "tailwindcss": "^3.3.2",
        "use-file-picker": "^1.5.1",
        "vite": "^4.3.9",
        "web-vitals": "^3.0.4"
    },
    "dependencies": {
        "patch-package": "^7.0.0",
        "stream": "^0.0.2"
    }
}

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

webpack.mix.js #

let mix = require('laravel-mix');
const webpack = require('webpack');
require('tailwindcss');

mix.js('resources/js/app.js', 'public/build/js')
   .setPublicPath('public').react()
   .webpackConfig({
    resolve: {
        fallback: {
            stream: require.resolve('stream-browserify'),
            buffer: require.resolve('buffer'),
            os: require.resolve('os-browserify/browser'),
        },
    },
    plugins: [
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
        }),
    ],
    })
   .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
   ]);;

mix.version(); // Cette ligne ajoute un hash aux noms de fichiers compilés

app.blade.php #

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Marché aux Pulses') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
        
        <!-- Scripts -->
        @routes
        @viteReactRefresh
        @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

补充说明 #

• 项目同时配置了Laravel Mix和Vite，可能存在构建工具冲突
• 本人为JS新手，可能遗漏基础配置细节

内容的提问来源于stack exchange，提问作者Brice GD