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)
Related
I'm trying to convert my create-react-app to a Webpack compatible app.
I can't understand clearly what I'm done and I often get into an error:
ERROR in ./index.html
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/c/Users/.../index.html: Unexpected token (1:0)
> 1 | <!doctype html>
| ^
2 | <html>
3 | <head>
4 | <title>Getting Started</title>
at Object._raise [...]
This happens after launching npm start
This is my configuration:
Structure
index.html
webpack.config.js
babelrc
src/index.js
package.json
./index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash#4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
./webpack.config.js
const webpack = require('webpack');
const path = require('path');
const config = {
entry: [
'react-hot-loader/patch',
'./index.html'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$|jsx$|html/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['#babel/preset-env', '#babel/react']
}
}
]
},
resolve: {
extensions: [
'.js',
'.jsx',
'.html'
],
alias: {
'react-dom': '#hot-loader/react-dom'
}
},
devServer: {
contentBase: './dist'
}
};
module.exports = config;
Finally, my ./.babelrc
{
"plugins": ["#babel/transform-react-jsx"],
"ignore": [
"foo.js",
"bar/**/*.js"
]
}
I've this dependencies in my package.json:
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.10.4",
"#babel/preset-typescript": "^7.10.4",
"#hot-loader/react-dom": "^17.0.0-rc.2",
"babel-loader": "^8.1.0",
"babel-plugin-import": "^1.13.0",
"css-loader": "^4.3.0",
"react-hot-loader": "^4.5.3",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
You're using a javascript loader for your html, this is not going to work.
You should use the html-loader instead
I am trying to generate a code coverage report for my ReactJS project with babel-istanbul-plugin. When I add "istanbul" as a plugin in my .babelrc file and ty to build, I get this error:
ERROR in ./src/entryPoints/App.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /Users/kuli/Sites/persona/src/entryPoints/App.jsx: You gave us a visitor for the node type "ClassPrivateProperty" but it's not a valid type
at verify (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/visitors.js:196:13)
at Object.explode (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/visitors.js:72:3)
at traverse (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/index.js:77:12)
at NodePath.traverse (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/path/index.js:144:25)
at Object.enter (/Users/kuli/Sites/persona/node_modules/istanbul-lib-instrument/dist/visitor.js:611:12)
at PluginPass.enter (/Users/kuli/Sites/persona/node_modules/babel-plugin-istanbul/lib/index.js:90:23)
at newFn (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/visitors.js:276:21)
at NodePath._call (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/path/context.js:76:18)
at NodePath.call (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/path/context.js:48:17)
at NodePath.visit (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/path/context.js:105:12)
at TraversalContext.visitQueue (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitSingle (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/context.js:108:19)
at TraversalContext.visit (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/context.js:192:19)
at Function.traverse.node (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/index.js:114:17)
at traverse (/Users/kuli/Sites/persona/node_modules/babel-traverse/lib/index.js:79:12)
at File.transform (/Users/kuli/Sites/persona/node_modules/babel-core/lib/transformation/file/index.js:548:35)
at /Users/kuli/Sites/persona/node_modules/babel-core/lib/transformation/pipeline.js:50:19
at File.wrap (/Users/kuli/Sites/persona/node_modules/babel-core/lib/transformation/file/index.js:564:16)
at Pipeline.transform (/Users/kuli/Sites/persona/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
at transpile (/Users/kuli/Sites/persona/node_modules/babel-loader/lib/index.js:50:20)
at Object.module.exports (/Users/kuli/Sites/persona/node_modules/babel-loader/lib/index.js:173:20)
# multi babel-polyfill ./src/entryPoints/App.jsx App[1]
I am adding all the info i think is relevant. Please let me know if you need any more.
My .babelrc file:
{
"presets": ["env", "stage-0", "react"],
"plugins": [
"istanbul",
"react-hot-loader/babel",
"transform-decorators-legacy"
]
}
App.jsx file:
import React from 'react';
import ReactDOM from 'react-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { BrowserRouter, Route } from 'react-router-dom';
import rootReducer from './profile/reducers/index.js';
import ErrorBoundary from './profile/components/ErrorBoundary';
import App from './profile/components/App.js';
const store = createStore(
rootReducer,
compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
ReactDOM.render(
<Provider store={store}>
<ErrorBoundary>
<BrowserRouter>
<div>
<Route path="/" component={App}/>
</div>
</BrowserRouter>
</ErrorBoundary>
</Provider>,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
Dev Dependencies:
"devDependencies": {
"ajv": "6.2.1",
"babel-core": "6.26.0",
"babel-eslint": "^6.1.2",
"babel-loader": "7.1.4",
"babel-polyfill": "6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.24.1",
"classnames": "^2.2.5",
"css-loader": "0.23.1",
"dotenv": "^7.0.0",
"eslint": "^3.19.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^5.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "3.2.0",
"json-loader": "^0.5.4",
"node-sass": "^4.9.2",
"postcss-loader": "^0.9.1",
"prettier-eslint": "^8.8.2",
"react-hot-loader": "^4.3.3",
"redux-devtools": "^3.2.0",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"rimraf": "^2.5.2",
"sass-loader": "^7.0.3",
"stats-webpack-plugin": "^0.3.1",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "^4.16.2",
"webpack-cleanup-plugin": "0.5.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const loaders = require('./webpack.loaders');
const commonConfig = require('./webpack.common');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// const envKeys = commonConfig.getEnvKeys();
module.exports = {
entry: {
workflow: ['babel-polyfill', './src/index'],
},
output: commonConfig.output,
// https://webpack.js.org/configuration/devtool/#devtool
devtool: 'cheap-module-source-map',
resolve: {
extensions: commonConfig.extensions,
alias: commonConfig.alias,
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loaders: ['babel-loader'],
},
{
test: /\.(s?)css$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
},
{
test: /\.(woff|woff2)$/,
loader: "url?prefix=font/&limit=5000"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
},
{
test: /\.gif/,
loader: "url-loader?limit=10000&mimetype=image/gif"
},
{
test: /\.jpg/,
loader: "url-loader?limit=10000&mimetype=image/jpg"
},
{
test: /\.png/,
loader: "url-loader?limit=10000&mimetype=image/png"
}
]
},
plugins: [
// new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin('development'),
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
devServer: {
contentBase: path.join(__dirname, 'build'),
compress: true,
port: 9003
},
};
Thanks for your help.
It seems to be an issue with babel itself =>
https://github.com/babel/babel/issues/10065
Run across the same problem today when deleting my package-lock and my npm cache.
Turns out it was the package istanbul-lib-instrument who got updated to 3.1.0 to 3.3.0 which was importing a bad version of babel-types.
Just fixed the version of istanbul-lib-instrument and everything was okay.
It can be babel-eslint also in your case.
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?
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'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.