admin管理员组文章数量:1331640
I'm trying to learn how to write a React App and set up from practically scratch.
I keep trying to run webpack --config webpack.dev.config.js
.
I keep getting this error. And I've tried using different loaders and presets.
What is wrong with my setup? Is it my npm node modules are outdated?
I've tried updating all my presets, loaders and even babel itself.
Error:
ERROR in ./src/index.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/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/babel-preset-es2015/lib/index.js
at createDescriptor (/Users/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
webpack.dev.config.js:
var path = require('path');
module.exports = {
mode: 'development',
// context: path.resolve(__dirname, 'src'),
entry: path.resolve(__dirname,'src/index.js'),
output: {
filename: 'main.js',
libraryTarget: "monjs2"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'],
plugins: ['transform-class-properties']
}
}
]
}
]
},
resolve: {
extensions: ['.js']
}
};
package.json :
{
"name": "react-imgur-album",
"version": "0.0.1",
"description": "React Component for displaying images in an Imgur Album",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.dev.config.js --progress --display-error-details"
},
"keywords": [
"imgur",
"react",
"react-ponents",
"ponent",
"images",
"photos",
"pics"
],
"author": "Kyle Calica",
"license": "ISC",
"dependencies": {
"@babel/preset-react": "^7.0.0",
"react-dom": "^16.5.2"
},
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"fixed": "^0.3.0",
"it": "^1.1.1",
"path": "^0.12.7",
"react": "^16.5.2",
"webpack": "^4.22.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
}
index.js:
import React, { Component } from 'react';
var imgurAPI = '/';
export default class ImgurAlbum extends Component {
constructor(props){
super(props);
this.state = {
imgurPosts: [],
isLoading: true
};
}
ponentDidMount(){
fetch(imgurAPI + this.props.album + '/images',{
'headers':{
'Authorizathion': 'client-id'
}
}).then(res => res.json())
.then(data => console.log(data));
}
render(){
return(
<div>
<h1>hi!</h1>
</div>
);
}
}
I notice I have two babel cores installed, I don't know how to remove one, or which one to keep. Or even how to select which one with webpack?
I'm trying to learn how to write a React App and set up from practically scratch.
I keep trying to run webpack --config webpack.dev.config.js
.
I keep getting this error. And I've tried using different loaders and presets.
What is wrong with my setup? Is it my npm node modules are outdated?
I've tried updating all my presets, loaders and even babel itself.
Error:
ERROR in ./src/index.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/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/babel-preset-es2015/lib/index.js
at createDescriptor (/Users/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/kyle.calica-steinhil/Code/react-ponents/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
webpack.dev.config.js:
var path = require('path');
module.exports = {
mode: 'development',
// context: path.resolve(__dirname, 'src'),
entry: path.resolve(__dirname,'src/index.js'),
output: {
filename: 'main.js',
libraryTarget: "monjs2"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'],
plugins: ['transform-class-properties']
}
}
]
}
]
},
resolve: {
extensions: ['.js']
}
};
package.json :
{
"name": "react-imgur-album",
"version": "0.0.1",
"description": "React Component for displaying images in an Imgur Album",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.dev.config.js --progress --display-error-details"
},
"keywords": [
"imgur",
"react",
"react-ponents",
"ponent",
"images",
"photos",
"pics"
],
"author": "Kyle Calica",
"license": "ISC",
"dependencies": {
"@babel/preset-react": "^7.0.0",
"react-dom": "^16.5.2"
},
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"fixed": "^0.3.0",
"it": "^1.1.1",
"path": "^0.12.7",
"react": "^16.5.2",
"webpack": "^4.22.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
}
index.js:
import React, { Component } from 'react';
var imgurAPI = 'https://api.imgur./3/album/';
export default class ImgurAlbum extends Component {
constructor(props){
super(props);
this.state = {
imgurPosts: [],
isLoading: true
};
}
ponentDidMount(){
fetch(imgurAPI + this.props.album + '/images',{
'headers':{
'Authorizathion': 'client-id'
}
}).then(res => res.json())
.then(data => console.log(data));
}
render(){
return(
<div>
<h1>hi!</h1>
</div>
);
}
}
I notice I have two babel cores installed, I don't know how to remove one, or which one to keep. Or even how to select which one with webpack?
Share edited Oct 25, 2018 at 5:59 Kyle Calica-St asked Oct 23, 2018 at 16:31 Kyle Calica-StKyle Calica-St 2,9636 gold badges32 silver badges64 bronze badges1 Answer
Reset to default 7I found my solution!
It's a babel mismatch. I had an old babel-core and babel-presets installed.
In Babel 7, it is best to install using:
npm i @babel/preset-react @babel/preset-env
then in your .babelrc
:
{
"presets" : ["@babel/preset-env","@babel/preset-react"]
}
I also uninstalled the old babel-preset-react
and babel-preset-es2015
for safe measure.
Still learning so I might be missing steps or understanding here. Please add if you believe you need more information or if I am wrong about anything, but I was able to get mine to build
本文标签:
版权声明:本文标题:javascript - PluginPreset files are not allowed to export objects, only functions. Removing and keeping babel installs? Selectio 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742266951a2443582.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论