vite dependency resolving issue: missing ... specifier

Question

I have an old Laravel project where https://materializecss.com is used. Problem is it's old and buggy and it's abandonded in 2018. I decided to switch to popular fork - https://materializeweb.com.

But I'm having trouble using this dependency with Vite. When I switch to this package

import '@materializecss/materialize/dist/js/materialize.js'

project can't be built.

[commonjs--resolver] Missing "./dist/js/materialize.js" specifier in "@materializecss/materialize" pack...

Same goes for scss imports if I remove js import.

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

//Missing "./sass/components/color-variables" specifier

Old package works fine with vite (I migrated from webpack before that, and had no problems with old materializecss package).

Laravel 10.48 Vite 5.4 @materializecss/materialize 2.2.1

P.S. So far I just found similar problem here, but it helps if it's your internal package, for me it's not.

UPD:

vite.config.js trying both solutions from @rozsazoltan

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

export default defineConfig({
    // optimizeDeps: {
    //     include: ['@materializecss/materialize'],
    // },
    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,
                },
            },
        })
    ],
});

scripts in package.json

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

UPD2.SOLVED: Above in vite config file there is a typo I got from early version of the answer. @rozsazoltan has fixed it by now. Second solution with path resolving is working!

Answer 1

You can list external, non-mappable sources for Vite in the optimizeDeps.include property of the vite.config.js.

By default, linked packages not inside node_modules are not pre-bundled. Use this option to force a linked package to be pre-bundled.

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    include: ['@materializecss/materialize'],
  },
})

Or you have the option to add the file as a custom alias with resolve.alias property.

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@materialize/materialize': path.resolve(__dirname, 'node_modules/@materializecss/materialize'),
    },
  },
})