Vite“require is not Defined”如何解决？

问题描述 投票：0回答：1

我知道这是一个非常常见的问题，但网上的所有答案都不适合我。 我有一个在 Laravel 中使用 React 和 Vite 运行的 php 和 js 应用程序，并且在 Windows (cmd) 上进行开发。我和 5 名工程师学生一起工作，他们为我构建了一个没有任何问题的工作应用程序，当我拿回它时，我认为由于我的开发环境，我遇到了一些问题。 我可以构建、开发和启动应用程序，php 和 js 部分运行良好。问题涉及我的一些功能，这些功能不起作用，我可以在 fn+F12 控制台中看到：“Uncaught ReferenceError: require is not Define at app-578e34b2.js:5:36016”。 该应用程序尝试连接到 Tezos 区块链来铸造 NFT 并将其导入钱包。所有与区块链相关的功能都无法运行。就我而言，这是我在构建后生成的“app-578e34b2.js:5:36016”文件中得到的精确错误：

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

我构建时调用的第一个文件是“resources/js/App.js”：


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

window.Alpine = Alpine;

Alpine.start();

var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    themeToggleLightIcon.classList.remove('hidden');
} else {
    themeToggleDarkIcon.classList.remove('hidden');
}

var themeToggleBtn = document.getElementById('theme-toggle');

themeToggleBtn.addEventListener('click', function() {

    // toggle icons inside button
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');

    // if set via local storage previously
    if (localStorage.getItem('color-theme')) {
        if (localStorage.getItem('color-theme') === 'light') {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        } else {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        }

    // if NOT set via local storage previously
    } else {
        if (document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        } else {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        }
    }
    
});

我尝试将“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"; import PrimaryButton from "../Components/PrimaryButton.js"

我在 vite.config.js 中尝试了 commonjs 和其他解决方案，但没有任何效果。唯一的解决方案是将所有这些文件重命名为 .jsx 而不是 .js：ConnectWallet.jsx、MyNFTpage.jsx 等，甚至 initTezos.jsx 和 PrimaryButton.jsx。它运行良好，我可以再次构建，但我在 NFT 上遇到了同样的问题，并且在构建生成的文件中出现了相同的“未定义需求”，现在有一些 axios 文件：

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

我的结论是我的开发环境有问题。与我一起工作的学生从 0 开始并重新安装了所有依赖项：他们现在遇到了同样的问题（以前没有）。我尝试更新所有的node_modules以及它们的旧版本（当它对学生有用时）。我在互联网上看到的最后一件事涉及带有 

type:module
的“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>

我对 js 很陌生，所以我可能错过了一个明显的解决方法。我非常感谢您的帮助并希望您理解我的问题。 再次感谢您帮助我，我希望您能找到如何继续。

reactjs import blockchain vite tezos
1个回答
8
投票

我遇到了同样的问题：我将 

Vue 3
与 
Vite
、Taquito 一起用于 Tezos 解析，并且在 
axios
导入时抛出“require is not Define”。我正在使用 Typescript，但配置对你来说应该是相同的，除了你的配置文件的文件结尾是“.js”。

我通过在 vite.config.ts 中的 Vite 配置的构建对象中添加 

commonjsOptions: { transformMixedEsModules: true }
解决了这个问题。

这是我的全部
vite.config.ts
:

import { fileURLToPath, URL } from 'node:url'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), nodePolyfills()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    commonjsOptions: { transformMixedEsModules: true } // Change
  }
})

我希望这能解决您的问题！ :)

https://vitejs.dev/config/build-options#build-commonjsoptions

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.