Turns out this was caused by trying to symlink the library into the project.
Unknown plugin "transform-object-rest-spread"
First off, maybe my search-fu isn't up to par or I don't have a good enough understanding of the issue to apply solutions found elsewhere, but I did search for this answer before coming here.
Long story short I'm trying to break my Vue UI up in a way very similar (basically identical) to Laravel Spark, where mix is told to add a vendor library to the modules which contains the core business logic and is extended as Vue mixins on the consuming side.
However, even when I try to build up a skeleton of this architecture mix complians that I'm using an Unknown plugin "transform-object-rest-spread" and I haven't been able to get to the bottom of that.
In my library code I have a resources/js/modpacks folder with a current-modpacks.js file which contains the following:
module.exports = {
/*
* The component's data.
*/
data() {
return {
modpacks: []
}
}
};
then in my host application, I have a similar current-modpacks.js file located in resources/js/components/solder/modpacks/current-modpacks.jswhich imports the core file and applies it as a mixin:
var base = require('modpacks/current-modpacks');
Vue.component('spark-current-modpacks', {
mixins: [base]
});
The final piece to the puzzle is telling webpack (through mix) to include the library JS as a module:
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')
.webpackConfig({
resolve: {
modules: [
path.resolve(__dirname, 'vendor/technicpack/solder-framework/resources/js'),
'node_modules'
],
alias: {
'vue$': mix.inProduction() ? 'vue/dist/vue.min' : 'vue/dist/vue.js'
}
}
});
Even this simple of an implementation results in an error though, the full dump:
ERROR in .-framework/resources/js/modpacks/current-modpacks.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "base" at 0, attempted to resolve relative to "/Users/kyleklaus/technicpack/solder-framework/resources/js/modpacks"
at /Users/kyleklaus/technicpack/solder/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
at Array.map (<anonymous>)
at Function.normalisePlugins (/Users/kyleklaus/technicpack/solder/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/Users/kyleklaus/technicpack/solder/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init (/Users/kyleklaus/technicpack/solder/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/kyleklaus/technicpack/solder/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/kyleklaus/technicpack/solder/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/kyleklaus/technicpack/solder/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/kyleklaus/technicpack/solder/node_modules/babel-loader/lib/index.js:50:20)
at /Users/kyleklaus/technicpack/solder/node_modules/babel-loader/lib/fs-cache.js:118:18
at ReadFileContext.callback (/Users/kyleklaus/technicpack/solder/node_modules/babel-loader/lib/fs-cache.js:31:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:235:13)
@ ./resources/js/components/solder/modpacks/current-modpacks.js 1:11-47
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss
I'm not sure what I'm doing wrong; anybody have any thoughts?
Please or to participate in this conversation.