Can't import vuesax regarding to babal-loader

[ganyariya]

Hello, I'd like to use vuesax , but I can't import vuesax.

Below, I write my environment

• OS: mac
• Node.js: v9.8.0
• Vuesax: 3.2.19
• I use npm package

And, my package.json is here.

{
  "name": "atcoder_save",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=development",
    "start": "webpack --watch  --mode=development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "buefy": "^0.6.6",
    "bulma": "^0.7.1",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "material-icons": "^0.2.3",
    "moment": "^2.22.2",
    "node-sass": "^4.9.2",
    "postcss-loader": "^2.1.6",
    "sass-loader": "^7.0.3",
    "scss-loader": "0.0.1",
    "style-loader": "^0.21.0",
    "vue": "^2.5.16",
    "vue-loader": "^15.2.6",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.16",
    "vuesax": "^3.2.19",
    "vuex": "^3.0.1",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0"
  }
}

And wepback config is here.

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: {
        background: path.join(__dirname, 'src', 'scripts', 'background.js'),
        popup: path.join(__dirname, 'src', 'scripts', 'popup.js'),
        options: path.join(__dirname, 'src', 'scripts', 'options.js'),
        mypage: path.join(__dirname, 'src', 'scripts', 'mypage.js'),
        atcoder: path.join(__dirname, 'src', 'scripts', 'atcoder.js'),
        codeforces: path.join(__dirname, 'src', 'scripts', 'codeforces.js')
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: 'scripts/[name].bundle.js',
    },
    target: "web",
    resolve: {
        extensions: ['ts', '.js'],
        modules:
            [
                'node_modules',
                path.resolve(__dirname, 'src')
            ],
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 9000,
        hot: true,
    },
    devtool: "cheap-module-source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {loader: 'babel-loader'}
            },
            {
                test: /\.vue$/,
                use: {loader: "vue-loader"}
            },
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader']
            },
            {
                test: /\.(sass|scss)$/,
                loader: [
                    'css-loader',
                    'sass-loader'
                ]
            },
        ],
    },
    plugins: [
        new CopyWebpackPlugin(
            [
                {
                    from: path.join(__dirname, 'src', 'manifest.json'),
                    to: path.join(__dirname, 'dist'),
                },
                {
                    from: path.join(__dirname, 'src', 'htmls'),
                    to: path.join(__dirname, 'dist/htmls')
                },
                {
                    from: path.join(__dirname, 'src', 'images'),
                    to: path.join(__dirname, 'dist/images')
                },
                {
                    from: path.join(__dirname, 'src', 'components'),
                    to: path.join(__dirname, 'dist/components')
                },
                {
                    from: path.join(__dirname, 'src', 'styles'),
                    to: path.join(__dirname, 'dist/styles')
                },
                {
                    from: path.join(__dirname, 'src', 'scripts', 'third'),
                    to: path.join(__dirname, 'dist', 'scripts', 'third')
                }
            ]
        ),
        new VueLoaderPlugin(),
    ]
}

I tried to import vuesax

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes.js';
import Vuesax from 'vuesax';
import 'vuesax/dist/vuesax.css';
Vue.use(VueRouter);

But, webpack can't compile vuesax and error massage exists.

ERROR in ./node_modules/vuesax/dist/vuesax.common.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Couldn't find preset "@vue/app" relative to directory "/Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/vuesax"
    at /Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (/Users/iwasakiyu/Desktop/AtCoder_Save/node_modules/babel-loader/lib/index.js:173:20)
 @ ./src/scripts/mypage.js 15:14-31

I think that the reason why I can't import is vuesax and babel-loader isn't compatible. How can I import vuesax?

Thank you.

[luisDanielRoviraContreras]

you have a repository to help you better and see the problem faster

[ganyariya]

Thank you for your advice. I made my repository. https://github.com/Ganariya/AtCoderBookMark

script/mypage.js is read by htmls/atcoder.html. And I want to use vuesax in mypage.js. But, webpack cannot compile with such that error.

[luisDanielRoviraContreras]

@Ganariya How do I execute the project? and why do not you use vue CLI 3

[ganyariya]

You can execute "npm start" and make files in dist. But it will be bad with error.

I didn't know vue CLI3 and, I had no confidence to integrate chrome extension's source code into vue CLI3.

[luisDanielRoviraContreras]

@Ganariya Still have the error?

[micah5]

@Ganariya Did you find a solution? I have the same issue

[micah5]

Nevermind, found the solution. For future devs:

npm install babel-plugin-css-modules-transform --save-dev

module.exports = {
  plugins: [
    [
      "css-modules-transform",
      {
        extractCss: "./node_modules/vuesax/dist/vuesax.css"
      }
    ]
  ]
}