Error while compiling - "ParseError: 'import' and 'export' may appear only with 'sourceType: module'"

[Tarasulia]

Hi there. I'm new to Vue and need help. I'm trying to use vue-bulma-tabs in my project. I've install them via browserify, wrote all dependencies. But when i'm trying to run browserify it says "import Tabs from './Tabs' ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module' "

here is my package.json

"scripts": { "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", "sass-compiler": "node-sass -w sass/ -o ./css/", "dev": "npm-run-all --parallel watchify sass-compiler", "build": "cross-env NODE_ENV=production browserify -g envify src/main.js | uglifyjs -c warnings=false -m > dist/build.js" }, "dependencies": { "vue": "^2.0.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babelify": "^7.2.0", "browserify": "^13.0.1", "browserify-hmr": "^0.3.1", "cross-env": "^1.0.6", "envify": "^3.4.1", "http-server": "^0.9.0", "npm-run-all": "^2.1.2", "uglify-js": "^2.5.0", "vueify": "^9.1.0", "watchify": "^3.4.0", "node-sass": "^3.4.0", "vue-bulma": "0.0.35", "vue-bulma-modal": "^1.0.1", "vue-bulma-tabs": "^1.1.1" }, "browserify": { "transform": [ "vueify", "babelify" ] }

in my component file i'm doing

import {Tabs, TabPane} from "vue-bulma-tabs"

export default {
    name: "tabs",
    components: {
        Tabs,
        TabPane
    }
}

[Tarasulia]

This error is appears also for any vue bulma components

[luventa]

did you add vue-loader to webpack config?

[Tarasulia]

@luventa Instead of webpack i m using browserify, and there is vueify https://github.com/vuejs/vueify

Here is my npm dev script "watchify": "watchify -vd -p browserify -e src/main.js -o dist/build.js", "dev": "npm-run-all --parallel watchify sass-compiler",

[luventa]

let me try with vueify.

[luventa]

@Tarasulia You need to use webpack instead. Similar issue was created in vueify: https://github.com/vuejs/vueify/issues/171 And also, even if this issue is resolved, further changes are required. For example, in some components of vue-bulma, we use @import '~...'; to tell 'css-loader', which is a webpack loader, that css-files are inside node_modules. I'm not sure if there is a plugin for vueify or browserify has the same functionality.

[Tarasulia]

@luventa thank you for answer

[luventa]

welcome