How to solve "require is not defined" in Vite?

Question

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.

Lancelle

None of the fixes works for me. What did you end up doing - remember? – Fant

Answer 1

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

Uncalledfor

In my case it does not help, and also, build is only relevant when bundling and not during development, which is when I experience the issue – Saucer

I'm not a JS dev. For my colleague, during the development time, it worked just fine. But after the build, it failed with require is not defined. His solution works perfectly fine. – Hanseatic

Answer 2

I just fixed this issue by installing this package from vite common js plugin

npm install vite-plugin-commonjs

then add plugins to your vite.config.js

export default defineConfig({
  plugins: [commonjs()],
});

reference: https://vitejs.dev/plugins/

Cypriot

Answer 3

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

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

Girard

Answer 4

For vite , we need to install these dependencies explicitly (unlike create-react-app).

For me, these worked:

1. Install commonjs (npm install vite-plugin-commonjs)
2. Import -- import commonjs from 'vite-plugin-commonjs'
3. Add commonjs to plugins in vite.config.js

export default defineConfig({ 
  plugins: [
    react(),
    // svgr(), same for svg
    commonjs(),
  ],
})

Now, require can be used.

Sprang

Answer 5

For future searchers:

vite doesn't use require, please try with import instead.

Fahey

This was all I needed in the end. Only used require in one place in my code, swapped it with an import. All working, no need for any additional plugins or config changes or anything. – Callista