I'm trying to follow this video but I'm running into this error:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (5:4)
I followed everything in the video but I don't see where I'm going wrong.
Webpack.config.js:
const path = require('path')
module.exports = {
entry: {
app: './src/index.js'
},
watch: true,
devtool: 'source-map',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: [
'.js'
]
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>
<h1>Test</h1>
</div>,
document.getElementById("root")
)
JSX syntax has to be compiled with Babel before you can load it in the browser.
To do this you can add a .babelrc file to the root of the project:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
Babel Preset React
Related
I'm completely new to Tailwind, React, and Webpack. I've been trying to get them to work together, but I'm having trouble parsing the main CSS file that has the Tailwind directives.
On execution of my script, I'm getting this error:
ERROR in ./static/index.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I've tried finagling with css-loader, postcss-loader, etc. to no avail.
"App.js"
import React from "react"
function App() {
return <div className="bg-slate-900 h-screen">Hello, Tailwind!</div>
}
export default App
"index.js"
import React from 'react';
import ReactDOM from 'react-dom'
import App from "./js/App"
import "./index.css"
ReactDOM.render(
<App />,
document.getElementById('root')
);
"webpack.config.js"
const path = require('path');
module.exports = {
entry: './static/index.js', // path to our input file
output: {
filename: 'index-bundle.js', // output bundle file name
path: path.resolve(__dirname, './static'), // path to our Django static directory
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, './static'),
exclude: /node_modules/,
loader: "babel-loader",
options: { presets: ["#babel/preset-env", "#babel/preset-react"] }
},
{
test: /\.css$/i,
include: path.resolve(__dirname, './static'),
use: ['style-loader', 'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ["postcss-preset-env",],
},
},
},
],
},
]
},
devServer: {
static: 'dist',
watchContentBase: true,
},
};
I not sure of the answer but I think that you could either read through the set up process and see if you missed something or you could just re do it :)
https://tailwindcss.com/docs/guides/create-react-app
I ask for your help
I'm trying to setup a basic web app using react along with webpack. As it stands now I've just put together the basic framework, however running a build always seems to result in the following error:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Develop\reactapp\react-youtube\src\index.js: Unexpected token, expected "," (1:8)
> 1 | [object Object]
| ^
at Object._raise (D:\Develop\reactapp\react-youtube\node_modules\#babel\parser\lib\index.js:775:17)
at Object.raiseWithData (D:\Develop\reactapp\react-youtube\node_modules\#babel\parser\lib\index.js:768:17)
at Object.raise (D:\Develop\reactapp\react-youtube\node_modules\#babel\parser\lib\index.js:736:17)
at Object.unexpected (D:\Develop\reactapp\react-youtube\node_modules\#babel\parser\lib\index.js:9716:16)
at Object.expect (D:\Develop\reactapp\react-youtube\node_modules\#babel\parser\lib\index.js:9702:28)
at Object.parseExprList (D:\Develop\reactapp\react-youtube\node_modules\#babel\parser\lib\index.js:11803:14)
at Object.parseArrayLike (D:\Develop\reactapp\react-youtube\node_modules\#babel\parser\lib\index.js:11707:26)
at Object.parseExprAtom (D:\Develop\reactapp\react-youtube\node_modules\#babel\parser\lib\index.js:11017:23)
at Object.parseExprAtom (D:\Develop\reactapp\react-youtube\node_modules\#babel\parser\lib\index.js:5173:20)
at Object.parseExprSubscripts (D:\Develop\reactapp\react-youtube\node_modules\#babel\parser\lib\index.js:10689:23)
My sourse files:
/webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
},
devServer: {
contentBase: path.join(__dirname, 'public')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'babel-plugin-transform-react-jsx']
},
{
test: /\.(?:|gif|png|jpg|jpeg|svg)$/,
use: ['file-loader'],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}
]
}
};
./src/index.js
import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';
import * as serviceWorker from './serviceWorker';
/*require('file-loader?name=[name].ext!./index.html');*/
import './index.scss';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
What does [object Object] mean? In the index.js file there is no such thing
I solved the problem, it was necessary to remove 'babel-plugin-transform-react-jsx' from /webpack.config.js
So I'm creating this react website, but not JSX but TSX. I'm using webpack and Babel. Need help with this error I get when running webpack-dev-server
ERROR in ./src/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
...
Error while parsing config - JSON5: invalid character '�' at 1:1
Here's my .babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-typescript",
"#babel/preset-react"
],
"plugins": [
"#babel/proposal-class-properties",
"#babel/proposal-object-rest-spread"
]
}
This is my webpack.config.js:
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'development',
watch: true,
entry: './src/index.tsx',
target: 'node',
externals: [nodeExternals()],
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json', '.scss']
},
devtool: 'source-map',
devServer: {
publicPath: '/',
contentBase: './public',
hot: true
},
module: {
rules: [{
test: /\.tsx?$/,
exclude: '/node_modules/',
loader: 'babel-loader'
},
...
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
}
]
}
};
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';
import store from './store';
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
I've searched everywhere, but nothing satisfactory. Hope I can get more inputs in this forum.
I had an error like this and it was a typo in my tsconfig.json file.
I´m trying to import a simple Component but the webpack seems to cant find it. The route is good and the "resolve" in the webpack config is great too, therefore I cant understand where is the issue.
Give it at look please.
By the way, its a Sails/React environment.
ERROR in ./assets/src/component/Hello.jsx 6:12
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
Hello.jsx:
import React from 'react'
class Hello extends React.Component {
render() {
return(
<div> // Err supposed to be here (line6)
Hello World!
</div>
)
}
}
export default Hello;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './component/Hello'
const App = () => {
return (
<div>
Simple Sails-React stater
<Hello/>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
.babelrc:
{
"presets": ["#babel/env", "#babel/react"]
}
webpack config file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
entry: './assets/src/index.js'
},
output: {
path: __dirname + '/.tmp/public',
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: 'assets/src/index.html'
})
]
};
the structure is like this:
-src
--component
----Hello.jsx
--index.js
--index.html
Could you try change extension to Hello.js or change bable-loader test to
test: /\.(js|jsx)$/,
This question already has answers here:
babel-loader jsx SyntaxError: Unexpected token [duplicate]
(8 answers)
Closed 6 years ago.
I am trying to build my app using wepback and getting getting stuck at this unexpected token error. All the dependencies for my project are fine and upto date I am using the same project somewhere else and it is building fine but when I try to build my current code which is same it gives the error, below are config.js and error descriptions
Here is my app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Router} from 'react-router';
import Routes from '../routes/routes';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { browserHistory } from 'react-router';
require('../Config');
injectTapEventPlugin();
window.EventEmitter = {
_events: {},
dispatch: function (event, data, returnFirstResult) {
if (!this._events[event]) return;
for (var i = 0; i < this._events[event].length; i++)
{
if(this._events[event][i])
{
var r = this._events[event][i](data);
if(returnFirstResult)
return r;
}
}
},
subscribe: function (event, callback, onlyOne) {
if (!this._events[event] || onlyOne) this._events[event] = []; // new event
this._events[event].push(callback);
}
};
// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
ReactDOM.render(<Router history={browserHistory}>{Routes}</Router>, document.getElementById('app'));
Here is my config.js
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, '../project/public/js/');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var TransferWebpackPlugin = require('transfer-webpack-plugin');
var config = {
entry: {
app: path.join(__dirname, '/app/entry_points/app.jsx'),
vendor: ['react', 'radium'],
},
resolve: {
extensions: ["", ".js", ".jsx"]
},
devtool: 'source-map',
output: {
path: buildPath,
publicPath: '/js/',
filename: 'mobile.[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "mobile.vendor.js"),
new webpack.DefinePlugin({}),
new webpack.NoErrorsPlugin(),
],
module: {
preLoaders: [
{
test: /\.(js|jsx)$/,
loader: 'eslint-loader',
include: [path.resolve(__dirname, "src/app")],
exclude: [nodeModulesPath]
},
],
loaders: [
{
test: /\.(js|jsx)$/,
loaders: [
'babel-loader'
],
exclude: [nodeModulesPath]
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
]
},
eslint: {
configFile: '.eslintrc'
},
};
module.exports = config;
This is the error I get when I try to build:
ERROR in ./app/entry_points/app.jsx
Module build failed: SyntaxError: /home/zeus/Glide/project/project-mobile/app/entry_points/app.jsx: Unexpected token (46:16)
44 | // Render the main app react component into the app div.
45 | // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
> 46 | ReactDOM.render(<Router history={browserHistory}>{Routes}</Router>, document.getElementById('app'));
| ^
I am using react v0.14.8, react-dom v0.14.8, babel-loader ^6.2.1
i believe you need to specify the presets with babel and install the npm module babel-preset-react
loaders: [
{
test: /\.(js|jsx)$/,
loaders: [
'babel-loader'
],
exclude: [nodeModulesPath],
query: {
presets: ['react']
}
},
...
]
you'd also want to add es2015 to that presets array if you're using it.