Entry module not found - babel-loader

ERROR in Error: Child compilation failed:
Entry module not found: Error: Can't resolve '/Users/MarkPierre/Desktop/es6-project-2019/src/index.html' in '/Users/MarkPierre/Desktop/es6-project-2019':
Error: Can't resolve '/Users/MarkPierre/Desktop/es6-project-2019/src/index.html' in '/Users/MarkPierre/Desktop/es6-project-2019'
When I run the command npm run start, I get the error message mentioned above.
I've checked the path and it's there. Any ideas?
Seems like the issue occurs with template: './starter/src/index.html'. I've removed the starter, but still the same issue. Very frustrating as this is the final part of the config :-(
babelrc file
{
"presets": [
["#babel/preset-env", {
"targets": {
"browsers": [
"last 5 versions",
"ie >= 8"
]
}
}]
]
}
package.json
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack: --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"#babel/polyfill": "^7.2.5"
}
}
webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['#babel/polyfill', './starter/src/js/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js',
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}]
}
};

Related

How to run the webpack 3 project in a local system?

I have a webpack project 3 and I want to run it on my local system.
Here is my webpack config file and the package.json
{
"private": true,
"name": "XXx",
"version": "Xxx",
"description": "X",
"main": "index.js",
"dependencies": {
"babel": "^6.23.0",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"findandreplacedomtext": "^0.4.6",
"raw-loader": "^0.5.1",
"style-loader": "^0.19.1",
"text-loader": "0.0.1"
},
"devDependencies": {
"nodemon": "^1.19.4",
"sass": "^1.58.0",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.10.0"
},
"scripts": {
"min.js": "make min.js",
"min.css": "make min.css",
"serve": "webpack"
},
"author": "",
"license": "ISC"
}
Makefile
const UglifyJs = require('uglifyjs-webpack-plugin')
const isWatching = process.argv[2] === '-w'
const plugins = [
function() {
this.plugin('watch-run', function(watching, callback) {
console.log('Begin compile at ' + new Date())
callback()
})
}
]
if (!isWatching) {
plugins.unshift(
new UglifyJs({
extractComments: false,
sourceMap: true,
})
)
}
module.exports = {
entry: {
'bundle': './js/bundle.js'
},
devtool: isWatching ? 'source-map' : false,
output: {
path: `${__dirname}/js`,
filename: '[name].min.js',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'raw-loader',
}
},
{
test: /\.s?css$/,
use: [
{
loader: "css-loader",
options: {
url: false, // do not bundle images
},
},
{loader: "sass-loader"},
],
}
]
},
plugins,
}
There is a makefile but I dont think this is required for this problem.
I have tried
webpack -p , webpack -w , and webpack .
webpack -p is giving an error : ERROR in bundle.min.js from UglifyJs Unexpected token: punc ({) [bundle.min.js:1,976]
while webpack -w works fine I am unable to find any url for the website.
the last command runs and ends.

How to configure webpack 5 to output ts files in dist folder from src folder?

I am using webpack 5 with typescript and a node.js app.
My folder structure is
src/
server.ts
mymodule.ts
public/
index.html
main.ts
utils.ts
but I want to output the compiled files as
dist/
server.js
mymodule.js
public/
index.html
bundle.js
This is my package.json
{
"name": "to-do",
"version": "1.0.0",
"description": "An application for to do list",
"main": "server.js",
"type": "module",
"scripts": {
"start": "node server.js",
"debug": "node --inspect server.js",
"build": "webpack",
"serve": "webpack serve"
},
"license": "MIT",
"dependencies": {
"express": "^4.18.1",
"filenamify": "^5.1.1",
"html-webpack-plugin": "^5.5.0",
"http": "^0.0.1-security",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"keywords": [
"todo"
],
"devDependencies": {
"#types/express": "^4.17.13",
"#types/node": "^18.0.6"
}
}
This is my webpack configuration
import path from 'path';
import { fileURLToPath } from 'url';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default {
entry: {
bundle : './src/public/main.ts'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
target:'node',
resolve: {
extensions: ['.ts', '.js'],
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/public/index.html',
scriptLoading:"module"
})
],
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist'),
clean: true
},
mode: 'development',
devtool: 'inline-source-map',
devServer: {
hot: true,
static: {
directory: './dist',
},
compress: true,
port: 3002,
headers: {
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Opener-Policy': 'same-origin'
}
},
stats: {
errorDetails:true
}
};
I get an error about server.js can't be resolved, since I assume it looks at the main from package.json.
ERROR in ./src/public/main.ts 3:0-36
Module not found: Error: Can't resolve './server.js' in 'C:\Users\Desktop\4\src\public'
resolve './server.js' in 'C:\Users\Desktop\4\src\public'
using description file: C:\Users\Desktop\4\package.json (relative path: ./src/public)
using description file: C:\Users\Desktop\4\package.json (relative path: ./src/public/server.js)
no extension
How can I resolve this?

Webpack won't compile when I use an image url in scss

I'm trying to get a very simple project going with Material Design and WebPack, but I'm getting compile errors. I've been following this guide to set everything up:
https://material.io/develop/web/getting-started
I'm honestly baffled by this error. I have obviously looked online for a solution, but everything I found was related to linter. I don't use a linter.
Here's the error:
ERROR in ./app.scss
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (5:73)
3 | import ___CSS_LOADER_API_IMPORT___ from "./node_modules/css-loader/dist/runtime/api.js";
4 | import ___CSS_LOADER_GET_URL_IMPORT___ from "./node_modules/css-loader/dist/runtime/getUrl.js";
> 5 | var ___CSS_LOADER_URL_IMPORT_0___ = new URL("./images/bckgnd_light.jpg", import.meta.url);
| ^
6 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
7 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
8 | // Module
My app.scss file only consists of:
#content {
background: url('./images/bckgnd_light.jpg') #e8e5d7;
}
My webpack.config.js:
const autoprefixer = require('autoprefixer');
module.exports = {
entry: ['./app.scss', './app.js'],
output: {
filename: 'bundle.js',
},
mode: 'development',
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{loader: 'extract-loader'},
{loader: 'css-loader'},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
autoprefixer()
]
}
}
},
{
loader: 'sass-loader',
options: {
// Prefer Dart Sass
implementation: require('sass'),
// See https://github.com/webpack-contrib/sass-loader/issues/804
webpackImporter: false,
sassOptions: {
includePaths: ['./node_modules'],
},
},
}
],
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
loader: 'url-loader'
},
],
},
};
package.json:
{
"name": "materialdesigntest",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
"#material/button": "^14.0.0",
"#material/ripple": "^14.0.0",
"#material/textfield": "^14.0.0",
"material-components-web": "^14.0.0"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/eslint-parser": "^7.18.2",
"#babel/preset-env": "^7.18.6",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"postcss-loader": "^7.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"url-loader": "^4.1.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve"
},
"author": "",
"license": "ISC"
}
After some more digging I found this thread:
https://github.com/peerigon/extract-loader/issues/111
Changing the css-loader to this solved the issue for me:
{
loader: 'css-loader',
options: {
esModule: false
}
},

Webpack has been initialised using a configuration object that does not match the API schema. webpack install by "npm install webpack"

I am learning on React-JS. I have written a simple project. But getting an error when I run "npm start" command.
My Webpack.config.js file is given below--
var webpack= require("webpack");
var path =require("path");
var DIST_DIR= path.resolve(__dirname,
"dist");
var SRC_DIR= path.resolve(__dirname,
"src");
var config={
entry: SRC_DIR + "/app/index.js",
output:{
path: DIST_DIR + "/app",
file: "bundle.js",
publicPath: "/app/"
},
module:{
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query:{
presets: ["react",
"es2015", "stage-2"]
}
}
]
}
};
module.exports=config;
package.json file --
{
"name": "basic-reactjs",
"version": "1.0.0",
"description": "Some Basic ReactJS",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && cp
src/index.html dist/index.html
&& webpack-dev-server --content-
base src/ --inline --hot",
"build:prod": "webpack -p && cp
src/index.html dist/index.html"
},
"keywords": [
"reactjs"
],
"author": "Numery Zaber",
"license": "MIT",
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3"
},
"devDependencies": {
"babel-loader": "^8.0.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
Webpack install by the follwoing command
npm install webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 --save-dev
Please help me to solve the issue.
The schema in Webpack 4 is now changed.You have imported the loaders which was working in older version of webpack.
For more details : https://webpack.js.org/concepts/loaders/
var webpack= require("webpack");
var path =require("path");
var DIST_DIR= path.resolve(__dirname,
"dist");
var SRC_DIR= path.resolve(__dirname,
"src");
var config={
entry: SRC_DIR + "/app/index.js",
output:{
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["react","es2015", "stage-2"],
},
}
}
]
}
};
module.exports=config;
You can also use #babel/preset-env.

Ignoring node_modules for compiling server-side ES6 with Webpack locally

I am working with a Raspberry Pi Zero that is my server, running my module.
Raspberry's are not the best to compile code so I want to compile the server-side code locally. To do so I need to compile the code without resolving my imports. Why that ?
Because the Server module uses other modules that can only be installed on the Raspberry (such as UPM or MRAA for sensors).
For now I compile on the Pi but it's slow.
So I'm trying to compile to ES6 locally with my config:
const path = require("path");
const webpack = require("webpack");
const nodeExternals = require("webpack-node-externals");
module.exports = {
entry:
{
index: __dirname + "/src/index.js"
},
output: {
// sourceMapFilename: "[name].map",
path: path.resolve(__dirname, "build"),
filename: "[name].js",
sourceMapFilename: "[name].map",
chunkFilename: "[id].chunk.js"
},
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "src")
],
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
presets: ["env"],
plugins: [
["transform-runtime"],
["transform-es2015-modules-commonjs-simple", { // Very important
"noMangle": true
}]
]
}
}
}
]
},
plugins: [
new webpack.ProvidePlugin({Hardlets: path.resolve(__dirname, "../Hardlets/build/index")}),
new webpack.IgnorePlugin(new RegExp("/(node_modules)/"))
// new webpack.optimize.UglifyJsPlugin(),
// new HtmlWebpackPlugin({template: "./src/index.html"})
],
target: "node",
externals: [nodeExternals()],
devtool: "source-map"
};
Which gives me an error because only the devDependencies are installed locally but not the other dependencies (sensors...):
ERROR in ./src/hardlets/relays/Relays.js Module not found: Error:
Can't resolve 'jsupm_relay' in
'/home/stinky/Projects/gardener/Sensors/src/hardlets/relays' #
./src/hardlets/relays/Relays.js 1:1008-1030 #
./src/HardletInstances.js # ./src/index.js
ERROR in ./src/hardlets/dht22/DHT22.js Module not found: Error: Can't
resolve 'rpi-dht-sensor' in
'/home/stinky/Projects/gardener/Sensors/src/hardlets/dht22' #
./src/hardlets/dht22/DHT22.js 1:925-950 # ./src/HardletInstances.js
# ./src/index.js
How can I prevent webpack from trying to resolve/import these dependencies ? The dependencies must be resolved at runtime.
There is my package.json:
{
"name": "gardener",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http://192.168.8.100:3000/pi/Gardener.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-runtime": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-es2015-modules-commonjs-simple": "^6.7.4",
"webpack": "^3.8.1",
"webpack-node-externals": "^1.6.0"
},
"dependencies": {
"upm": "^1.0.0",
"rpio": "^0.9.19",
"rpi-dht-sensor": "^0.1.1"
}
}
The modules could not be excluded with nodeExternals() because it lists the modules in /node_modules/. However, the modules that are to be excluded are not installed locally so nodeExternals() does not do the job.
It needs to exclude them from by reading package.json.
This will read the modules from the package.json file & exclude them instead of the node_modules directory:
// webpack.config.js
var nodeExternals = require('webpack-node-externals');
...
module.exports = {
...
externals: [nodeExternals({
modulesFromFile: true
})], // in order to ignore all modules in package.json when bundling
...
};

Resources