Getting error using browserify

[jaideepdas]

I am using vue cli browserify setup. I am getting error.
import errorDisplay from '../components/errorDisplay.vue'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'
My package.json looks like
{ "name": "xxx", "version": "0.1.0", "description": "xxx", "author": "xxx", "private": true, "scripts": { "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", "serve": "http-server -o -c 1 -a localhost", "dev": "npm-run-all --parallel watchify serve", "build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js" }, "browserify": { "transform": [ [ "babelify", { "presets": [ "es2015", "stage-2" ] } ], "vueify" ] }, "browser": { "vue": "vue/dist/vue.common.js" }, "dependencies": { "lodash": "^4.17.4", "q": "^1.5.0", "vue": "^2.0.1", "vue-formly": "^2.5.0", "vue-formly-bootstrap": "^2.2.7", "vue-input-tag": "0.0.16", "vue-resource": "^1.3.4", "vue-router": "^2.7.0", "vue-strap": "github:wffranco/vue-strap", "vue2-filters": "^0.2.2" }, "devDependencies": { "babel-core": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-stage-2": "^6.0.0", "babel-runtime": "^6.0.0", "babelify": "^7.2.0", "browserify": "^13.1.0", "browserify-hmr": "^0.3.1", "cross-env": "^2.0.0", "envify": "^3.4.1", "http-server": "^0.9.0", "npm-run-all": "^2.3.0", "proxyquireify": "^3.0.1", "uglify-js": "^2.5.0", "vueify": "^9.0.0", "watchify": "^3.4.0" } }

Not sure why its failing to bundle.

[matt-sanders]

@jaideepdas I'll take a look at the error and get back to you k. Thanks for using Vue Formly!

[jaideepdas]

Sure, thanks for replying.

…

On 23 Oct 2017 11:45 pm, "matt-sanders" ***@***.***> wrote: @jaideepdas <https://github.com/jaideepdas> I'll take a look at the error and get back to you k. Thanks for using Vue Formly! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABQtuP6pssQ4md5roYgzfoxYyRE3L-r8ks5svNe3gaJpZM4QCflq> .

[matt-sanders]

@jaideepdas I just tried out the default browserify tempate and it all worked fine. then I switched the package.json file for the one you provided and again it worked fine. Have you tried doing a clean npm install to see if that fixes it? Also how are you running Vue Formly? Are you using:

import VueFormly from 'vue-formly';
import VueFormlyBootstrap from 'vue-formly-bootstrap';
Vue.use(VueFormly);
Vue.use(VueFormlyBootstrap);

or

const VueFormly = require('vue-formly');
const VueFormlyBootstrap = require('vue-formly-bootstrap');
Vue.use(VueFormly);
Vue.use(VueFormlyBootstrap);

I tried both of those and it worked.

[jaideepdas]

@matt-sanders
I am initiating it like
import VueFormly from 'vue-formly'; import VueFormlyBootstrap from 'vue-formly-bootstrap'; Vue.use(VueFormly); Vue.use(VueFormlyBootstrap);

without the semi colons. Nothing special. How are you running your dev bundler. I am using vuejs cli's
npm run dev
Please share if any other information can help you fix this.

[matt-sanders]

hmm yea, very odd. I firstly just created a new project using vue init browserify my-project then the usual npm install etc etc and then finally npm run dev.

Can you try with a clean install and let me know if the issue is still happening?

[jaideepdas]

Still same error

`D:\workspace\formly_test_app\node_modules\vue-formly-bootstrap\src\fields\baseField.js:1
import errorDisplay from '../components/errorDisplay.vue';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

D:\workspace\formly_test_app\node_modules\vue-formly-bootstrap\src\fields\baseField.js:1
import errorDisplay from '../components/errorDisplay.vue';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module`

I am attaching the source code you can set it up and try
formly_test_app.zip

[matt-sanders]

thanks @jaideepdas that helped heaps. So what I found is that the error when you're trying to import baseField.js from vue-formly-bootstrap in your components/DateField.vue file. I'm not entirely sure why this isn't working but I'll look into it. For the meantime, just copy those files locally and import them that way. I'll notify you here when I've found a fix.

[jaideepdas]

@matt-sanders I suspect it could be something to do with babelify presets. I wonder how was your try with browserify different from mine as you said it worked for you when you tried from scratch