Laravel Mix + Typescript tsconfig.json Alias to resources/js configuration not working

When working with Laravel Mix and TypeScript, you might encounter an issue where the tsconfig.json alias configuration for the resources/js directory is not working as expected. This can be frustrating, but fortunately, there are a few solutions you can try to resolve this problem.

Solution 1: Update webpack.mix.js

The first solution involves updating the webpack.mix.js file to properly handle the alias configuration. Here’s an example of how you can modify the file:

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

mix.webpackConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
        },
    },
});

mix.ts('resources/ts/app.ts', 'public/js');
    

By adding the webpackConfig method and specifying the resolve.alias property, you can define the alias for the resources/js directory. In this example, the alias @ is used to represent the resources/js directory.

Solution 2: Update tsconfig.json

If Solution 1 doesn’t work for you, another approach is to update the tsconfig.json file directly. Here’s an example of how you can modify the file:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"]
        }
    }
}
    

In the compilerOptions section, you need to set the baseUrl to "." to indicate the current directory. Then, specify the paths property with the desired alias and its corresponding path. In this example, the alias @ is used to represent the resources/js directory.

Testing the Configuration

After applying one of the above solutions, you can test if the alias configuration is working properly. Here’s a simple TypeScript code snippet to test:

import { exampleFunction } from '@/example';

exampleFunction();
    

In this example, we import a function called exampleFunction from a file located in the resources/js directory using the alias @. Make sure to replace exampleFunction with the actual function name and file path in your project.

If the alias configuration is working correctly, you should be able to compile and run the TypeScript code without any import errors.

Conclusion

When the tsconfig.json alias configuration for the resources/js directory is not working in Laravel Mix and TypeScript, you can try updating the webpack.mix.js file or the tsconfig.json file directly. Both solutions involve defining the alias for the resources/js directory, allowing you to import files using the specified alias.

Remember to test the configuration after making the changes to ensure everything is working as expected.