Failed to compile You may need an appropriate loader to handle this file type. #! /usr/bin/env node "use strict";

[karneaud]

I'm trying to use your starter kit to run a wordpress development workflow and have the following:--

my package.json

{
  "name": "gblsf-wp-child-theme",
  "version": "0.0.1",
  "description": "Wordpress, Docker, Webpack, Win.",
  "scripts": {
    "start": "NODE_ENV=development node ./webpack-configs/webpack.dev.js",
    "build": "NODE_ENV=production node ./webpack-configs/webpack.prod.js",
    "postinstall": "npm run build"
  },
  "author": "jaredpalmer",
  "license": "MIT",
  "dependencies": {

  },
  "devDependencies": {
    "assets-webpack-plugin": "^3.5.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.4.0",
    "browser-sync": "^2.18.8",
    "browser-sync-webpack-plugin": "^1.1.4",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "node-sass": "^4.3.0",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^1.1.0"
  }
}

`

my web config

'use strict';

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const AssetsPlugin = require('assets-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const path = require('path');
const fs = require('fs');

// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebookincubator/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());

function resolveApp(relativePath) {
  return path.resolve(appDirectory, relativePath);
}

const paths = {
  appSrc: resolveApp('src'),
  appBuild: resolveApp('../www'),
  appIndexJs: resolveApp('index.js'),
  appNodeModules: resolveApp('node_modules'),
};

const DEV = process.env.NODE_ENV === 'development';

module.exports = {
  bail: !DEV,
  // We generate sourcemaps in production. This is slow but gives good results.
  // You can exclude the *.map files from the build during deployment.
  target: 'web',
  devtool: DEV ? 'cheap-eval-source-map' : 'source-map',
  entry: [paths.appIndexJs],
  output: {
    path: paths.appBuild,
    filename: DEV ? 'bundle.js' : 'bundle.[hash:8].js',
  },
  module: {
    rules: [
      // Disable require.ensure as it's not a standard language feature.
      { parser: { requireEnsure: false } },
      // Transform ES6 with Babel
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        include: paths.appSrc,
      },
      {
        test: /.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                plugins: () => [
                  autoprefixer({
                    browsers: [
                      '>1%',
                      'last 4 versions',
                      'Firefox ESR',
                      'not ie < 9', // React doesn't support IE8 anyway
                    ],
                  }),
                ],
              },
            },
            'sass-loader',
          ],
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin(DEV ? 'bundle.css' : 'bundle.[hash:8].css'),
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
      DEBUG: false,
    }),
    new AssetsPlugin({
      path: paths.appBuild,
      filename: 'assets.json',
    }),
    !DEV &&
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          screw_ie8: true, // React doesn't support IE8
          warnings: false,
        },
        mangle: {
          screw_ie8: true,
        },
        output: {
          comments: false,
          screw_ie8: true,
        },
        sourceMap: true,
      }),
    DEV &&
      new FriendlyErrorsPlugin({
        clearConsole: false,
      }),
    DEV &&
      new BrowserSyncPlugin({
        notify: false,
        host: 'localhost',
        port: 4000,
        logLevel: 'silent',
        files: ['./src/**/*.php'],
        proxy: 'http://192.168.99.100:8080/',
      }),
  ].filter(Boolean),
};

the build include
Note where I changed the target mode from 'web' to 'node' because of
josephsavona/valuable#9

'use strict';

process.env.NODE_ENV = 'production';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

const webpack = require('webpack');
const config = require('../webpack.config');

// had to change this to node because of this error https://github.com/josephsavona/valuable/issues/9
config.target = 'node'; 

const clientCompiler = webpack(config);
console.log('[0/1] Creating an optimized production build...');
compile(config, (err, stats) => {
  handleWebpackErrors(err, stats);
  console.log('[1/1] Build successful!');
});

// Wrap webpack compile in a try catch.
function compile(config, cb) {
  let compiler;
  try {
    compiler = webpack(config);
  } catch (e) {
    printErrors('Failed to compile.', [e]);
    process.exit(1);
  }
  compiler.run((err, stats) => {
    cb(err, stats);
  });
}

// Print out errors
function printErrors(summary, errors) {
  console.log(summary);
  console.log();
  errors.forEach(err => {
    console.log(err.message || err);
    console.log();
  });
}

// Gracefully handle errors and print them to console.
function handleWebpackErrors(err, stats) {
  if (err) {
    printErrors('Failed to compile.', [err]);
    process.exit(1);
  }

  if (stats.compilation.errors && stats.compilation.errors.length) {
    printErrors('Failed to compile.', stats.compilation.errors);
    process.exit(1);
  }
  if (
    process.env.CI &&
    stats.compilation.warnings &&
    stats.compilation.warnings.length
  ) {
    printErrors(
      'Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.',
      stats.compilation.warnings
    );
    process.exit(1);
  }
}

and when I run I get

[0/1] Creating an optimized production build...
wp-theme | Failed to compile.
wp-theme |
wp-theme | Module parse failed: /app/node_modules/browser-sync/index.js Unexpected character '#' (1:0)
wp-theme | You may need an appropriate loader to handle this file type.
wp-theme | | #! /usr/bin/env node
wp-theme | | "use strict";
wp-theme | |
wp-theme |
wp-theme | bundle.c07e4989.js from UglifyJs
wp-theme | Unexpected token: name (Template) [(webpack)/lib/Template.js:14,0][bundle.c07e4989.js:309,23]

I'm new to the web pack scenario but what does this mean?

[jaredpalmer]

you do not want to set target node. set

config.node =   { fs: "empty" }

Make sure to include #! /usr/bin/env node at the top of build.js

[karneaud]

this worked