I'm learning react and flux, and in lesson 1 the tutorial has failed me.
This tutorial immediately breaks on 'npm start' with the following errors:
ERROR in ./src/js/main.js
Module parse failed: /Users/me/Projects/egghead-flux/src/js/main.js Unexpected token (4:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (4:16)
at Parser.pp$4.raise (/Users/me/Projects/egghead-flux/node_modules/acorn/dist/acorn.js:2221:15)
It doesn't seem to understand ReactDOM.render(<App />, document.getElementById('main')); I assume parsing the JSX <App /> part is failing.
Has anyone encountered this issue before? Removing / reinstalling node modules does nothing. Is there some setup step missing from the video?
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('main'));
App.js
import React from 'react';
export default class App extends React.Component {
render(){
return <h1>Flux</h1>
}
}
webpack.config.js
module.exports = {
entry: './src/js/main.js',
output:{
path:'./dist',
filename: 'bundle.js',
publicPath: '/'
},
devServer: {
inline: true,
contentBase: './dist'
},
module: {
loaders: [
{
test: '/\.jsx?$/',
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query:{
presets: ['es2015', 'react']
}
}
]
}
}
package.json
{
"name": "egghead-flux",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"flux": "^3.1.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^3.0.0"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
Turns out:
test: '/\.jsx?$/',
should be:
test: /\.jsx?$/,
Dammit.
Related
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?
let path = require('path')
module.exports = {
entry:path.resolve('public/src/index.js'),
output: {
path:__dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [{
exclude: /(node_modules)/,
loader:'babel-loader',
query:{
presets: ['es2015', 'react']
}
}]
},
watch:true
};
I am using reactjs router and in tutorials, they majority tell you to write
--history-api-fallback for the router to work
let path = require('path')
module.exports = {
entry:path.resolve('public/src/index.js'),
output: {
path:__dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [{
exclude: /(node_modules)/,
loader:'babel-loader',
query:{
presets: ['es2015', 'react']
}
}]
},
watch:true
};
{
"name": "pr_v1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server/index.js & webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.16.2",
"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",
"body-parser": "^1.18.2",
"dotenv": "^4.0.0",
"express": "^4.15.4",
"moment": "^2.18.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"request": "^2.82.0",
"webpack": "^3.5.5"
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import Reducer from './Reducer/';
import {Router, Route, browserHistory} from 'react-router';
import App from './Components/App.jsx';
const store = createStore(Reducer, applyMiddleware(thunk));
ReactDOM.render(
<Router history={browserHistory}>
<Route path='/user' component={App}/>
</Router>
,document.getElementById('root'));
I am new to react-router and i am trying to get the --history-api-fallback to work. Tutorials say to put it in the build of the json file, but i do not have a build script. I am thinking that maybe it should be somewhere is the webpack config file. I am not sure. My question is where can i insert --history-api-fallback so that it works.
For webpack dev sever, you just need to add webpack dev config. This is going to work in your dev environment.
devServer:
{
historyApiFallback: true
},
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
I've been trying to figure this out all day and can't quite understand what's going on. With the following configuration when I'm using npm start it doesn't throw any exceptions in the console, yet when I view it in chrome I get the "Uncaught SyntaxError: Unexpected token <"
Below are my configuration files, any pointers would be greatly appreciated. So far I've tried using npm install babel-core babel-loader babel-preset-react babel-preset-es2015 and those haven't helped either...
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './jsx/App.jsx';
ReactDOM.render(
<App/>,
document.getElementById('app'));
package.json
{
"name": "whatever",
"version": "1.0",
"description": "none",
"main": "main.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "Garrett",
"license": "ISC",
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^3.0.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^1.16.5"
},
"devDependencies":{
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.26.1",
"eslint": "^3.10.2",
"eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.3.2",
"eslint-plugin-react": "^6.7.1",
"eslint-plugin-standard": "^2.0.1",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"webpack": "2.2.0",
"webpack-dev-server": "^1.16.5"
}
}
webpack.config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.json$/, loader: 'json-loader'}
]
}
};
module.exports = config;
App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, IndexRoute, hashHistory} from 'react-router';
//Page Imports
import Home from './pages/Home.jsx';
import p404 from './pages/p404.jsx';
import Content from './Content.jsx';
var css = require("../css/index.css");
class App extends React.Component{
constructor(){
super();
}
render(){
return(
<div>
<Router history={hashHistory}>
<Route path="/" component={Content}>
<IndexRoute component={Home}></IndexRoute>
<Route path="home" component={Home}></Route>
<Route path="404" component={p404}></Route>
<Route path="*" component={p404} />
</Route>
</Router>
</div>
);
}
}
export default App;
If you need any more information I can provide it, thanks in advance to anyone who can help me out.
It looks like you're using a webpack 1 config, whilst you're using webpack 2, more specifically:
Your "loaders" array should be "rules", "query" should be "options", example:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
},
{test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.json$/, loader: 'json-loader'}
]
}
Also, you need to have babel-loader and babel-core installed (you mentioned you installed them, but they're not in your package.json)