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
4 Jun 11, 2022
8.7k Jan 4, 2023
22.7k Jan 9, 2023
6 Jun 25, 2022
765 Dec 30, 2022
9 Nov 16, 2022
19 Dec 26, 2022
187 Jan 2, 2023
10 Oct 7, 2022
80.1k Dec 31, 2022
4k Dec 30, 2022
84 Nov 28, 2022
63 Dec 30, 2022
2 Jan 6, 2022
231 Dec 30, 2022
15.8k Jan 9, 2023
34.6k Jan 9, 2023
639 Jan 8, 2023
41.8k Jan 5, 2023