Laravel-mix: mix.js is not a function error with ESLint since the component refactor in 2.1.0

[emileber]

• Laravel Mix Version: 2.1.0 up to 2.1.11
• Node Version (node -v): v9.3.0
• NPM Version (npm -v): 5.8.0
• OS: macOS High Sierra 10.13.4 (17E199)

├── @fortawesome/[email protected]
├── @fortawesome/[email protected]
├── @fortawesome/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected] - 3
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Description:

Since v2.1.0, the project still compiles correctly, but _eslint_ complains that mix.js is not a function

> eslint --ext .js,.vue ./

mix.js is not a function
TypeError: mix.js is not a function
    at Object.<anonymous> (REDACTED/webpack.mix.js:14:5)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.exports.resolve (REDACTED/node_modules/eslint-import-resolver-webpack/index.js:68:25)
    at v2 (REDACTED/node_modules/eslint-module-utils/resolve.js:94:23)

And my simple @ resolve alias doesn't work anymore.

const additionalConfig = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources', 'assets', 'js'),
        },
    },
};

mix.webpackConfig(additionalConfig);

I tried every version up to 2.1.11 and only 2.0.0 works with eslint. I also tried nuking my node_modules/ directory and forcing a cache clear.

Steps To Reproduce:

My webpack.mix.js:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/assets/js/app.js', 'public/js')
    .sourceMaps(false)
    .extract([
        'axios',
        'bootstrap-vue',
        '@fortawesome/fontawesome',
        '@fortawesome/fontawesome-free-solid',
        '@fortawesome/vue-fontawesome',
        'lodash',
        'popper.js',
        'vue-router',
        'vue',
        'vuex',
        'vuex-router-sync',
    ]);

mix.sass('resources/assets/sass/app.scss', 'public/css');

if (mix.inProduction()) {
    mix.version();
}
mix.disableNotifications();

//
const additionalConfig = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources', 'assets', 'js'),
        },
    },
};

mix.webpackConfig(additionalConfig);

module.exports = additionalConfig;

My .eslintrc.js:

// https://eslint.org/docs/user-guide/configuring

module.exports = {
    root: true,

    parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module',
    },
    env: {
        browser: true,
    },
    extends: [
        'airbnb-base',
        'plugin:vue/strongly-recommended',
    ],
    // required to lint *.vue files
    plugins: [
        'html',
    ],
    // check if imports actually resolve
    settings: {
        'import/resolver': {
            webpack: {
                config: 'webpack.mix.js',
            },
        },
    },
    // add your custom rules here
    rules: {
        'no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 1 }],
        'no-duplicate-imports': 'error',
        // risk only exist with semi-colon auto insertion. Not our case.
        'no-plusplus': 'off',
        'no-underscore-dangle': [
            'error', {
                'allowAfterSuper': true,
                'allowAfterThis': true,
            }],
        'prefer-destructuring': 'off',
        'prefer-spread': 'off',
        'class-methods-use-this': 'off',
        'indent': [
            'error', 4, {
                SwitchCase: 1,
            }],
        // don't require .vue extension when importing
        'import/extensions': [
            'error', 'always', {
                js: 'never',
                vue: 'never',
            }],
        // allow optionalDependencies
        'import/no-extraneous-dependencies': [
            'error', {
                optionalDependencies: ['test/unit/index.js'],
            }],
        'import/prefer-default-export': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    },
};

and the script I use in the package.json:

"lint:js": "eslint --ext .js,.vue ./",

[emileber]

I reverted laravel-mix to v2.0.0 right now as a workaround.

[ankurk91]

You can ignore webpack.mix.js file through eslintignore

[emileber]

@ankurk91 That won't work since

1. I want the webpack.mix.js to be checked for linting errors
2. ESLint needs the webpack config to check the imports.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[etiennellipse]

The problem is still present with Laravel Mix v3.0

[saleem-hadad]

The problem is still present with Laravel Mix v4.0

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[emileber]

I'm not using Mix anymore, but maybe @etiennellipse could confirm if it's still an issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.