Je suis un novice en matière de réaction et de webpack4 et je n'ai pas non plus beaucoup d'expérience avec Javascript.
J'obtiens l'erreur suivante lorsque j'exécute npm run dev (voir package. json plus bas):
import React from "react";
import ReactDOM from "react-dom";
import DataProvider from "./DataProvider";
import Table from "./Table";
const App = () => (
<DataProvider endpoint="api/lead/" render={data => <Table data={data} />} />
);
const wrapper = document.getElementById("app");
wrapper ? ReactDOM.render(<App />, wrapper) : null;
Package.json ressemble à ceci:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
.babelrc:
XXX
Je suis ce tutoriel: https://www.valentinog.com/blog/tutorial -api-django-rest-react / # Django_REST_with_React_requirements .
MODIFIER: Mon webpack.config.js:
{
"presets": [
"@babel/preset-env", "@babel/preset-react"
],
"plugins": [
"transform-class-properties"
]
}
App.js:
{
"name": "django-drf-react-quickstart",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development ./project/frontend/src/index.js --output ./project/frontend/static/frontend/main.js",
"build": "webpack --mode production ./project/frontend/src/index.js --output ./project/frontend/static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.3.3",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"prop-types": "^15.7.2",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"weak-key": "^1.0.1",
"webpack": "^4.29.4",
"webpack-cli": "^3.2.3"
}
}
SOLUTION: Maintenant ça marche. J'ai joué avec certaines suggestions de @Reema Parakh dans les commentaires et j'ai obtenu une nouvelle erreur, alors j'ai appuyé sur CRTL-Z jusqu'à ce que tout soit revenu à la normale, et maintenant cela fonctionne. Je ne sais pas pourquoi maintenant.
3 Réponses :
Avec un chargeur approprié, vous devez essentiellement importer React dans ce fichier
import React from 'react'
De cette façon, il serait normal d'avoir le format jsx dans ce fichier De plus, votre extrait de code ne contient pas de DataProvider importé, donc je pense qu'il est également nécessaire d'importer dans ce fichier
Je suis tombé sur cette erreur, ce qui l'a corrigée pour moi a été de mettre .babelrc et webpack.config.js dans le même dossier que package.json < / code>. Je suivais le tutoriel et il était dit de les mettre dans le "dossier du projet" - dans ce cas, le dossier de niveau supérieur et non le dossier nommé projet !
Mettez votre webpack.config.js dans le même dossier que package.json et si cela ne résout pas le problème, supprimez node_modules < / code> et exécutez la commande npm install . Il réinstallera les node_modules et espère que cela résoudra votre problème.
Dans votre fichier
webpack.config.js, dans le tableau des règles, essayez d'ajouter ceci:query: {presets: ["@ babel / preset-env", "@ babel / preset-react" ]}pouvez-vous montrer à quoi ressemble votre
config webpack?