Develop Reference

Webpack can't resolve file loader js files

I keep getting this error
Can't resolve 'file-loader'
I am running webpack serve command.
I've tried different regex but it always shows the same mistake. if this may have something to do with the way in which the React files are placed let me know.
package.json
{
"name": "Tick",
"version": "1.0.0",
"description": "Productivity app",
"main": "src/server/app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "nodemon src/server/app.js",
"dev": "webpack serve",
"build": "webpack"
},
"author": "Gabriel Gamboa",
"license": "ISC",
"dependencies": {
"cross-env": "^7.0.3",
"express": "^4.17.1",
"nodemon": "^2.0.13",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/preset-env": "^7.15.6",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"html-webpack-plugin": "^5.3.2",
"webpack": "^5.54.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.0"
}
}
Webpack config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, "src", "client", "index.js"),
mode: 'development',
output: {
path:path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}]
},
{
test: /\.(png|jp(e*)g|svg|gif)$/,
use: ['file-loader'],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "client", "index.html"),
}),
],
}
Please help I've tried everything

You need to install it as it is not listed in your package.json file as a dependency.
npm i file-loader -D

Support for the experimental syntax 'jsx' isn't currently enabled error on imported module

I'm building an npm package that includes one react component as part of it. I originally developed the package as just a subfolder of the react app I was testing it on and it was all working. Now that I've extracted the code and turned it into it's own package, when I try to import it and build the react project it receives the error:
Support for the experimental syntax 'jsx' isn't currently enabled
...
Add #babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.
When I run build on the extracted package itself it builds with no issues, it's only when I try and incorporate it into the other project that it has issues. I've tried many of the other solutions from other threads with no luck.
package.json
{
"name": "my-tracing-project",
"version": "1.0.9",
"description": "tracing and instrumentation for react projects",
"main": "src/index.js",
"directories": {
"doc": "docs"
},
"scripts": {
"build": "webpack --mode=production --node-env=production",
"test": "echo \"Error: no test specified\" && exit 1",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production --node-env=production",
"watch": "webpack --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/plugin-transform-react-jsx": "^7.14.3",
"#babel/preset-flow": "^7.13.13",
"#babel/runtime": "^7.14.0",
"#opentelemetry/context-zone": "^0.19.0",
"#opentelemetry/exporter-collector": "^0.19.0",
"#opentelemetry/instrumentation": "^0.19.0",
"#opentelemetry/instrumentation-document-load": "^0.16.0",
"#opentelemetry/instrumentation-fetch": "^0.19.0",
"#opentelemetry/instrumentation-user-interaction": "^0.16.0",
"#opentelemetry/instrumentation-xml-http-request": "^0.19.0",
"#opentelemetry/plugin-react-load": "^0.16.0",
"#opentelemetry/tracing": "^0.19.0",
"#opentelemetry/web": "^0.19.0",
"babel-preset-react": "^6.24.1"
},
"devDependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"#babel/preset-react": "^7.13.13",
"#rollup/plugin-babel": "^5.3.0",
"#webpack-cli/generators": "^2.1.0",
"babel-loader": "^8.2.2",
"prettier": "^2.3.0",
"rollup": "^2.50.4",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
babel.config.js
module.exports = {
presets:[
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
webpack.config.js
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const isProduction = process.env.NODE_ENV == "production";
const config = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, "dist"),
},
plugins: [
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
} else {
config.mode = "development";
}
return config;
};

How do I use webpack-dev-server to run back-end code?

I am using webpack to bundle both of my front-end(React) and back-end(Node.js) codes.
The bundling process was fine. However, when i run "npm run start". The fornt-end code ran fine. But the server-side code was not ran. I tried to run "npm run build" to make sure there isn't any building error. There isn't any error or warning. So i am assuming that the bundling process was fine.
My complete package.json file.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"concurrently": "^4.1.0",
"express": "^4.16.3",
"mongodb": "^3.1.6",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-google-charts": "^3.0.8",
"react-html-parser": "^2.0.2",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.1",
"reactstrap": "^6.5.0",
"request": "^2.88.0"
},
"scripts": {
"start": "webpack-dev-server --open --mode development",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": {
"/*": {
"target": "http://localhost:3001"
}
},
"devDependencies": {
"#babel/core": "^7.1.6",
"#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",
"mini-css-extract-plugin": "^0.4.4",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"webpack-node-externals": "^1.7.2"
}
}
My webpack.config.js:
module.exports = [
{
/*Client Side*/
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: {
loader: "html-loader",
options: { minimize: true }
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,"css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename:"./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename:"[id].css"
})
]
},
{
/*Config for backend code*/
entry: './src/server/server.js',
target: 'node',
output: {
filename: 'server.js'
},
externals: [nodeExternals()]
}
]
How do i use webpack command to run both my front-end and back-end code at the same time?

Here's what the script section of my package.json tends to look like. It doesn't use CRA but it's very similar.
"scripts": {
"builddev": "webpack-dev-server --mode development --devtool inline-source-map --hot",
"serverdev": "nodemon src/server.js",
"dev": "concurrently \"npm run builddev\" \"npm run serverdev\""
},
where concurrently is this node module.
You'll probably need to proxy your server. Since you're using CRA your webpack config is likely hidden away somewhere so you'll have to add an additional property to your package.json:
"proxy": "http://localhost:3001",
where 3001 is the port your server is running on.
If you were rolling your own webpack.config.js you could add the devServer section instead - something like this:
devServer: {
historyApiFallback: true,
proxy: {
open: true,
'/apipath': 'http://localhost:3001',
'/apipath2': 'http://localhost:3001'
}
},

npm install removes react router from package-lock.json

When I delete node_modules from my app, and then run npm install, my package-lock.json is changed and react-router is removed from it. I am getting errors that module react-router is not found. Before it was working perfectly. Here is my webpack-config:
`module.exports = {
entry: ['whatwg-fetch', "./js/app.jsx"],
output: { filename: "./js/out.js" },
watch: true,
devServer: {
inline: true,
contentBase: './',
port: 3001
},
module: {
loaders: [
{
test: /\.jsx$/, exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015', 'stage-2', 'react'] }
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
}`
and my package.json
`{
"name": "test",
"version": "1.0.0",
"description": "test",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "./node_modules/.bin/webpack-dev-server --hot"
},
"author": "test",
"license": "ISC",
"": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"webpack": "^2.2.1"
},
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"style-loader": "^0.21.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.6.1"
}
}
`

You most likely just installed react-router-dom without adding it to your dependencies before you deleted your node_modules. Try to install it and add it to your dependencies, and it will work again.
npm i -S react-router-dom

React router dom is uninstalled due to you deleted the node_modules, so you have to re-install the react-router
npm install --save react-router-dom

Webpack build step isn't generating build files

When I run npm build nothing seems to happen. When I look for the build files I don't see anything. npm start works fine though.
Package.json
{
"name": "pro-react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress",
"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"postcss-loader": "^0.9.1",
"precss": "^1.4.0",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^15.2.1",
"react-dom": "^15.2.1"
}
}
Webpack.production.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
}
]
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
]
}
I also have .babelrc file and webpack.config.js file, let me know if those would be useful to see as well, thanks.

Might be related to the fact that build is an internal command. Seems like I have had this happen to me as well in the past. Check out this Question
In order to run a custom script, you can use the npm run-script build or just npm run build. As stated in the NPM documentation