React relative imports

Hello. I've just setup a new Laravel project which I'm planning on using Inertiajs with React. Typically in my previous projects in React I'd import components like so:

import Dashboard from 'Pages/Dashboard'

However I'm struggling to configure this with Laravel Mix, I always get an error

Error: Can't resolve 'Pages/Dashboard' in '/var/www/html/resources/js/Pages'

Here is webpack.mix.js file:

const mix = require('laravel-mix');

require('laravel-mix-eslint');

mix.js('resources/js/app.js', 'public/js')
    .react()
    .eslint({
        fix: true,
        extensions: ['js'],
        exclude: ['node_modules', 'resources/js/app.js', 'resources/js/bootstrap.js'],
    })
    .postCss('resources/css/app.css', 'public/css');

mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            Pages: `${__dirname}/resources/assets/js/`,
        },
    },
});

I have also tried the alias @

Any help would be great, thanks.

drehimself

4 years ago

Level 35

You want to alias the resources/js folder to @

It looks like your folder name is using /resources/assets/js instead of resources/js

I always just use or reference Breeze with Inertia when working with Inertia. It sets up all the boilerplate quickly: https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia

Here is the webpack.mix.js file it generates:

mix.js('resources/js/app.js', 'public/js')
    .react()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .alias({
        '@': 'resources/js',
    });

Please or to participate in this conversation.