Laravel项目迁移@materializecss/materialize遇Vite依赖解析缺失问题

问题背景 #

旧Laravel项目原使用已停止维护的Materialize库，切换到其热门分支对应的@materializecss/materialize包后，Vite构建出现模块找不到的错误：

• 导入JS时报错：[commonjs--resolver] Missing "./dist/js/materialize.js" specifier in "@materializecss/materialize" package
• 移除JS导入后，SCSS导入同样报错：Missing "./sass/components/color-variables" specifier

原旧版Materialize包在Vite环境下可正常使用（已从Webpack迁移到Vite，无问题）。

环境版本 #

• Laravel 10.48
• Vite 5.4
• @materializecss/materialize 2.2.1

解决方法 #

尝试过optimizeDeps依赖优化无效，最终通过配置Vite路径别名解决问题，核心是为@materializecss/materialize包设置绝对路径别名，避免模块解析时的路径歧义。

最终配置 #

vite.config.js #

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

export default defineConfig({
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
            '@materialize': path.resolve(__dirname, 'node_modules/@materializecss/materialize'),
        }
    },
    build: {
        sourceMap: true,
    },
    plugins: [
        laravel([
            'resources/styles/app.scss',
            'resources/js/app.js',
        ]),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        })
    ],
});

package.json 脚本 #

"scripts": {
    "build-dev": "vite build --mode development",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
},

导入方式调整 #

配置别名后，导入代码可改为：

• JS：import '@materialize/dist/js/materialize.js'
• SCSS：

@import "@materialize/sass/components/color-variables";
@import "@materialize/sass/materialize";

内容的提问来源于stack exchange，提问作者barmaxon