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
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 am learning react and currently facing the issue in configuring the scss with bootstrap in a project, that was initially built by my friend and now I want to work on it. It works fine when I configure it for bootstrap. But when I try to configure the scss I have the following type error..
1)Here is the terminal error
ERROR in ./client/styles/styles.scss
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #import '~bootstrap/scss/bootstrap.scss';
| $btn-font-weight:bold;
|
# ./client/App.js 17:0-31
# ./client/main.js
# multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./client/main.js
2/ Here is my webpack.config file:
const path = require('path')
const webpack = require('webpack')
const CURRENT_WORKING_DIR = process.cwd()
const config = {
name: "browser",
mode: "development",
devtool: 'eval-source-map',
entry: [
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.join(CURRENT_WORKING_DIR, 'client/main.js')
],
output: {
path: path.join(CURRENT_WORKING_DIR , '/dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
{
test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
use: 'file-loader'
}
]
}, plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
module.exports = config
3)Here is my app.js file
import React from 'react'
import MainRouter from './MainRouter'
import {BrowserRouter} from 'react-router-dom'
import './styles/styles.scss';
import { hot } from 'react-hot-loader';
const App = () => (
<BrowserRouter>
<MuiThemeProvider>
<MainRouter/>
</MuiThemeProvider>
</BrowserRouter>
)
export default hot(module)(App)
To achieve expected result, use below option of using loaders in below format
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
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 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 have this error code .
i think this error is caused by webpack.config.js
I have studied many sources but could not get results
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| */
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
| html {
| font-family: sans-serif;
| -webkit-text-size-adjust: 100%;
# ./index.js 21:0-43
# multi (webpack)-dev-server/client?http://localhost:8080 ./index.js
my webpack.config.js .
I have made arrangements here. but again I got an error.
how can i overcome this error
var webpack = require('webpack');
var path = require('path');
var parentDir = path.join(__dirname, '../');
module.exports = {
entry: [
path.join(parentDir, 'index.js')
],
module: {
loaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},{
test: /\.less$/,
loaders: ["style-loader", "css-loder", "less-loader"]
}
]
},
output: {
path: parentDir + '/dist',
filename: 'bundle.js'
},
devServer: {
contentBase: parentDir,
historyApiFallback: true
}
}
index.js like this.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppRoutes from './routes';
import store from './store';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<Provider store={store}>
<AppRoutes />
</Provider>,
document.getElementById('app')
)
It looks like you need to add some more configuration to your css-loader.
Currently, you have this for your less files:
{
test: /\.less$/,
loaders: ["style-loader", "css-loader", "less-loader"]
}
Like the error message mentions, you need to configure a loader for css files in addition to less. Try this:
{
test: /\.less$/,
loaders: ["style-loader", "css-loader", "less-loader"]
}, {
test: /\.css$/,
loaders: ["style-loader", "css-loader"]
}