How to resolve "Rollup failed to resolve import fsevents" during vite build

Question

In the process of updating Vue 2 to Vue 3 in development everything is working as expected. The development machine is Windows. But when building the following error is thrown:

Error: [vite-plugin-pwa:build] [vite]: Rollup failed to resolve import "fsevents" from "/node_modules/rollup/dist/es/shared/node-entry.js". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external at viteWarn (file:///node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:67418:27) at onwarn (file:///node_modules/@vitejs/plugin-react/dist/index.mjs:250:9) at onRollupWarning (file:///node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:67443:9) at onwarn (file:///node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:67150:13) at file:///node_modules/rollup/dist/es/shared/node-entry.js:18303:13 at Object.logger [as onLog] (file:///node_modules/rollup/dist/es/shared/node-entry.js:19950:9) at ModuleLoader.handleInvalidResolvedId (file:///node_modules/rollup/dist/es/shared/node-entry.js:18893:26) at ModuleLoader.resolveDynamicImport (file:///node_modules/rollup/dist/es/shared/node-entry.js:18951:58) at async file:///node_modules/rollup/dist/es/shared/node-entry.js:18838:32

For Vue 2 build this error isn't thrown.

The package.json:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "host": "vite --host",
        "build": "vite build",
        "test": "jest",
        "lint-dry": "eslint --fix-dry-run --format stylish --color --ext .js,.vue,.jsx resources/js",
        "lint": "eslint --fix --ext .js,.vue resources/js"
    },
    "devDependencies": {
        "@babel/core": "^7.22.9",
        "@babel/eslint-parser": "^7.22.9",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/preset-env": "^7.22.9",
        "@babel/preset-react": "^7.24.1",
        "@vitejs/plugin-react": "^4.2.1",
        "@vitejs/plugin-vue": "^5.0.0",
        "autoprefixer": "^10.4.14",
        "deepmerge": "^4.3.1",
        "laravel-vite-plugin": "^1.0.0",
        "postcss": "^8.4.24",
        "postcss-html": "^1.5.0",
        "postcss-import": "^16.1.0",
        "postcss-scss": "^4.0.6",
        "prettier": "^3.0.3",
        "rollup-plugin-polyfill-node": "^0.13.0",
        "sass": "^1.63.3",
        "vite": "^5.0.0",
        "vite-plugin-checker": "^0.6.4",
        "vite-plugin-pwa": "^0.19.6",
        "vite-plugin-vuetify": "^2.0.2",
        "webfontloader": "^1.6.28"
    },
    "dependencies": {
        "@emotion/react": "^11.10.6",
        "@emotion/styled": "^11.10.6",
        "@inertiajs/core": "^1.0.15",
        "@inertiajs/react": "^1.0.15",
        "@inertiajs/vue3": "^1.0.15",
        "@mdi/font": "^7.2.96",
        "@mdi/js": "^7.2.96",
        "@mdi/react": "^1.6.1",
        "@mui/lab": "^5.0.0-alpha.133",
        "@mui/material": "^5.13.4",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "vue": "^3.4.21",
        "vuetify": "^3.5.11",
        "ziggy-js": "^2.0.0"
    },
    "browserslist": [
        "defaults"
    ]
}

The vite config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vuetify from 'vite-plugin-vuetify';
import vue from '@vitejs/plugin-vue';
import react from '@vitejs/plugin-react';
import { VitePWA as vitePWA } from 'vite-plugin-pwa';

import { fileURLToPath, URL } from 'node:url';

/**
 * Vite Configure
 *
 * @see {@link https://vitejs.dev/config/}
 * @type {import('vite').UserConfig}
 */
export default defineConfig( async ( { command } ) => ( {
    // // https://vitejs.dev/config/shared-options.html#base
    base: './',
    // Resolver
    resolve: {
        // https://vitejs.dev/config/shared-options.html#resolve-alias
        alias: {
            'vue': 'vue/dist/vue.runtime.esm-bundler.js',
            '@': fileURLToPath( new URL( './resources/js', import.meta.url ) ),
            '~': fileURLToPath( new URL( './node_modules', import.meta.url ) ),
            ziggy: fileURLToPath( new URL( './vendor/tightenco/ziggy/dist/vue.es.js', import.meta.url ) ),
        },
    },
    // https://vitejs.dev/config/server-options.html
    server: {
        hmr: {
            host: 'localhost',
        },
        fs: {
            // Allow serving files from one level up to the project root
            allow: [ '..' ],
        },
    },
    css: {
        postcss: {
            plugins: [
                // Fix vite build includes @charset problem
                // https://github.com/vitejs/vite/issues/5655
                {
                    postcssPlugin: 'internal:charset-removal',
                    AtRule: {
                        charset: atRule => {
                            if( atRule.name === 'charset' ) {
                                atRule.remove();
                            }
                        },
                    },
                },
            ],
        },
    },
    plugins: [
        laravel( [ 'resources/js/vue-app.js', 'resources/js/react-app.jsx' ] ),
        react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
        // Vue2
        // https://github.com/vitejs/vite-plugin-vue2
        vue( {
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: '/',

                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directory as expected.
                    includeAbsolute: false,

                    video: [ 'src', 'poster' ],
                    source: [ 'src' ],
                    img: null, // makes it possible to resole images at runtime
                    image: [ 'xlink:href', 'href' ],
                    use: [ 'xlink:href', 'href' ],
                },
            },
        } ),
        vuetify( { autoImport: true } ),
        vitePWA( <config> ),
    ],
    // Build Options
    // https://vitejs.dev/config/build-options.html
    build: {
        // Build Target
        // https://vitejs.dev/config/build-options.html#build-target
        target: 'modules',
        // Rollup Options
        // https://vitejs.dev/config/build-options.html#build-rollupoptions
        rollupOptions: {
            // @ts-ignore
            output: {
                manualChunks: {
                    // Split external library from transpiled code.
                    /* Splitting is possible but will add Vue to React which is unwanted
                        vue: [
                            'vue',
                        ],
                        vuetify: [
                            'vuetify/lib',
                            'webfontloader',
                        ],
                        */
                    materialdesignicons: [ '@mdi/font/css/materialdesignicons.css' ],
                },
            },
        },
        // Minify option
        // https://vitejs.dev/config/build-options.html#build-minify
        minify: 'esbuild',
    },
    esbuild: {
        // Drop console when production build.
        drop: command === 'serve' ? [] : [ 'console' ],
    },
} ) );

Already found the following post but that didn't help. As far as I can see there are no "weird" imports.

Also tried to add fsevents to the suggested build.rollupOptions.external as external: [ 'fsevents' ], but that gives the following error:

RollupError: [vite-plugin-pwa:build] node_modules/rollup/dist/es/shared/parseAst.js (11:18): "basename" is not exported by "__vite-browser-external", imported by "node_modules/rollup/dist /es/shared/parseAst.js". file: node_modules/rollup/dist/es/shared/parseAst.js:11:18 9: */ 10: import { parse, parseAsync } from '../../native.js'; 11: import { resolve, basename, extname, dirname } from 'node:path'; ^ 12: 13: const ArrowFunctionExpression = 'ArrowFunctionExpression';

Update

Adding rollup-plugin-polyfill-node with external: [ 'fsevents' ] will give the following error:

RollupError: node_modules/@inertiajs/vue3/dist/index.esm.js (1:265): "default" is not exported by "node_modules/lodash.clonedeep/index.js", imported by "node_modules/@inertiajs/vue3/dist/ index.esm.js". file: /node_modules/@inertiajs/vue3/dist/index.esm.js:1:265 1: import{router as lr}from"@inertiajs/core";import{createHeadManager as q,router as C}from"@inertiajs/core";import{computed as v,defineComponent as B,h as S,markRaw as I,reactive as U,re f as A,shallowRef as J}from"vue";import{router as _}from"@inertiajs/core";import L from"lod... ^ 2: 3: Please specify a more appropriate element using the "as" attribute. For example:

Refering to import L from"lod....

I hope some can help me fix this fsevents error.

Answer 1

I had the similar issue, when migrating from Vue2 to Vue3.

After hours of investigation, I found an unused import in my config.ts, causing this weired error:

import vue from '@vitejs/plugin-vue';

After removing it, I got one step further

Answer 2

Add the following to your vite config to stop vite/rollup from trying to bundle fsevents and node dependencies. No polyfill plugin required.

import { builtinModules } from 'module';

const allExternal = [
    ...builtinModules,
    ...builtinModules.map((m) => `node:${m}`)
]

// add the following to your config object

return {
    build: {
            rollupOptions: {
                external: ['fsevents', ...allExternal]
            }
    }
}