MacOSX Node:v15.10.0 NPM: 7.5.3
I realize this is a common problem and I've been trying to resolve this for over a day and after trying a bunch of different solutions, I have not been able to resolve this. I'm learning ReactJS and following along guides that start off with create-react-app. Regardless of the guide, I'm getting the following:
Failed to compile.
./src/requests.js
SyntaxError: /Users/.../requests.js: Unexpected token (4:22)
I have tried to resolve Webpack and Babel discrepancies through package.json, webpack.config.js and .babelrc, but nothing seems to work. I tried deleting node-modules and package-lock.json and reinstalling everything in the app. I have tried not having the webpack.config file and half a dozen variations of presets, excludes, etc. I also tried completely reinstalling node and npm, but still no dice.
App.js
import './App.css';
import Row from "./Row.js";
import requests from "./requests.js";
function App() {
return (
<div className="App">
<div className="header">
Starting NetFlavor
</div>
<Row title="Weekly Trending" fetchURL={requests.fetchWeekTrending} />
<Row title="Newest" fetchURL={requests.fetchMovie}/>
</div>
);
}
export default App;
requests.js
const API_KEY = '';
const requests = {
fetchWeekTrending = '/trending/movie/week?api_key=${API_KEY}',
fetchMovie = 'https://api.themoviedb.org/3/movie/228203?api_key==${API_KEY}'
};
export default requests;
Row.js
import React from 'react'
function Row({ title }) {
const [movies, setMovies] = useState([]);
return (
<div>
<h2>{title}</h2>
</div>
)
}
export default Row
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'chamber.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options:{
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
}
}}
]},
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
}
package.json
{
"name": "chamber",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/preset-env": "^7.13.9",
"@babel/preset-react": "^7.12.13",
"@material-ui/core": "^4.11.3",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.12.3",
"babel-loader": "^8.1.0"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["transform-decorators-legacy", "transform-class-properties"]
}
Would appreciate any help. At this point I can't even learn just because I can't get past this error.
As the error states, you have a syntax error in your requests.js.
Note the const requests
: use :
to assign properties and use backticks.
const API_KEY = '';
const requests = {
fetchWeekTrending: `/trending/movie/week?api_key=${API_KEY}`,
fetchMovie: `https://api.themoviedb.org/3/movie/228203?api_key==${API_KEY}`
};
export default requests;