How to move alias '@': path.join(__dirname, '../../vendor/laravel/nova/resources/js') to externals?

[scramatte]

Hi,

I've just installed this package. I've made and fixed various nova packages and I would like to optimize them.

I've made the changes below to my webpack.mix.js and I'm able to build the package.

My issue is that I don't know how to remove '@' alias ant reference it to externals.
Currently, my package still has the same size.

Can you please give me a hand?

let path = require('path');
let mix = require('laravel-mix');
let postcss = require('postcss-import');
let tailwindcss = require('tailwindcss');

mix.externals = {
  vue: 'Vue',
  'laravel-nova': 'LaravelNova',
}

mix
  .setPublicPath('dist')
  .js('resources/js/entry.js', 'js')
  .vue({ version: 3 })
  .webpackConfig({
    externals: {
      vue: 'Vue',
    },
    output: {
      uniqueName: 'outl1ne/nova-grid',
    },
  })
  .postCss('resources/css/entry.css', 'dist/css/', [postcss(), tailwindcss('tailwind.config.js')])
  .alias({
    '@': path.join(__dirname, '../../vendor/laravel/nova/resources/js'),
  });

Thank you

[crynobone]

You must stop depending on components provided by laravel/nova/resources/js to reduce the size. Otherwise, your package will still depend on everything.

[scramatte]

Hello,

Yes, but what is the solution if we want to use the native components inside custom ones?

[crynobone]

Vue Components by Laravel Nova are available globally.