React module not found - how to import modules in react - javascript

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';

Related

Support for jsx isn't enabled, even though node package is whitelisted in webpack config

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"
]
}
}

Module parse failed: Unexpected token but all loaders are installed

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

webpack Unknown word > 1 | import React from "react"

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();

Error deploying app on website with Webpack and Babel (shows blank page)

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.

Uncaught ReferenceError: ws is not defined

I'm using puppeteer in my React project with Webpack and babel. I write this simple code in my component and I get the following error.
async goToPage() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(this.state.url);
}
When I run npm start I don't get any error in the command line. But I get this error in google chrome console. I think there is a mistake in webpack.config.js but I searched a lot and I can't solve it. Please check the following information and help to solve this problem.
Error:
Uncaught ReferenceError: ws is not defined
at eval (external_"ws":1)
at Object.ws (bundle.js:6941)
at __webpack_require__ (bundle.js:725)
at fn (bundle.js:102)
at eval (WebSocketTransport.js:16)
at Object../node_modules/puppeteer/lib/WebSocketTransport.js (bundle.js:4655)
at __webpack_require__ (bundle.js:725)
at fn (bundle.js:102)
at Object.eval (Launcher.js:27)
at eval (Launcher.js:407)
package.json
{
"name": "scrapper",
"version": "0.1.0",
"private": true,
"dependencies": {
"#blueprintjs/core": "^3.9.0",
"axios": "^0.18.0",
"babel-plugin-emotion": "^10.0.0",
"bluebird": "^3.5.3",
"feedparser": "^2.2.9",
"file-loader": "^2.0.0",
"lodash": "^4.17.11",
"promise": "^8.0.2",
"prop-types": "^15.6.2",
"puppeteer": "^1.11.0",
"query-string": "^6.2.0",
"react-grid-layout": "^0.16.6",
"react-redux": "^5.1.1",
"redux": "^4.0.1",
"redux-promise": "^0.6.0",
"url-loader": "^1.1.2",
"ws": "^6.1.2"
},
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --mode production",
"start:react": "react-scripts start",
"build:react": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.10.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(s*)css$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.(woff|woff2)$/,
use: {
loader: "url-loader",
options: {
name: "fonts/[hash].[ext]",
limit: 5000,
mimetype: "application/font-woff"
}
}
},
{
test: /\.(ttf|eot|svg)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[hash].[ext]"
}
}
}
]
},
resolve: {
extensions: ["*", ".js", ".json"]
},
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "bundle.js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebPackPlugin({
template: "./dist/index.html"
})
],
devServer: {
contentBase: "./dist",
hot: true,
port: 3000,
historyApiFallback: true
},
externals: ['ws']
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-proposal-class-properties", "emotion"]
}
i don't know exact problem just try it once, it may works
just instal it : 'npm install --save ws'
else you can look into this documents : "https://www.npmjs.com/package/ws"

Categories

Resources