I am having trouble getting my MERN boilerplate set up. I'm still learning so the answer may be obvious but I can't find an answer for the current version of webpack, react, babel. I am getting this error when I npm run dev:
Module parse failed: Unexpected token (8: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
|
| ReactDOM.render(
> <React.StrictMode>
| <App />
| </React.StrictMode>,
webpack 5.4.0 compiled with 1 error in 231 ms
Which I have figured out means that the loader is not configured; however, I have this :
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../css/index.css';
import App from '../components/App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
home: './client/index.js',
// add pages here with link to the js file for each
},
output: {
path: path.resolve(__dirname, 'client'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react'
]
}
}]
},
{
test: /\\.css$/,
use: [
'style-loader',
'css-loader'
]
}]
}
}
package.json
{
"name": "mern-boilerplate",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.1",
"#testing-library/user-event": "^12.2.0",
"express": "^4.17.1",
"mongoose": "^5.10.13",
"nodemon": "^2.0.6",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"webpack": "webpack",
"dev": "npm run webpack && nodemon --exec babel-node --bin/www",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/cli": "^7.12.1",
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"axios": "^0.21.0",
"babel-loader": "^8.1.0",
"body-parser": "^1.19.0",
"css-loader": "^5.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
}
}
So, as far as I can tell I have the appropriate #babel/preset-react installed, and the correct webpack dependencies and loaders but webpack hangs with the error at <React.StrictMode>
I am struggling here and would appreciate any help you guys can give me.
Thanks in advance.
Chris
Related
I've created a bundle of my react app using webpack as shown below:
My webpack.config.js :
const path = require('path');
const glob = require("glob");
const { SourceMapDevToolPlugin } = require("webpack");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
mode: "development",
entry: glob.sync('./App.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: [/node_modules/],
options: {
presets: ['#babel/env', '#babel/react'],
plugins: ['transform-class-properties']
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract(
{
fallback: 'style-loader',
use: ['css-loader']
})
},
{
test: /\.tsx$/,
use: ['source-map-loader']
},
{
test: /\.(eot|woff|woff2|ttf|svg|gif|png)$/, loader: "file-loader"
}
]
},
plugins: [
new ExtractTextPlugin({filename: 'style.css'})
]
};
Here is my package.json:
{
"name": "demo",
"version": "0.0.11",
"private": true,
"dependencies": {
"#mycompany/picl": "^0.0.12-dev",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^14.2.0",
"babel-plugin-transform-class-properties": "6.24.1",
"css-loader": "1.0.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "^5.0.1",
"style-loader": "0.21.0",
"web-vitals": "^2.1.4",
"webpack": "4.17.1",
"webpack-cli": "3.1.0"
},
"scripts": {
"build": "webpack",
"test": "react-scripts test",
"dev": "webpack --mode development ./src/App.js --output ./static/built/bundle.js --watch"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-loader": "8.0.0",
"file-loader": "2.0.0",
"html-webpack-plugin": "3.2.0",
"mini-css-extract-plugin": "0.6.0",
"miragejs": "^0.1.44",
"source-map-loader": "1.0.0"
}
}
Running yarn run dev has generated a bundle.js, style.css and a .svg file inside static\build folder. However, I'm not sure how do I attach this bundle.js with a HTML div tag as I want to display this react app bundle in a simple HTML/Javascript app.
I looked at this tutorial. But they are adding a dom container inside their like_button.js but i don't have that option since my js file which is bundle.js is getting generated from my react app. Do I need to do something different to generate a bundle.js in such a manner that it can get attached to an HTML div?
I was planning to include the bundle and css like this in my html code as shown below:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>Testing Jan 17</title>
<link rel="stylesheet" href="built/style.css"/>
</head>
<body>
<div id="reactAppDisplay"></div>
<script src="built/bundle.js"></script>
</body>
</html>
But I'm not sure how at the time of generating bundle.js I should attache my app to the id reactAppDisplay so that my react app can be displayed on the web brwser?
All you need do is modify your index.jsx file to look like the following before building:
import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
document.getElementById('reactAppDisplay')
);
this will compile your react app and append the result to the HTML element which id is reactAppDisplay
I am trying to get the package react-native-reanimated to compile correctly in my webpack application, however I keep running into errors like these:
ERROR in ./node_modules/react-native-reanimated/lib/createAnimatedComponent.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/aftrumpet/app/node_modules/react-native-reanimated/lib/createAnimatedComponent.js: Support for the experimental syntax 'jsx' isn't currently enabled (507:21):
505 | default: { collapsable: false },
506 | });
> 507 | return (<Component {...props} ref={this._setComponentRef} {...platformProps}/>);
| ^
508 | }
509 | }
510 | AnimatedComponent.displayName = `AnimatedComponent(${Component.displayName || Component.name || 'Component'})`;
I know the solution to this is to not exclude the react-native-reanimated module from jsx compilation, however it is not working even though my webpack.config.js has it not excluded. Here is the webpack config:
const path = require('path');
module.exports = {
mode: 'development',
entry: './index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules\/(?!react-native-reanimated)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: ['babel-plugin-react-native-web'],
},
},
},
],
},
};
I think there's a possibility the webpack application might not be reading the config, however I did include it in my root directory so this should not be happening.
Here is my package.json if that helps as well:
{
"name": "we_v2",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"#hookform/resolvers": "^2.8.8",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"clsx": "^1.1.1",
"highcharts": "^9.3.3",
"highcharts-border-radius": "^0.0.4",
"highcharts-react-official": "^3.1.0",
"react": "^17.0.2",
"react-bootstrap": "^2.4.0",
"react-dom": "^17.0.2",
"react-hook-form": "^7.27.0",
"react-native-gesture-handler": "^2.4.2",
"react-native-reanimated": "^2.8.0",
"react-native-web": "^0.17.7",
"react-navigation": "^4.4.4",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"sass": "^1.49.7",
"web-vitals": "^2.1.4",
"webpack": "^5.72.1",
"yup": "^0.32.11"
},
"scripts": {
"start": "PORT=8000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I recently started learning React, but right now I am having an issue import one of the components in App.js
My current structure is:
src
--components
----Nav
------Nav.jsx
--App.js
Inside my App.js I have:
import Nav from './src/components/Nav/Nav';
However, I get the following error:
./src/App.js
Module not found: Can't resolve './src/components/Nav/Nav' in 'PATH_TO_PROJECT/project/src'
My webpack.config.js is:
const path = require("path");
module.exports = {
entry: "./src/app.js",
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module:{
rules:[{
loader: 'babel-loader',
test: /\.js$|jsx/,
exclude: /node_modules/
}],
exports: {
resolve: {
extensions:['.js','.jsx']
}
}
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public')
}
}
And this is also my package.json:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.7.1",
"bootstrap": "^4.6.0",
"express": "^4.17.1",
"react": "^17.0.1",
"react-bootstrap": "^1.5.0",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack",
"test": "webpack serve",
"eject": "webpack --watch"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.17",
"#babel/preset-react": "^7.12.13",
"babel-loader": "^8.1.0",
"webpack": "^4.44.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.0"
}
}
I was wondering what am I doing wrong?
The error is occurring due to the wrong project path specification.
The src is the source directory of a react application.
When importing use the following
import Nav from './components/Nav/Nav';
when I run npm run dev (webpack --mode=development) I got the following error.
I m using webpack with Reactjs .
ERROR in ./src/index.js (./node_modules/imports-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--4-3!./node_modules/postcss-loader/src!./src/index.js)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(1:1) Unknown word
1 | import React from 'react';
| ^
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
package.json
{
"name": "uitest",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.10.2",
"#babel/plugin-proposal-class-properties": "^7.10.1",
"#babel/preset-env": "^7.10.2",
"babel-loader": "^8.1.0",
"babel-preset-react": "6.24.1",
"cra-template": "1.0.3",
"html-webpack-plugin": "^4.3.0",
"path": "^0.12.7",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.11.1",
"react-scripts": "3.4.1",
"webpack-cli": "^3.3.12",
"yarn": "^1.22.4",
"webpack": "4.43.0",
"webpack-dev-server": "3.11.0"
},
"scripts": {
"start": "react-scripts start",
"webpackdevserver": "webpack-dev-server",
"dev": "webpack-dev-server --mode=development",
"prod": "webpack --mode=production",
"build": "webpack --config prod.config.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"css-loader": "^3.6.0",
"imports-loader": "^1.0.0",
"node-sass": "^4.14.1"
}
}
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: {
historyApiFallback: true,
},
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: "main.js"
},
module: {
rules: [{
test: /\.m?js$|jsx|css/,
exclude: /node_modules/,
use: [
"babel-loader",
'style-loader',
'imports-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
// 0 => no loaders (default);
// 1 => postcss-loader;
// 2 => postcss-loader, sass-loader
},
},
'postcss-loader',
]
}, ]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html'),
filename: 'index.html'
})
],
};
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(
<App/> ,
document.getElementById('root')
);
serviceWorker.unregister();
I'm trying to deploy my app to my website but it deploys without errors in console but blank html page. The following are some of my files.
package.json:
{
"name": "name-here",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.13",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-day-picker": "^7.4.8",
"react-device-detect": "^1.12.1",
"react-dom": "^16.13.1",
"react-hook-form": "^5.6.2",
"react-icons": "^3.10.0",
"react-native-vector-icons": "^6.6.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"react-time-picker": "^4.0.1",
"react-web-vector-icons": "^1.0.2",
"requirejs": "^2.3.6"
},
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"babel-preset-expo": "~8.1.0",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"react-scripts": "^3.4.1",
"ttf-loader": "^1.0.2",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
webpack.config.js:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "src/index.js"),
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "bundle.js",
},
devServer: {
contentBase: "./dist",
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
exclude: /node_modules/,
loader: "url-loader",
},
{
test: /\.html$/,
exclude: /node_modules/,
use: [
{
loader: "html-loader",
},
],
},
{
test: /\.(woff|woff2|eot|ttf)$/,
exclude: /node_modules/,
loader: "url-loader?limit=100000",
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: path.join(__dirname, "public/index.html"),
filename: "./index.html",
}),
],
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
index.html:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Name here</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '../src/App';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Could someone please guide me to a solution? I have generated a build folder and dist folder. It builds successfully.
Your index.html page does not load any js assets. So, it makes sense that you are seeing a blank page.
Might I recommend using create-react-app for bootstrapping a new React project. It gives you a npm run build command, which will create a ready-to-deploy version of your app in the build folder.