Laravel Vite Build Fails with Materialize Web: How to Fix Missing Specifiers?

Below is a summary of the issue and one working solution:

---

The Problem

When switching to the newer fork of Materialize (from materializecss.com to materializeweb.com), Vite fails to resolve the imported JS and SCSS files. For example:

• JS Import:

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

  Produces the error:

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

• SCSS Import:

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

  Yields an error regarding missing "./sass/components/color-variables" specifier.

---

What’s Happening

Vite is more strict about file path specifiers. With the forked package, the import paths in its package configuration do not exactly match what Vite expects. Vite complains because it cannot resolve the "./dist/js/materialize.js" or "./sass/components/color-variables" file specifiers, due to differences in package exports or file layout.

---

The Working Solution: Using Vite Aliases

One workaround is to use Vite’s resolver with an alias that explicitly maps a chosen alias (e.g., @materialize) to the correct folder location in your node_modules.

Update your vite.config.js as follows:

JSCopied
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',
            // Map '@materialize' to the package directory
            '@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,
                },
            },
        })
    ],
})

Then, update your import statements to use the alias:

• JS Import:

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

• SCSS Import:

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

Note: The ~ (tilde) tells the SCSS compiler that it is an alias mapping to node_modules. Your configuration might vary depending on your project setup.

---

Additional Considerations

• Optimizing Dependencies:
  If issues persist, you can try adding the package to optimizeDeps.include in your Vite config. But many have found the alias solution sufficient.

• Double-check Paths:
  Make sure the paths (inside the package) such as /dist/js/materialize.js and /sass/... exist; aliasing overrides the resolution issues due to missing specifiers.

---

Conclusion

The errors were due to Vite’s strict module resolution expecting explicit path specifiers. By adding a proper alias in your Vite configuration, you can point Vite directly to the correct package folder and then adjust your import statements to use the alias. As you noted in your update, this solution with path resolving fixed the issue!

If you have any more questions on Vite or asset resolution, feel free to ask.