Using laravel-mix with Phoenix

General Prog (Archived)
, ,
1

I’m currently pulling my code into a fresh Phoenix 1.4 project, but quickly got frustrated with Webpack. laravel-mix looks like a nicer way to configure it, so I want to use it “instead”.

This is what I’m currently doing:

assets/package.json

{
  "scripts": {
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "laravel-mix": "^2.1.14"
  }
}

webpack.mix.js

let mix = require('laravel-mix');

mix.webpackConfig({
  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, '../deps'),
    ]
  }
})

mix.setPublicPath('../priv/static')
   .js('js/app.js', 'js/app.js')
   .copyDirectory('./static', '../priv/static');

assets/js/app.js

import "phoenix_html"

At first Webpack didn’t find the local phoenix_html, even with a local dependency in my package.json file. The custom config in my webpack.mix.js file fixed this.

The current problem I have is this:

ERROR in ../deps/phoenix_html/priv/static/phoenix_html.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "base" at 0, attempted to resolve relative to "/Users/zimt28/Desktop/app/deps/phoenix_html/priv/static"

I’ve tried to pull in the babel-plugin-transform-object-rest-spread as a dependency, added it as a plugin in my .babelrc file and some other things, but it just won’t work.

Has anyone managed to run laravel-mix with Phoenix? I’d like to get some advise on setting it up correctly, I have found some gists but following along didn’t lead do success.

(@LostKobrakai, can you help?)

2

I wrote about my setup when I use Vue with Phoenix. It uses Laravel Mix.

3 Likes