Too many issues for react in mix

Problems with bootstrap fonts which I know someone found a hack around it. Problems with adding React to mix.

Now having this problem. I’m going back to the elixir right now but there should be a large warning sign saying “Hey this is experimental” because this is not ready for primetime at all. By the way the css-base is file is in the right place and the index.jsx is also in the right place.

These dependencies were not found in node_modules:

• /Users/joe/code/php/39dgv54/resources/assets/js/components/tryon/index.jsx
• ./…/…/…/node_modules/css-loader/lib/css-base.js

Did you forget to run npm install --save for them? Asset Size Chunks Chunk Names /js/components/index.js 6.48 kB 0 [emitted] /js/components/index ERROR Failed to compile with 2 errors

These dependencies were not found in node_modules:

• /resources/assets/js/components/tryon/index.jsx
• ./…/…/…/node_modules/css-loader/lib/css-base.js

Did you forget to run npm install --save for them? Asset Size Chunks Chunk Names /js/components/index.js 6.45 kB 0 [emitted] /js/components/index mix-manifest.json 58 bytes [emitted]

npm ERR! Darwin 15.6.0 npm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” “run” “dev” npm ERR! node v6.5.0 npm ERR! npm v3.10.3 npm ERR! code ELIFECYCLE npm ERR! @ dev: node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ dev script ‘node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js’. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs npm ERR! Or if that isn’t available, you can get their info via: npm ERR! npm owner ls npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /Users/joe/code/php/39dgv54/npm-debug.log

[JeffreyWay]

So I just created a fresh project and followed the React setup instructions:

• npm install babel-preset-react --save-dev
• Add .babelrc with contents.

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react"
  ]
}

• npm install react react-dom --save

• Set webpack.mix.js to:

var 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.jsx', 'public/js');

• Set resources/assets/js/app.jsx to:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>Hello world</div>,
  document.getElementById('app')
);

• Compile: npm run dev

Everything worked perfectly.

Do you possibly have a different version of Webpack installed globally? I know that the Webpack API changed, and caused some older versions to throw that error with certain packages.

[JeffreyWay]

The main issue here was that your package.json file was a mess, so you weren’t using the version of Mix’s required dependencies that you thought you were.