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