New install of Phoenix fails in a Mac

Phoenix Forum Questions / Help
,
22

Thank you so much! It seems to be working now after the “sass”: “^1.27.0” replacement.

1 Like
23

I found errors again using another Mac with different installations and I ended up updating my package.json to try and fix it with Webpack 5. It is working but I have not tried it extensively. Basically I updated the references and deleted hard-source-webpack-plugin as it is no longer needed (or so I learned when searching for an answer)

node:internal/crypto/hash:105
    throw new ERR_INVALID_ARG_TYPE(
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Object
    at new NodeError (node:internal/errors:278:15)
    at Hash.update (node:internal/crypto/hash:105:11)
    ............
    at processTicksAndRejections (node:internal/process/task_queues:75:11) {
  code: 'ERR_INVALID_ARG_TYPE'
}

So my new files are:

Webpack.config.js

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

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

  return {
    optimization: {
      minimizer: [
        new TerserPlugin(),
        new CssMinimizerPlugin()
      ]
    },
    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: /\.[s]?css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader',
          ],
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
    ]
  }
};

package.json

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.2",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^1.1.5",
    "mini-css-extract-plugin": "^1.3.3",
    "sass": "^1.17.1",
    "sass-loader": "^10.1.0",
    "terser-webpack-plugin": "^5.0.3",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  }
}

dev.exs

  watchers: [
    node: [
      "node_modules/webpack/bin/webpack.js",
      "--mode",
      "development",
      "--watch-options-stdin",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]
1 Like
24

Updated the copy plugin to the latest version, and thus needed to modify webpack.config.js to the latest API:

/assets/package.json

-    "copy-webpack-plugin": "^5.1.2",
+    "copy-webpack-plugin": "^7.0.0",

/assets/webpack.config.js

-      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: "static", to: "../" },
+        ],
+      }),
2 Likes
25

That’s odd. I can see that PR, but a fresh Phoenix 1.5.8 project still uses the old node-sass for me.

26

from phoenix 1.6.0-dev changelog:

[mix phx.new] Replace deprecated node-sass with sass library

2 Likes