[英]Django/React - You may need an appropriate loader to handle this file type
I'm having an error running the webpack dev script, this is the error. 我在运行webpack开发脚本时遇到错误, 这是错误。
This are the codes: 这是代码:
App.js App.js
import React from "react";
import ReactDOM from "react-dom";
import DataProvider from "./DataProvider";
import Table from "./Table";
import Form from "./Form";
const App = () => (
<React.Fragment>
<DataProvider endpoint="api/lead/"
render={data => <Table data={data} />} />
<Form endpoint="api/lead/" />
</React.Fragment>
);
const wrapper = document.getElementById("app");
wrapper ? ReactDOM.render(<App />, wrapper) : null;
package.json package.json
{
"name": "amazona_project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development ./amazona/frontend/src/index.js --output ./amazona/frontend/static/frontend/main.js",
"build": "webpack --mode production ./amazona/frontend/src/index.js --output ./amazona/frontend/static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"prop-types": "^15.6.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {},
"description": ""
}
webpack.config.js webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
.babelrc .babelrc
{
"presets": [
"@babel/preset-env", "@babel/preset-react"
],
"plugins": [
"transform-class-properties"
]
}
I'm sure the problem has something to do with the syntax, but I dont understand which part is wrong in my code. 我确定问题与语法有关,但是我不明白代码中哪一部分是错误的。 I would really appreaciate the help, thanks in advance.
我会非常感谢您的帮助,在此先感谢您。
You will need to setup a .babelrc file and webpack.config.js 您将需要设置一个.babelrc文件和webpack.config.js
The .babelrc file should contain .babelrc文件应包含
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
The webpack.config.js should contain webpack.config.js应该包含
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
You can use this link as reference in setting up your project 您可以使用此链接作为设置项目的参考
https://www.valentinog.com/blog/react-webpack-babel/#How_to_set_up_React_webpack_and_Babel_setting_up_the_project https://www.valentinog.com/blog/react-webpack-babel/#How_to_set_up_React_webpack_and_Babel_setting_up_the_project
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.