I am getting following error while trying to build using webpack
ERROR in ./packages/chat/index.js 12:2
Module parse failed: Unexpected token (12:2)
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
| console.log('start rendering chat');
| ReactDOM.render(
> <div>
| <Provider store={globalStore}>
| <ChatUi />
FILE --> webpack.config.js
const path = require('path');
const appPath = suffix => path.resolve(__dirname, suffix);
const entries = { chat: appPath('../packages/chat/index.js') };
module.exports = {
name: 'Library',
entry: entries,
output: {
path: appPath('../dist'),
libraryTarget: 'var',
filename: '[name]/index.js'
},
mode: 'production',
resolve: {
extensions: ['.js']
},
module: {
rules: [
{
test: /[\.js|\.jsx]$/, /* only load js and jsx files and ignore non js files */
loader: 'babel-loader',
exclude:path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, './packages')
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
}
};
FILE --> .babelrc
{
"presets": ["es2015", "react", "stage-0"]
}
FILE --> index.js
import React from 'react';
import ReactDOM from 'react-dom';
import ChatUi from '../../src/chatUi/ChatUi';
import { Provider } from 'react-redux';
import {globalStore} from '../../src/common/load-redux';
console.log('start rendering chat');
ReactDOM.render(
<div>
<Provider store={globalStore}>
<ChatUi />
</Provider>,
</div>,
document.getElementById('chat')
);
Already spent almost a whole day going through similar questions on stack overflow with no success. Getting frustrated now... :(
<div>
<Provider store={globalStore}>
<ChatUi />
</Provider>, <----- there is your problem
</div>,
Update
Check your presets. Not sure if react in there is just an alias for #babel/preset-react or if you placed the react framework lib there by accident.
{
"presets": ["es2015", "react", "stage-0"]
}
should read
{
"presets": ["es2015", "#babel/preset-react", "stage-0"]
}
Related
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:
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)$/,
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
I am using Webpack, Gulp and React to use a React app in my Jekyll static site.
I am getting an unexpected token error on the React element:
Module parse failed: Unexpected token (8:4)
You may need an appropriate loader to handle this file type.
| window.mount = function(id, type) {
| render(
| <App type={type} />,
| document.getElementById(id)
| )
I have tried various methods and babel presets.
webpack.config.js
module.exports = {
entry: {
app: './webpack/app.js'
},
output: {
path: __dirname + '/src/_assets/js',
filename: 'app.js'
},
module: {
rules: [{
// I've tried node_modules/my-app as well
include: __dirname + 'node_modules/my-app/src',
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader",
options: {
// I've tried several variations of this:
presets: ["react", "env", "stage-0", "es2015", { targets: { node: true } }],
}
}
}]
}
};
Pertinent gulp code:
const webpack_stream = require('webpack-stream');
const webpack_config = require('./webpack.config.js');
// I have tried gulp-webpack and gulp ( no webpack ) with the babel-loader
gulp.task('app', function () {
return webpack_stream(webpack_config).pipe(gulp.dest('src/_assets/js/'));
});
Can anyone see anything I am missing, have wrong, or are there some issues with versions/presets?
I have looked through the other similar questions and answers like this and this with no luck.
Edit 1:
If I change the webpack.config.js to use the babel-polyfill and exclude instead of include I can get past the first error, but I still error on a <Provider> element.
**webpack.config**
module.exports = {
entry: './webpack/rfi.js',
output: {
path: __dirname + '/src/_assets/js',
filename: 'rfi.js'
},
module: {
rules: [{
exclude: /node_modules/,
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader",
options: {
presets: ["react", "env", "stage-3", "es2015"],
}
}
}]
}
};
**App.js**
class Rfi extends Component {
render() {
return (
<Provider store={store}>
<Form />
</Provider>
);
}
}
**error**
Module parse failed: Unexpected token (36:8)
You may need an appropriate loader to handle this file type.
|
| return (
| <Provider store={store}>
| <Form />
| </Provider>
And yes Provider is imported import { Provider } from 'react-redux';
Edit 2 ( per comment request )
For some reason I'm not getting a good trace in my messages anymore. Here's one from yesterday though.
One of the ways is make use of babel-polyfill , You can install it as a project dependency npm install --save babel-polyfill and inside your webpack.config.js you can pass it to the entry point (You can amend this accordingly):
entry: ["babel-polyfill", "./webpack/app.js"],
Edit 1 Answer :
You need to make sure your store is on the top of hierarchy , like (app.js) (You can amend this accordingly) :
import { render } from "react-dom";
import { Provider } from "react-redux";
render(
<Provider store={store}>
<Form />
</Provider>,
document.getElementById("app") // Ammend this accordignly
);
You can read more about babel Polyfill Here