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();
Related
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';
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
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.
index.js:
import react from 'react';
import {render} from 'react-dom';
render(
<h1>Hello World!</h1>,
document.getElementById('root')
);
package.json:
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Callum Linington",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"babel-cli": "^6.24.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.3.2",
"bluebird": "^3.5.0",
"eslint": "^3.19.0",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
}
}
Webpack config:
var webpack = require('webpack');
var packages = require('./package.json');
var path = require('path');
module.exports = {
entry: {
main: './src/index.js',
vendor: Object.keys(packages.dependencies)
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor' // Specify the common bundle's name.
})
],
devtool: "cheap-eval-source-map",
devServer: {
contentBase: path.join(__dirname, "dist"),
publicPath: '/',
port: 9000
},
module: {
rules: [
{
test: /\.js?$/,
use: [ 'babel-loader', ],
exclude: /node_modules/
}
]
}
};
Webpack output:
Chrome Dev Output:
It is crutial to name imported React class starting with capital letter. You first line should be: import React from 'react';. That is because all JSX tags will be converted by Babel to something like React.createElement(....) and React is not there. Exactly what console output tells you.
I have been following a react todo-app tutorial and am getting this error.
ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ./src
# multi main.
WEBPACK.CONFIG.JS
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080/',
'webpack/hot/only-dev-server',
'./src'
],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
modulesDirectories: ['node_modules', 'src'],
extensions: ['', '.js']
},
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loaders: [ 'react-hot-loader','babel-loader']
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
PACKAGE.JSON:
{
"name": "taskmaven2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Marcode777/taskmaven2.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Marcode777/taskmaven2/issues"
},
"homepage": "https://github.com/Marcode777/taskmaven2#readme",
"dependencies": {
"express": "^4.13.4",
"lodash": "^4.2.1",
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
},
"engines": {
"node": "5.5.0"
}
}
APP.JS
import React from "react";
export default class App extends React.Component {
render(){
return(
<div>
<h1>TASKMAVEN2</h1>
</div>
);
}
}
INDEX.JSX:
import React from 'react';
import {render} from 'react-dom';
import App from './components/app';
console.log(App);
render(<App/>, document.getElementById("app"));