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.
Related
So I would like to use a Image in my React Project, but when I open the browser in order to view my website I am always getting a 404:
import React from "react";
import ReactDOM from "react-dom";
import img from "./App/assets/image.png";
ReactDOM.render(
<img src={img} alt="img"></img>,
document.getElementById("root")
);
this is my webpack.config.js file:
var path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output:{
path: path.join(__dirname, '/dist/'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
'file-loader'
// {
// loader: 'file-loader',
// // options:{
// // name: '[name].[ext]',
// // outputPath: 'assets',
// // }
// },
],
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
]
},
devServer: {
historyApiFallback: true,
contentBase: path.join(__dirname, "public/"),
port: 3000,
publicPath: "http://localhost:3000/dist/",
hotOnly: true
},
};
the .babelrc file:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
After that it compiles successfully but the browser-console shows:
GET http://localhost:3000/da8ab57a5dacdcc560a4f73bd6e235a8.png 404 (Not Found)
I followed this how-to-add-hot-module-reloading-to-a-react-app but get an error.
I know this is an easy one because i'm new to this. Also most tutorials are so out of date so its hard to find something consistent to learn this
I think the webpack server is ok and can be started ok
Please advice:
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
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
| import App from "./App";
|
> ReactDOM.render(<App />, document.getElementById("root"));
Here's webpack.config.js
const webpack = require('webpack');
const port = process.env.PORT || 3000;
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
],
rules: [
{
test: /\.json$/,
loader: 'json-loader'
}
],
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
},
devServer: {
host: 'localhost',
port: port,
historyApiFallback: true,
open: true
}
};
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
UPDATE
Adding App.js
import React, { Component } from "react";
import Header from "./components/structure/Header";
import Content from "./components/structure/Content";
import Footer from "./components/structure/Footer";
import Resume from "./resume.json";
import { hot } from 'react-hot-loader/root'
class App extends Component {
componentDidMount() {
document.title = [
Resume.basics.name,
Resume.basics.label,
[Resume.basics.location.region, Resume.basics.location.country].join(", ")
].join(" | ");
}
render() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}
}
export default hot(App)
Also get this error now .babelrc cant find schema:
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
Hi I was going through this tutorial and I have setup my webpack configuration based on this tutorial.
Regardless I have the following file index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import AppComp from './components/App'
let store = createStore(todoApp)
let App = React.createClass({
render: () => {
return (
<Provider store={store}>
<AppComp />
</Provider>
)
}
});
render(
<App/>,
document.getElementById('app')
)
And my webpack configuration is
var HtmlWebpackPlugin = require ('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'index_build.js'
},
module: {
loaders: [
{
test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', presets: ['es2015', 'react']
},
]
},
plugins: [HtmlWebpackPluginConfig]
};
When I run the app with webpack, I got the following error
ERROR in ./app/index.js
Module build failed: SyntaxError: Unexpected token (13:6)
11 | render: () => {
12 | return (
> 13 | <Provider store={store}>
| ^
14 | <App />
15 | </Provider>
16 | )
Anyone can help me with resolving this error?
Edit: The issue was the way I defined my webpack configs, the presets should be inside query block. Here is my updated webpack config file
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'babel-preset-react']
}
}
]
},
plugins: [HTMLWebpackPluginConfig]
};
You must specify babel presets. You can use .babelrc
{
"presets": [
"react",
"es2015"
]
}
or you can specify it in your loader query:
loaders: [ 'babel?presets[]=react,presets[]=es2015' ]
You need to use npm module 'path' for defining path. Here is the webpack.config.js file
var HtmlWebpackPlugin = require ('html-webpack-plugin');
var path = require('path');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: path.resolve(__dirname, 'dist/'),
filename: 'index_build.js'
},
module: {
loaders: [
{
test: /\.js$/, include: path.join(__dirname,'/app'), loader: 'babel-loader', presets: ['es2015', 'react']
},
]
},
plugins: [HtmlWebpackPluginConfig]
};
Trying to support IE 9 for React. Upgraded to use babel 6.3.26 and babel-preset-es2015 and babel-preset-react for Webpack. However, when the file is loaded in IE 9, a syntax error occurs.
webpack.config.js
/* eslint-env node */
var path = require('path');
var packageJson = require('./package.json');
var _ = require('lodash');
var webpack = require('webpack');
var context = process.env.NODE_ENV || 'development';
var configFunctions = {
development: getDevConfig,
production: getProdConfig,
test: getTestConfig
};
var config = configFunctions[context]();
console.log('Building version %s in %s mode', packageJson.version, context);
module.exports = config;
function getLoaders() {
if (context.indexOf('test') === -1) {
return [
{
test: /\.js?$/,
exclude: /(test|node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
plugins: ['transform-runtime']
}
}
]
} else {
return [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
plugins: ['transform-runtime']
}
}
]
}
}
function getBaseConfig() {
return {
context: __dirname + "/src",
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
stats: {
colors: true,
reasons: true
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: _.union(
getLoaders(),
[
{
test: /\.scss$/,
loader: 'style!css!sass'
},
{
test: /\.eot$|\.svg$|\.woff$|\.ttf$/,
loader: 'url-loader?limit=30000&name=fonts/[name]-[hash:6].[ext]'
},
{
test: /\.(png|.jpe?g|gif)$/,
loader: 'url-loader?limit=5000&name=img/[name]-[hash:6].[ext]'
},
{
test: /\.mp4$/,
loader: 'url-loader?limit=5000&name=videos/[name]-[hash:6].[ext]'
}
]
)
}
};
}
function getDevConfig() {
return _.merge({}, getBaseConfig(), {
devtool: 'cheap-module-eval-source-map',
entry: [
'babel-polyfill',
'webpack-hot-middleware/client',
'./App'
],
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
eslint: {
emitError: false,
failOnError: false,
failOnWarning: false,
quiet: true
}
});
}
function getProdConfig() {
return _.merge({}, getBaseConfig(), {
devtool: 'source-map',
entry: [
'babel-polyfill',
'./App'
],
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: false
}
})
],
eslint: {
emitError: true,
failOnError: true
}
})
}
function getTestConfig() {
return _.merge({}, getBaseConfig(), {})
}
Checking bundle.js for the offending lines reveals the usage of const which is not ES5. Am I missing something here? Do I need to transpile ES6 code into ES5 for production usage?
IE9 is not compatible with ES6, so, yes, you must transform your ES6 code to ES5. I believe the problem is you aren't telling babel to use the react and es2015 presets. I'm sure you installed them on your machine, but the babel loader only does what you tell it.
Inside your getLoaders() function, add the presets to your babel loader configuration query:
query: {
plugins: ['transform-runtime'],
presets: ['react', 'es2015']
}
Hopefully, that works for you.
babel/babel-loader reference
I am using create-react-app (v16.4.2). I tried using the followings to get the default hello world working in IE9:
1:
import 'core-js/es6/map';
import 'core-js/es6/set';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
2:
import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
But neither of them worked for me. I ended up adding the following line into my index.html file in the public folder and it fixed my issue:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
More information is available at:https://polyfill.io/v2/docs/