getting an error when executing my react module
'classProperties' isn't currently enabled (44:11):
}
43 | // componentDidUpdate or try this
> 44 | onClick = (e) => {
| ^
45 | e.preventDefault();
46 | const url = `${this.props.url}`;
47 | if(this.props.method === "GET"){
Add #babel/plugin-proposal-class-properties (https://git.io/vb4SL) to
the 'plugins' section of your Babel config to enable transformation.
I tried the solutions still get the error after re building.
Support for the experimental syntax 'classProperties' isn't currently enabled
package.json
{
"name": "blahmodule",
"version": "1.0.0",
"description": "a fetch module for our project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "./node_modules/.bin/babel src --out-file index.js"
},
"peerDependencies": {
"react": "^16.6.6",
"react-dom": "^16.6.3",
"axios": "^0.19.0"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"axios": "^0.19.0"
}
}
.babelrc
I tried changing the .babelrc to babel.config.js with module.exports, but still no success. also with and without "loose": true
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
code from the beginning
import React, {Component} from 'react';
import axios from 'axios';
class MyFetch extends Component {
constructor(props){
super(props);
this.state = {
data:[],
startTime:'',
responseTime:''
}
}
componentWillMount(){
.....
}
// componentDidUpdate or try this
onClick = (e) => {
e.preventDefault();
const url = `${this.props.url}`;
if(this.props.method === "GET"){
axios.get(url).then( res => {
this.setState({
data: res.data
})
console.log(this.state.data)
})
}
else if(this.props.method === "POST"){
axios.get(url).then( res => {
this.setState({
data: res.data
})
console.log(this.state.data)
})
}
}
render(){
return (
<div>
{this.props.url ? (
<button onClick={this.onClick}>Get Response Time</button>
):(
null
)}
{this.state.responseTime ? (
<h3>{this.state.responseTime}</h3>
):(
null
)}
</div>
);
}
}
export default MyFetch;
Fixed it by adding webpack, i deleted .babelrc because i included in webpack.config.js. Now i guess i have a reason to use webpack in my projects.
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/react'],
plugins:['#babel/plugin-proposal-class-properties']
}
}
}
]
},
externals: {
'react': 'commonjs react',
'reactDOM': 'react-dom'
},
};
For beginners, the best way to start working on React is to use create-react-app to create a ready to go clean boilerplate. Have a look at the docs and don't waste time configuring things but focus on writing code for your app.
https://github.com/facebook/create-react-app#npm
Related
I am learning React and flask and have been trying to set it up primarly using this video and the steps there.
https://www.youtube.com/watch?v=TKIHpoF8ZIk
Though when trying to get babel to work and running "npm run build" I get the response "Error Cannot find module 'babel-preset-react'". I tried this solution Cannot find module 'babel-preset-react' but could still not get it to work.
Does anyone know how to solve this issue? Thanks
My code:
package.json file
{
"name": "react_test",
"version": "1.0.0",
"description": "react test",
"main": "index.jsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --progress -d --config webpack.config.js -watch",
"build": "webpack"
},
"keywords": [
"python",
"react"
],
"babel": {
"presets": [
"react",
"es2015"
]
},
"author": "J",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"dependencies": {}
}
My webpack.config.js file
const webpack = require('webpack');
const path = require('path')
const config = {
entry: __dirname + '/js/index.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
// path: __dirname + '/dist',
filename: 'bundle.js'
},
resolve:{
extensions: ['.js', '.jsx','.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
use:'babel-loader'
}
]
}
};
module.exports = config;
index.html file
<!doctype html>
<html>
<body>
<div id = "content" />
<script src="dist/bundle.js" type = "text/javascript">
</script>
</body>
</html>
index.jsx file
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("content"));
app.jsx file
import React from "react";
export default class App extends React.Component{
render(){
return <p> Hello React </p>;
}
}
I am trying to setup a React project using Webpack. It's a simple app that loads an mdx file and parses it. When I try to run the app it returns 'Uncaught TypeError: path.parse is not a function'
I have tried importing parse from 'path' and importing parse from 'path-browserify' but it's still not working
index.js:
import React, { lazy, Component, Suspense } from "react";
import { importMDX } from "mdx.macro";
import ReactDOM from "react-dom";
// import path from "path";
// import { parse } from "path";
import path from "path-browserify";
// import { parse } from "path-browserify";
const Content = lazy(() => importMDX("./index.mdx"));
class App extends Component {
render() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<Content />
</Suspense>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
webpack.config.js:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.mdx?$/,
use: ["babel-loader", "#mdx-js/loader"]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
})
],
node: {
fs: "empty",
module: "empty"
}
};
package.json:
{
"name": "doc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"#mdx-js/loader": "^1.4.0",
"babel-loader": "^8.0.6",
"fs": "0.0.1-security",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"path": "^0.12.7",
"path-browserify": "^1.0.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
},
"dependencies": {
"#mdx-js/react": "^1.4.0",
"mdx.macro": "^0.2.8",
"react": "^16.9.0",
"react-dom": "^16.9.0"
}
}
Error:
Uncaught TypeError: path.parse is not a function
at Function.module.exports.sync (index.js:28)
at Function.module.exports.sync (index.js:8)
at module.exports (index.js:17)
at eval (mdx.macro.js:11)
at Object../node_modules/mdx.macro/mdx.macro.js (main.js:11066)
at __webpack_require__ (main.js:20)
at eval (index.js:4)
at Module../index.js (main.js:97)
at __webpack_require__ (main.js:20)
at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:2:18)
You don't need to include extra dependency for path. path is global dependency of node js.
npm remove path or yarn remove path
and
npm remove path-browserify or yarn remove path-browserify
and clear node cache
npm clear cache
can you try this?
how do I write my config, so I can run successfully?
I do not know what's wrong with my webpack.config.js
or wrong code in other files?
can someone tell me what's wrong with my code?
webpack.config.js
var path = require('path');
module.exports = {
entry: './project/frontend/src/index.js',
output: {
path: path.join(__dirname, 'project/frontend/static/frontend/'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
],
rules:[
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
}
};
package.json
{
"name": "django-drf-react-quickstart",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"weak-key": "^1.0.1",
"webpack": "^4.32.0",
"webpack-cli": "^3.3.2"
},
"dependencies": {
"bootstrap": "^4.3.1",
"css-loader": "^2.1.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.9",
"react-dom": "^16.8.6",
"reactstrap": "^8.0.0",
"style-loader": "^0.23.1"
}
}
index.js
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
import App from "./components/app";
app.js
import React, { Fragment, Component } from "react";
import ReactDOM from "react-dom";
import DataProvider from "./DataProvider";
import Table from "./Table";
import Form from "./Form";
import { Button } from 'reactstrap';
class App extends Component {
constructor (props) {
super(props);
}
render () {
console.log('----- in App render -----')
return(
<Fragment>
<DataProvider
endpoint="api/lead/"
render={data => <Table data={data} />} />
<Form endpoint="api/lead/" />
<Button color='danger'>Danger!</Button>
</Fragment>
);
}
}
const wrapper = document.getElementById("app");
wrapper ? ReactDOM.render(<App />, wrapper) : null;
the error messages when i npm run dev
ERROR in ./project/frontend/src/components/app.js 18:6
Module parse failed: Unexpected token (18:6)
You may need an appropriate loader to handle this file type.
| console.log('----- in App render -----')
| return(
> <Fragment>
| <DataProvider
| endpoint="api/lead/"
# ./project/frontend/src/index.js 2:0-35
I do not know what's wrong with my webpack.config.js
or wrong code in other files?
Hello I tried to search in other questions but none of mentioned solutions I tried did not work for me.
When using command:
npm start
I have an error:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:/Kodilla/Projekty/webpack-to-do-app/src/index.js: Unexpected > token (6:4)
5 | ReactDOM.render(
6 | <App />,
| ^
7 | document.getElementById('app')
8 | );
Defined command in package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
},
index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
App.js file:
import React from 'react';
import uuid from 'uuid';
import style from './App.css';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
data: []
};
}
addTodo(val){
const todo = {
text: val,
id: uuid.v4(),
};
const data = [...this.state.data, todo];
this.setState({data});
}
removeTodo(id) {
const remainder = this.state.data.filter(todo => todo.id !== id);
this.setState({data: remainder});
}
render() {
return (
<div className={style.TodoApp}>
Tutaj pojawią się komponenty naszej aplikacji.
</div>
);
}
}
export default App;
webpack.config.js file:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
.babelrc file:
{
"presets": [
["env", "react"]
]
}
Link to repository
Edit:
I tried the solution from post you suggest I duplicate but copied 1:1 did not work for me. I changed my webpack config to:
module: {
loaders: [...
{
test: /\.(js|jsx)?$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
},
and problem still occurrs. I think I may be doing something wrong in other place than in mentioned example.
Edit 2:
I use babel-core#6.26.3 and babel-loader#7.1.5 because these are requirement of the project.
React and react-dom dependencies installed.
Presets: react. env, es2015, stage-0 installed by
npm install babel-preset-... --save-dev.
First suggested .babelrc config done:
"presets": ["react", "es2015", "stage-0"]
Error occurrs:
Couldn't find preset "#babel/preset-env" relative to directory
"...webpack-to-do-app\node_modules\css-loader"
What am I still doing wrong?
Problem was solved.
Things that helped:
1. Update presets from babel-env, babel-react to #babel/preset-env and #babel/preset-react. #babel-core was installed but babel-core stayed on place. Final set:
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"#babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"css-loader": "^2.1.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
},
2. Uninstall and install babel-loader which caused problem with requiring wrong version of babel itself.
#Alireza your suggestion was partially right. Thanks for helping.
please consider put below config on your .babelrc
{
"presets": ["react", "es2015", "stage-0"]
}
it should work.
also i see that you have nested array inside "presets". every preset should be one of presets elements.
and i'm strongly recommend that you use latest babel(version 7). when you upgrade to babel 7 you should download #babel/preset-react and #babel/preset-env and that should be enough.
and .babelrc will look like this:
{
"presets": [
"#babel/react",
"#babel/env"
]
}
This my webpack.config file
import webpack from 'webpack'
import path from 'path'
export default {
devtool: 'inline-source-map',
entry: [
path.resolve(__dirname, 'src/index.js')
],
target: 'web',
output: {
path: path.resolve(__dirname, 'src'),
publicPath: '/',
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}]
}
};
This is my package.json file
{
"name": "zresume",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon server/server.js --exec babel-node"
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.7",
"d3": "^4.10.2",
"express": "^4.15.4",
"nodemon": "^1.12.0",
"path": "^0.12.7",
"react": "^15.6.1",
"react-bootstrap": "^0.31.3",
"react-dom": "^15.6.1",
"react-router": "^4.2.0",
"redux": "^3.7.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"open": "0.0.5",
"webpack": "^3.6.0",
"webpack-dev-middleware": "^1.12.0"
},
"babel": {
"presets": [
"es2015"
],
"env": {
"presets": [
"react-hmre"
]
}
}
}
My index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import LoginPage from './components/LoginPage';
class App extends React.Component {
render(){
return(
<div>
<h1>El Juego Lindo</h1>
<div>
<LoginPage />
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
LoginPage Component
import React from 'react';
import { Button, Collapse } from 'react-bootstrap';
import LoginForm from './LoginForm';
class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
onButtonClicked: false
}
this.onButtonClick = this.onButtonClick.bind(this);
}
onButtonClick() {
this.setState({
onButtonClicked: !this.state.onButtonClicked
});
}
render() {
return (
<div>
<div> I love football!!!! </div>
<Button className="footballButton" onClick={this.onButtonClick} bsStyle="primary" bsSize="large" block>Football Lover</Button>
<Collapse in={this.state.onButtonClicked}>
<div>
<LoginForm />
</div>
</Collapse>
</div>
);
}
}
export default LoginPage;
enter image description here
Hi guys I'm a pretty novice programmer, and I'm having trouble with my react components rendering. For some reason it is saying that it can't find the module. Can anyone guide me in the right direction?
You should name your files ".js", not ".jsx"
If you must use ".jsx", you need to specify the file ending when importing:
import LoginPage from './components/LoginPage.jsx'
Otherwise, Webpack assumes you've used ".js"
There is an issue with Webpack 3 and you have to add a blank space to the accepted extensions, like this.
resolve: {
extensions: [' ', '.js', '.jsx']
but also i recommend to add an alias to avoid import your components with the . (dot), and also remove the previous workaround
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'Components': path.resolve(__dirname, '/components')
}
}
Now you can import your Components like this
import YourComponent from 'Components/Login'
https://github.com/webpack/webpack/issues/981
Also doble check that babel-node has some issues with ES6 module autoloading https://babeljs.io/docs/usage/cli/#babel-node