PHP Versions Question posted in
You can find a list of all versions here.

Php versions – How to solve "require is not defined" in Vite?

I know this is a pretty common question but all the answers on the web are not working for me.
I have a php and js app working in Laravel with React and Vite, and I dev on Windows (cmd). I worked with 5 engineer students who built me a working app with no problem, when I got it back I had fue issues due, I think, to my development environment.
I can build, dev and start the app, the php and js parts are working well. The problem concerns some of my functions which doesn’t work and I can see this in the fn+F12 console: « Uncaught ReferenceError: require is not defined at app-578e34b2.js:5:36016 ».
The app tries to connect to the Tezos blockchain to mint NFTs and import them into wallets. All of the functions linked with the blockchain are not working. In my case, here is the precise error I got in the "app-578e34b2.js:5:36016" file generated after the build:

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

The first file called when I build is "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');
        }
    }
    
});

I tried to change ‘require’ into ‘import’ as I saw on the web:

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';

My issue was now a .jsx translate problem with some of my components, and I couldn’t build anymore:

import { TezosContext, TezosProvider } from "./components/initTezos.js"; import PrimaryButton from "../Components/PrimaryButton.js"

I tried commonjs and other solutions in vite.config.js but nothing worked for me. The only solution was to rename all of these fils into .jsx instead of .js: ConnectWallet.jsx, MyNFTpage.jsx etc.. and even initTezos.jsx and PrimaryButton.jsx. It worked well, I could build again but I had the same problem with the NFTs and the same "require is not defined" in the build-generated file, now with some axios files:

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

My conclusion is that I have an development environment problem. The students I worked with started from 0 and re-installed all the dependances: they had the same issue now (they hadn’t before). I tried with all the node_modules updated and also with their old versions (when it worked for the students). The last thing I saw on internet concerned the ‘package.json’ file with type:module, which I don’t have in my case:

{
    "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"
    }
}

I send you some of the other important files like ‘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,
        }),
    ],
});

And also ‘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

And finally ‘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>

I am pretty new in js so it is possible that I have missed an obvious way to solve it. I really appreciate your help and hope you understood my question.
Thank you again for helping me, I hop you will find how to proceed.

Tags:

2

Answers


  1. 0

    I had the same problem: I am using Vue 3 with Vite, Taquito for Tezos resolving and was getting "require is not defined" thrown at an axios import. I am using Typescript, but the config should be the same for you, except the file ending of your config file being ".js".

    I solved it by adding commonjsOptions: { transformMixedEsModules: true } to the build object of the Vite config in vite.config.ts.

    This is my whole 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
  }
})

    I hope this solves your problem! 🙂

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

    Login or Signup to reply.
  2. 0

    I have used the vite-plugin-require to allow the require:

    https://www.npmjs.com/package/vite-plugin-require

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search