Npm run deploy hangs if I change my assets

Phoenix Forum Questions / Help
, ,
1

Hi,

I’ve just hit this weird situation where npm run deploy --prefix=./assets has started hanging if I change any of the code in my assets.

For example, if I simply add var a; to app.js it hangs and no changes are made to priv/static/js/app.js. If I remove some code the same thing happens. It’s as if it’s locked at the current codebase and won’t allow any changes :man_shrugging:

Has anyone come across anything like this before?

Everything is fine in dev, code reloading picks up changes etc.

I’m completely stumped and would be grateful of any advice.

2

You are using production command in dev?

You might try…

$ rm -rf priv/static/*
$ npm run deploy --prefix assets/
$ mix phx.digest

… that should be radical

3

No, sorry for any confusion I’m not using the production command in dev.

Already did, but npm run deploy --prefix assets/ hangs if I change any of the current code.

It also hangs if I change a variable name, or even the contents of a string - really strange.

4

Maybe show your webpack.config.js, your Node and Phoenix version.

5

Node: 14.2.0
Phoenix: 1.5.7
Webpack:

const path = require('path');
const glob = require('glob');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: 5,
            compress: {
              pure_funcs: [
                "F2",
                "F3",
                "F4",
                "F5",
                "F6",
                "F7",
                "F8",
                "F9",
                "A2",
                "A3",
                "A4",
                "A5",
                "A6",
                "A7",
                "A8",
                "A9"
              ],
              pure_getters: true,
              keep_fargs: false,
              unsafe_comps: true,
              unsafe: true,
              passes: 2
            },
            mangle: true
          }
        }),
      ]
    },
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'
    },
    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.elm$/,
          exclude: [/elm-stuff/, /node_modules/],
          use: {
            loader: 'elm-webpack-loader',
            options: {
              cwd: __dirname,
              debug: false, //options.mode === "development",
              optimize: options.mode === "production"
            }
          }
        }
      ]
    },
    plugins: [
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
    ]
  }
};
6

I think I may have narrowed it down to the terser-webpack-plugin namely node_modules/terser-webpack-plugin/dist/worker.js:10. The line const result = minify(options); does not complete.

I’ve added the following to worker.js:

var stdout = require("stdout-stream");

and changed:

const result = minify(options);

to

stdout.write("\nworker, minify : start\n")

const result = minify(options);

stdout.write("\nworker, minify : end\n")

along with the following to minify.js:

var stdout = require("stdout-stream");

and changed

const minify = options => {
  const {
    file,
    input,
    inputSourceMap,
    minify: minifyFn
  } = options;

to

const minify = options => {
  stdout.write("minify")
  const {
    file,
    input,
    inputSourceMap,
    minify: minifyFn
  } = options;

So if all goes well, I should see the following output:

worker, minify : start
minify
worker, minify : end

But the only output I see is:

worker, minify : start

and then the process hangs without ever completing.

I thought I would at least see

worker, minify : start
minify

I think I’m truly at a dead end now, so any suggestions would be greatly appreciated.