如何解决 vite 构建过程中“Rollup 无法解析导入 fsevents”的问题

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

在开发中将 Vue 2 更新到 Vue 3 的过程中，一切都按预期进行。开发机是Windows。但是在构建时会抛出以下错误：

错误：[vite-plugin-pwa:build] [vite]：Rollup 无法解析从“/node_modules/rollup/dist/es/shared/node-entry.js”导入“fsevents”。 这很可能是无意的，因为它可能会在运行时破坏您的应用程序。 如果您确实想外部化此模块，请显式地将其添加到 

build.rollupOptions.external
在 viteWarn （文件:///node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:67418:27） 在 onwarn (file:///node_modules/@vitejs/plugin-react/dist/index.mjs:250:9) 在 onRollupWarning （文件:///node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:67443:9） 在 onwarn (file:///node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:67150:13) 在文件:///node_modules/rollup/dist/es/shared/node-entry.js:18303:13 在 Object.logger [as onLog] (file:///node_modules/rollup/dist/es/shared/node-entry.js:19950:9) 在 ModuleLoader.handleInvalidResolvedId (file:///node_modules/rollup/dist/es/shared/node-entry.js:18893:26) 在 ModuleLoader.resolveDynamicImport （文件:///node_modules/rollup/dist/es/shared/node-entry.js:18951:58） 在异步文件:///node_modules/rollup/dist/es/shared/node-entry.js:18838:32

对于 Vue 2 构建，不会抛出此错误。

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

vite 配置：

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' ],
    },
} ) );

已经找到以下post，但这没有帮助。据我所知，没有“奇怪”的进口。

还尝试将 

fsevents
添加到建议的 
build.rollupOptions.external
作为 
external: [ 'fsevents' ],
但这会产生以下错误：

RollupError: [vite-plugin-pwa:build] node_modules/rollup/dist/es/shared/parseAst.js (11:18): “basename”不是由“__vite-browser-external”导出，而是由“node_modules”导入/汇总/分布 /es/shared/parseAst.js”。 文件：node_modules/rollup/dist/es/shared/parseAst.js:11:18 9：*/ 10: 从 '../../native.js' 导入 { parse, parseAsync }; 11：从“节点：路径”导入{解析，基本名称，扩展名，目录名}； ^ 12： 13: const ArrowFunctionExpression = 'ArrowFunctionExpression';

更新

将 

rollup-plugin-polyfill-node
与 
external: [ 'fsevents' ]
添加将会出现以下错误：

RollupError：node_modules/@inertiajs/vue3/dist/index.esm.js (1:265)：“default”不是由“node_modules/lodash.clonedeep/index.js”导出，而是由“node_modules/@inertiajs/”导入vue3/dist/ 索引.esm.js”。 文件：/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{计算为v,defineComponent为B,h为S,markRaw为I, 反应如 U,re f as A,shallowRef as J}from"vue";import{router as _}from"@inertiajs/core";import L from"lod... ^ 2： 3：请使用“as”属性指定更合适的元素。例如：

参考

import L from"lod...
。

我希望有人可以帮助我解决这个

fsevents
错误。

reactjs vue.js vite
1个回答
0
投票

从 Vue2 迁移到 Vue3 时，我也遇到了类似的问题。

经过几个小时的调查，我在 config.ts 中发现了未使用的导入，导致了这个奇怪的错误：

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

拆掉它后，我更进了一步

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