Cannot use `Import On Demand` with Vue Cli 3.0

[zeroby0]

This is probably not a bug with at-ui itself. I used the configuration provided in quickstart (as shown below) and I was unable to build my app. Please review if it's an issue with the configuration provided and update on the website as required.

I'm using vue cli V 3.0.0, node v10.8.0.

Steps to reproduce

• Create a new vue app via vue cli. Mine was created using vue ui command.
• Install AT-UI yarn add at-ui at-ui-style
• Follow steps in Import On Demand section of https://at-ui.github.io/at-ui/#/en/docs/quickstart
  • Note: Description shows babel-plugin-import and command is for babel-plugin-component
  • Installing babel-plugin-component
    • yarn add babel-plugin-component --dev
    • The default babel.config.js is this

          module.exports = {
            presets: [
              '@vue/app'
            ],
          };

 * Changing it to

          module.exports = {

            presets: [
              '@vue/app',
              'es2015', 
              'stage-2'
            ],

            plugins: [["import", {
              "libraryName": "at",
              "libraryDirectory": "src/components"
            }]]
          };

      * Now run `yarn serve`

 ERROR  Failed to compile with 1 errors                                                                        15:48:16

 error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-plugin-import' from '/Users/aravind/Desktop/houston'
    at Function.module.exports [as sync] (/Users/aravind/Desktop/houston/node_modules/resolve/lib/sync.js:43:15)
    at resolveStandardizedName (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/files/plugins.js:100
:31)
    at resolvePlugin (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/files/plugins.js:53:10)
    at loadPlugin (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/files/plugins.js:61:20)
    at createDescriptor (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:135:2
1)
    at items.map (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:87:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:87:2
9)
    at createPluginDescriptors (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.j
s:83:10)
    at plugins (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:44:19)
    at plugins (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:34:25)
    at mergeChainOpts (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-chain.js:307:26)
    at /Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-chain.js:271:7
    at buildRootChain (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-chain.js:90:20)
    at loadPrivatePartialConfig (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/partial.js:51:55)
    at Object.loadPartialConfig (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/partial.js:74:18)

 @ multi (webpack)-dev-server/client?http://172.16.133.75:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

  * Stop the server and run `yarn add babel-preset-es2015 --dev` and then `yarn serve`

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-plugin-import' from '/Users/aravind/Desktop/houston'
    at Function.module.exports [as sync] (/Users/aravind/Desktop/houston/node_modules/resolve/lib/sync.js:43:15)
    at resolveStandardizedName (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/files/plugins.js:100
:31)
    at resolvePlugin (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/files/plugins.js:53:10)
    at loadPlugin (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/files/plugins.js:61:20)
    at createDescriptor (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:135:2
1)
    at items.map (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:87:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:87:2
9)
    at createPluginDescriptors (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.j
s:83:10)
    at plugins (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:44:19)
    at plugins (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:34:25)
    at mergeChainOpts (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-chain.js:307:26)
    at /Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-chain.js:271:7
    at buildRootChain (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-chain.js:90:20)
    at loadPrivatePartialConfig (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/partial.js:51:55)
    at Object.loadPartialConfig (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/partial.js:74:18)

 @ multi (webpack)-dev-server/client?http://172.16.133.75:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 * So then I installed `yarn add babel-plugin-import --dev` and ran `yarn serve`

 error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/aravind/Desktop/houston/node_mo
dules/babel-preset-es2015/lib/index.js
    at createDescriptor (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:162:1
1)
    at items.map (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:87:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:87:2
9)
    at createPresetDescriptors (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.j
s:79:10)
    at presets (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:61:19)
    at presets (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-descriptors.js:51:25)
    at mergeChainOpts (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-chain.js:308:26)
    at /Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-chain.js:271:7
    at buildRootChain (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/config-chain.js:90:20)
    at loadPrivatePartialConfig (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/partial.js:51:55)
    at Object.loadPartialConfig (/Users/aravind/Desktop/houston/node_modules/@babel/core/lib/config/partial.js:74:18)
    at Object.<anonymous> (/Users/aravind/Desktop/houston/node_modules/babel-loader/lib/index.js:82:26)
    at Generator.next (<anonymous>)
    at step (/Users/aravind/Desktop/houston/node_modules/babel-loader/lib/index.js:3:221)
    at _next (/Users/aravind/Desktop/houston/node_modules/babel-loader/lib/index.js:3:409)

 @ multi (webpack)-dev-server/client?http://172.16.133.75:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I keep ending up at Error: Plugin/Preset files are not allowed to export objects, only functions. no matter what I try. I tried yarn add babel-preset-stage-2 --dev, I tried changing the order of presets.

On removing the eslint2015 and stage-2 presets from babel.config.js, the build succeeds, but I cannot use at-ui components. (Unknown custom element: <at-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option. )

Here is my package.json if that might help.

{
  "name": "houston",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "at-ui": "^1.3.3",
    "at-ui-style": "^1.5.1",
    "register-service-worker": "^1.0.0",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-eslint": "^3.0.0",
    "@vue/cli-plugin-pwa": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "@vue/eslint-config-airbnb": "^3.0.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.8.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "lint-staged": "^7.2.0",
    "vue-template-compiler": "^2.5.17"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

Which browser?

Node v10.8.0. Vue cli 3.0.0. I'm on Macos Mojave 10.14 Beta (18A365a), but I don't think that is the problem.

What is expected?

That vue serve builds with given babel configuration.

What is actually happening?

Reproduction Link

[zeroby0]

houston.zip
I'm adding the project as zip archive [365 KB] incase you'd like to take a closer look.

Thank you.

[hye]

maybe you can check #115

[zeroby0]

Thanks for the reply 😄. I don't have the project with me right now, but I'll try it this weekend. I'm closing the issue for now - I'll reopen it if I can't solve it after looking at #115
Thanks :D