Browserify Failed!: 'import' and 'export' may appear only with 'sourceType: module'

[andrewdavidcostello]

elixir(function(mix) {
    mix
        .sass('admin/app.scss', 'src/public/admin/css/app.css')
        .browserify('admin/app.js', 'src/public/admin/js/bundle.js')
});

apps.js contains:

// Bootstrap
'accordion': require('vue-strap').accordion,
'datepicker': require('vue-strap').datepicker,
'modal': require('vue-strap').modal,
'panel': require('vue-strap').panel,

I am just calling the above with elixir 3.3.3 and receiving the error:

[20:02:31] gulp-notify: [Laravel Elixir] Browserify Failed!: 'import' and 'export' may appear only with 'sourceType: module'

Any pointers would be much appreciated as there is little to no info regarding this specific integration. I tried solutions to similar issues to no avail.

Apologies if this is better suited as an issue with Elixir.

Thanks.

[yuche]

@andrewdavidcostello
You may need a vueify and babel to compile .vue files.

[kylekz]

I use vueify and I get the same error when using vue-strap. Will I need to pipe it through babel first?

[andrewdavidcostello]

I may have to ditch elixir as there is little documentation on using the two together (Elixir + Babel). Having limited knowledge of the above will give it a go.

@xKairu If you get it working let me know, good to know (in a way) that it isn't an isolated issue.

[andrewdavidcostello]

I got this working with browserify by simply using window.Vuestrap instead for now and requiring the minified js file.

Hopefully figure out a way to get it working properly down the line.

[yuche]

I'm working on this issue. Maybe tomorrow this issue will be solved.

[andrewdavidcostello]

It's working great so far using the above method but if you have it done soon even better. Thanks for sorting.

[noahmatisoff]

+1 same problem, did what @andrewdavidcostello did.

[amanpatel]

@matisoffn are you on vue-strap 1.0.3 ? we changed the main to point to the dist/ version, which was the original cause of this issue (I believe).

[prog-rajkamal]

@amanpatel is this issue the reason why main points to dist version? It does not solve the current issue for sure.

I came across this issue recently. I traced the problem to babel/babelify#103 which suggested https://github.com/babel/babelify#why-arent-files-in-node_modules-being-transformed

After adding browserify transform (you can see my code in PR #156 commit 438c0f7 ), it works but as main points to dist version so I need to write require('vue-strap/src/index.js') instead of require('vue-strap')

So, is there any other reason for keeping main as it is?