Upgrading from using Gulp to Webpack with Laravel Mix

Question

I have been in the process of upgrading a project originally built in Laravel 5.2 to Laravel 5.6.

Back in Laravel 5.2, we were using Gulp with Laravel Elixir. In Laravel 5.6, they are now using Webpack with Laravel Mix.

I found a gist that seemed to cover most of the steps.

The app was originally built by an agency and then handed on to me when I was hired. In their customised version of the app.js file, they have this:

// Bootstrap Rim
System.import('rim/bootstrap.js').then(function(Rim) {
    Rim.Bootstrap.all();
});

Which is part of the greater app.js file:

System.config({
    baseURL: '/js'
});

require('./core/bootstrap');
require('./core/components');

/**
 * Create the application.
 */
window.App = new Vue({
    el: '#page',

    /**
     * Bootstrap the application. Load the initial data.
     */
    mounted: function() {
        // Bootstrap Rim
        System.import('rim/bootstrap.js').then(function(Rim) {
            Rim.Bootstrap.all();
        });

        let self = this;
    },

    methods: {
        navigate: function(location) {
            window.location = location;
        }
    }
});

I found this question for using System.import() in Webpack and used the top answer:

I installed the System dynamic import package as mentioned; npm install --save-dev babel-plugin-syntax-dynamic-import
I added a .babelrc file to the root of my project with the below contents (Laravel Mix automatically picks this up when running Webpack)

{ "plugins": ["syntax-dynamic-import"] }

When I run npm run dev though, I get the below error:

ERROR Failed to compile with 44 errors
8:29:23 AM These dependencies were not found:

rim/bootstrap.js in ./resources/assets/js/app.js

rim/dialog.js in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/fermentables-screen.vue, ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/hops-screen.vue and 8 others

rim/form-notification.js in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/adjuncts-screen.vue, ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/notifications-screen.vue and 7 others

rim/message.js in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/yeasts-screen.vue, ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/hops-screen.vue and 14 others

rim/select2.js in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/common/components/select2-component.vue, ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/common/components/select2-ajax-component.vue

To install them, you can run: npm install --save rim/bootstrap.js rim/dialog.js rim/form-notification.js rim/message.js rim/select2.js

These relative modules were not found:

../../images/search/delete_icon.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less

../../images/search/search_icon.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less

../img/checkbox_icons.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less

./select2-spinner.gif in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less

./select2.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less

./select2x2.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less fs.js:1001 binding.stat(pathModule._makeLong(path), statValues);

This all worked fine when I was using Gulp, so I'm sure it can't be that hard to get this working...

Running npm install --save rim/bootstrap.js rim/dialog.js rim/form-notification.js rim/message.js rim/select2.js resulted in a bunch of errors trying to fetch the files externally.

The app.js is in resources/assets/js/app.js and the rim/bootstrap.js is part of a compiled rim.js file located in public/js/rim.js.

A sample of what that rim.js file is included below:

What more do I need to get this working?

Possible duplicate of [Switching from Gulp to Webpack](https://stackoverflow.com/questions/39753642/switching-from-gulp-to-webpack) — Mike Stratton, Apr 20 '18 at 06:43
@MikeStratton similar, but not a duplicate. It seems my issues stem from System.import() which that question does not shed any light to. — James, Apr 20 '18 at 06:46
Upgrading from Gulp to Webpack is a likely to be a multi-faceted problem that is not addressed by fixing just your System.import() problem. — Mike Stratton, Apr 20 '18 at 06:49
@MikeStratton quite possibly. The current issue I’m dealing with is this though; when and if I can get past it then I’ll see if there are any other issues. Otherwise I will just stick with Gulp. — James, Apr 20 '18 at 06:52

Upgrading from using Gulp to Webpack with Laravel Mix

0 Answers0