Error npm run production

Did you checked you app.scss file for any erros (Unclosed block,...)?

here my app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

seems no problem with it.

btw this is fresh install laravel 6

@hrace009 Post your resource scss code that has .navbar-toggler-icon

Is that just Bootstrap?

What does you webpack config file look like?

if i run it on dev mode, it running without any problem

@fylzero i don't know where to find webpack config file, can you be more specific? about that .navbar-toggler-icon there is so many result.

@hrace009 Maybe something got messed up in node_modules. I would delete node_modules folder... npm install then try running it again.

@fylzero if you mean this node_modules/webpack/bin/webpack.js

#!/usr/bin/env node

// @ts-ignore
process.exitCode = 0;

/**
 * @param {string} command process to run
 * @param {string[]} args commandline arguments
 * @returns {Promise<void>} promise
 */
const runCommand = (command, args) => {
    const cp = require("child_process");
    return new Promise((resolve, reject) => {
        const executedCommand = cp.spawn(command, args, {
            stdio: "inherit",
            shell: true
        });

        executedCommand.on("error", error => {
            reject(error);
        });

        executedCommand.on("exit", code => {
            if (code === 0) {
                resolve();
            } else {
                reject();
            }
        });
    });
};

/**
 * @param {string} packageName name of the package
 * @returns {boolean} is the package installed?
 */
const isInstalled = packageName => {
    try {
        require.resolve(packageName);

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

/**
 * @typedef {Object} CliOption
 * @property {string} name display name
 * @property {string} package npm package name
 * @property {string} binName name of the executable file
 * @property {string} alias shortcut for choice
 * @property {boolean} installed currently installed?
 * @property {boolean} recommended is recommended
 * @property {string} url homepage
 * @property {string} description description
 */

/** @type {CliOption[]} */
const CLIs = [
    {
        name: "webpack-cli",
        package: "webpack-cli",
        binName: "webpack-cli",
        alias: "cli",
        installed: isInstalled("webpack-cli"),
        recommended: true,
        url: "https://github.com/webpack/webpack-cli",
        description: "The original webpack full-featured CLI."
    },
    {
        name: "webpack-command",
        package: "webpack-command",
        binName: "webpack-command",
        alias: "command",
        installed: isInstalled("webpack-command"),
        recommended: false,
        url: "https://github.com/webpack-contrib/webpack-command",
        description: "A lightweight, opinionated webpack CLI."
    }
];

const installedClis = CLIs.filter(cli => cli.installed);

if (installedClis.length === 0) {
    const path = require("path");
    const fs = require("fs");
    const readLine = require("readline");

    let notify =
        "One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:";

    for (const item of CLIs) {
        if (item.recommended) {
            notify += `\n - ${item.name} (${item.url})\n   ${item.description}`;
        }
    }

    console.error(notify);

    const isYarn = fs.existsSync(path.resolve(process.cwd(), "yarn.lock"));

    const packageManager = isYarn ? "yarn" : "npm";
    const installOptions = [isYarn ? "add" : "install", "-D"];

    console.error(
        `We will use "${packageManager}" to install the CLI via "${packageManager} ${installOptions.join(
            " "
        )}".`
    );

    const question = `Do you want to install 'webpack-cli' (yes/no): `;

    const questionInterface = readLine.createInterface({
        input: process.stdin,
        output: process.stderr
    });
    questionInterface.question(question, answer => {
        questionInterface.close();

        const normalizedAnswer = answer.toLowerCase().startsWith("y");

        if (!normalizedAnswer) {
            console.error(
                "You need to install 'webpack-cli' to use webpack via CLI.\n" +
                    "You can also install the CLI manually."
            );
            process.exitCode = 1;

            return;
        }

        const packageName = "webpack-cli";

        console.log(
            `Installing '${packageName}' (running '${packageManager} ${installOptions.join(
                " "
            )} ${packageName}')...`
        );

        runCommand(packageManager, installOptions.concat(packageName))
            .then(() => {
                require(packageName); //eslint-disable-line
            })
            .catch(error => {
                console.error(error);
                process.exitCode = 1;
            });
    });
} else if (installedClis.length === 1) {
    const path = require("path");
    const pkgPath = require.resolve(`${installedClis[0].package}/package.json`);
    // eslint-disable-next-line node/no-missing-require
    const pkg = require(pkgPath);
    // eslint-disable-next-line node/no-missing-require
    require(path.resolve(
        path.dirname(pkgPath),
        pkg.bin[installedClis[0].binName]
    ));
} else {
    console.warn(
        `You have installed ${installedClis
            .map(item => item.name)
            .join(
                " and "
            )} together. To work with the "webpack" command you need only one CLI package, please remove one of them or use them directly via their binary.`
    );

    // @ts-ignore
    process.exitCode = 1;
}

@fylzero i have try to remove it, and npm install again, but still same result

@fylzero btw just found webpack config file, maybe this is what you mean,

 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
 */
let mix = require('../src/index');

let ComponentFactory = require('../src/components/ComponentFactory');

new ComponentFactory().installAll();

require(Mix.paths.mix());

/**
 * Just in case the user needs to hook into this point
 * in the build process, we'll make an announcement.
 */

Mix.dispatch('init', Mix);

/**
 * Now that we know which build tasks are required by the
 * user, we can dynamically create a configuration object
 * for Webpack. And that's all there is to it. Simple!
 */

let WebpackConfig = require('../src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

@hrace009 I just meant your webpack.mix.js

@fylzero ohhh that file, here it is

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/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

@hrace009 Looks like you're looking at a server build or SSH into a server... are you able to run npm run production locally?

@fylzero this is at my PC using xampp, when i run npm run production it give error message like on the top this discussion

@hrace009 Try removing @import 'variables'; from your app.scss file and see if that stops it.

@hrace009 This is the suggested fix I found...

1

In Your assets/styles/main.scss insert at the top of the file (yes, before @import "common/variables";, we need the functions for str-replace());

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

2

In Your styles/common/_variables.scss insert:

$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{str-replace(str-replace(#{$navbar-dark-color}, "(", "%28"), ")", "%29")}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{str-replace(str-replace(#{$navbar-light-color}, "(", "%28"), ")", "%29")}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

Detail

The Problem aren't the spaces. The brackets from the stroke='#{$navbar-dark-color}' causes the problem. So if we str-replace() the ( with %28 and the ) with %29 you can run yarn run build:production without removing your scss.

I had the same issue last week, its something to do with Bootstrap files.

Here's the solution that worked for me (see the best answer in the following post):

https://laracasts.com/discuss/channels/elixir/npm-run-prod-fails-with-bootstrap?page=1

@mrkarma4ya wow thanks, this is solve my problem