Laravel 8 with React fails at command npm run dev

Can you post your mix file content

Thanks for replying. I'm new to Laravel and to MVC.

My app.js:

require('./bootstrap');
require('./components/Example');

My webpack.mix.js:

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

I'm following the tutsplus build-a-react-app-with-laravel-backend-part-2-react--cms-29443. I've tried both the more automated way in its example as well as the manual way.

Both crash in exactly the cascade of results I've reposted at the top of this thread.

Here's the node_modules\laravel-mix\src\mix.js:

let Paths = require('./Paths');
let Manifest = require('./Manifest');
let Dispatcher = require('./Dispatcher');
let Components = require('./components/Components');

class Mix {
    /**
     * Create a new instance.
     */
    constructor() {
        this.paths = new Paths();
        this.manifest = new Manifest();
        this.dispatcher = new Dispatcher();
        this.tasks = [];
        this.bundlingJavaScript = false;
        this.components = new Components();
    }

    /**
     * Determine if the given config item is truthy.
     *
     * @param {string} tool
     */
    isUsing(tool) {
        return !!Config[tool];
    }

    /**
     * Determine if Mix is executing in a production environment.
     */
    inProduction() {
        return Config.production;
    }

    /**
     * Determine if Mix should watch files for changes.
     */
    isWatching() {
        return (
            process.argv.includes('--watch') || process.argv.includes('--hot')
        );
    }

    /**
     * Determine if polling is used for file watching
     */
    isPolling() {
        return this.isWatching() && process.argv.includes('--watch-poll');
    }

    /**
     * Determine if Mix sees a particular tool or framework.
     *
     * @param {string} tool
     */
    sees(tool) {
        if (tool === 'laravel') {
            return File.exists('./artisan');
        }

        return false;
    }

    /**
     * Determine if the given npm package is installed.
     *
     * @param {string} npmPackage
     */
    seesNpmPackage(npmPackage) {
        try {
            require.resolve(npmPackage);

            return true;
        } catch (e) {
            return false;
        }
    }

    /**
     * Determine if Mix should activate hot reloading.
     */
    shouldHotReload() {
        new File(path.join(Config.publicPath, 'hot')).delete();

        return this.isUsing('hmr');
    }

    /**
     * Queue up a new task.
     *
     * @param {Task} task
     */
    addTask(task) {
        this.tasks.push(task);
    }

    /**
     * Listen for the given event.
     *
     * @param {string}   event
     * @param {Function} callback
     */
    listen(event, callback) {
        this.dispatcher.listen(event, callback);
    }

    /**
     * Dispatch the given event.
     *
     * @param {string} event
     * @param {*}      data
     */
    dispatch(event, data) {
        if (typeof data === 'function') {
            data = data();
        }

        this.dispatcher.fire(event, data);
    }
}

module.exports = Mix;

The webpack.mix.js looks like this (why is it commenting out so many statements?):

let 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 your application, as well as bundling up your JS files.
 |
 */

mix.js('src/app.js', 'dist/').sass('src/app.scss', 'dist/');

// Full API
// mix.js(src, output);
// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
// mix.preact(src, output); <-- Identical to mix.js(), but registers Preact compilation.
// mix.coffee(src, output); <-- Identical to mix.js(), but registers CoffeeScript compilation.
// mix.ts(src, output); <-- TypeScript support. Requires tsconfig.json to exist in the same folder as webpack.mix.js
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.less(src, output);
// mix.stylus(src, output);
// mix.postCss(src, output, [require('postcss-some-plugin')()]);
// mix.browserSync('my-site.test');
// mix.combine(files, destination);
// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
// mix.copy(from, to);
// mix.copyDirectory(fromDir, toDir);
// mix.minify(file);
// mix.sourceMaps(); // Enable sourcemaps
// mix.version(); // Enable versioning.
// mix.disableNotifications();
// mix.setPublicPath('path/to/public');
// mix.setResourceRoot('prefix/for/resource/locators');
// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
// mix.babelConfig({}); <-- Merge extra Babel configuration (plugins, etc.) with Mix's default.
// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
// mix.when(condition, function (mix) {}) <-- Call function if condition is true.
// mix.override(function (webpackConfig) {}) <-- Will be triggered once the webpack config object has been fully generated by Mix.
// mix.dump(); <-- Dump the generated webpack config object to the console.
// mix.extend(name, handler) <-- Extend Mix's API with your own components.
// mix.options({
//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
//   globalVueStyles: file, // Variables file to be imported in every component.
//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
//   purifyCss: false, // Remove unused CSS selectors.
//   terser: {}, // Terser-specific options. https://github.com/webpack-contrib/terser-webpack-plugin#options
//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
// });

https://github.com/JeffreyWay/laravel-mix/issues/2558

Thank you both for your help. I went to the GitHub link that was suggested in the reply immediately above and tried no fewer than two suggestions from it: First (1) I changed the first line in webpack.mix.js back to mix.js('resources/js/app.js', 'public/js') and then (2) I ran npm i laravel-mix@next

Well this is cool.

Following that I muddled around in the command line:

npm run dev

which in turn yielded some new different feedback than before (something about "feature flag"),...

> @ development C:\Users\Me\meblog
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

[webpack-cli] Error: mix.react() is now a feature flag. Use mix.js(source, destination).react() instead
    at React.register (C:\Users\Me\meblog\node_modules\laravel-mix\src\components\React.js:15:19)
    at Object.components.<computed> [as react] (C:\Users\Me\meblog\node_modules\laravel-mix\src\components\ComponentRegistrar.js:117:53)
    at Object.<anonymous> (C:\Users\Me\meblog\webpack.mix.js:14:5)
    at Module._compile (C:\Users\Me\meblog\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (C:\Users\Me\meblog\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at module.exports (C:\Users\Me\meblog\node_modules\laravel-mix\setup\webpack.config.js:3:5)

followed by a bunch of "ERR!"s.

Now I attempt to get rid of a "feature flag" (whatever that is--maybe it's flagging a feature anomaly) issue. Now I'm really muddling:

npm cache clean --force

npm run prod

npm install

yarn run dev

npm install cross-env

npm install && npm run dev

....

But wait, now there's this feedback, in green, with no ERR!s:

    Okay, done. The following packages have been installed and saved to your package.json dependencies list:

    - postcss@^8.1

    Finished. Please run Mix again.

Things are looking up.

But what is "Please run Mix again."? How do you "run Mix"?

So I muddle around some more:

yarn run dev

Now the error message has changed. Now it's

[webpack-cli] TypeError: Promise.allSettled is not a function

...

Haven't seen that before. I keep muddling,...

npm cache clean --force

npm run dev

Same thing:

[webpack-cli] TypeError: Promise.allSettled is not a function

...

npm install cross-env

npm run dev

Same thing:

[webpack-cli] TypeError: Promise.allSettled is not a function

...

npm install

npm run dev

Now, I have something altogether different:

[webpack-cli] Error: You are using an unspported [sic] version of Node.

Maybe this is a problem. I look up latest version available and it's 14.15.4, which is quite a jump from a year ago. I install a latest version of Node. Then I....

npm run dev

And here is the feedback:

> @ dev C:\Users\Me\meblog
> npm run development


> @ development C:\Users\Me\meblog
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

99% done plugins BuildOutputPlugin



   Laravel Mix v6.0.11


✔ Compiled Successfully in 3493ms

┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐ │ File │ Size │ ├───────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤ │ /js/app.js │ 2.03 MiB │ │ css/app.css │ 178 KiB │

It is all working now.

Hi, even i got the same error...below code in webpack.mix.js helped me to solve it.

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

i'm fix problem, in Laravel 8.54.0 , npm 6.14.14 and Node v14.17.5 to try:

npm cache clear --force

rm -rf node_modules

rm -rf package-json.lock yarn.lock

npm remove laravel-mix

npm install laravel-mix@next

npm install cross-env

npm install && npm run dev