I'm a new dev but have a few projects under my belt. I'm stuck on a peculiar issue and I don't know where to start looking for a solution. Whenever I try to run "npm run build-dev", I get 38 error messages such as:
ERROR in ./src/index.js 1:13-28 Module not found: Error: Can't resolve 'path' in '/Users/******/src'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false }
However, my index.js has only one line:
const express = require('express');
Did I add anything in package.json or webpack.dev.js that could create dozens of can't resolve error messages? I'm quite confused as I can't initialize the project.
Thank you very much for your help,
Matt
package.json
{
*******
"scripts": {
"start": "node dist/bundle.js",
"build-dev": "webpack --config webpack.dev.js",
"build-prod": "webpack --config webpack.prod.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "",
"description": "",
"dependencies": {
"axios": "^0.27.2",
"dotenv": "^16.0.2",
"express": "^4.18.1"
},
"devDependencies": {
"#types/node": "^18.7.18",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^4.0.0",
"dotenv-webpack": "^8.0.1",
"ts-loader": "^9.4.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}
webpack.dev.js
const webpack = require('webpack');
const path = require('path');
const Dotenv = require('dotenv-webpack');
module.exports = {
entry: './src/index.js',
mode: 'development',
/*resolve: {
extensions: [".ts", ".tsx", ".js"]
},*/
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new Dotenv()
]
};
Related
HHHi,
I'm trying to use the .env file to store the API id and key for the API I'm using and it's not working. My .env file is in the root of my working directory as well as the root of the repository where the .gitignore file is. It looks like this:
API_ID=XXXXXX
API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXX
I installed dotenv and in my index.js file in my server directory I call it like this:
const dotenv = require('dotenv');
dotenv.config();
then in my apiCall.js function I try to call the variables from the .env file like this:
const AYLIENTextAPI = require('aylien_textapi');
let textapi = new AYLIENTextAPI({
application_id: process.env.API_ID,
application_key: process.env.API_KEY
});
but the ID and Key are showing up as undefined. What am I doing wrong? I would really appreciate any help.
Thanks,
Mike
UPDATE:
this is my webpack.dev.js file:
const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/client/index.js',
output : {
libraryTarget: 'var',
library: 'Client'
},
mode: 'development',
devtool: 'source-map',
stats: 'verbose',
module: {
rules: [
{
test: '/\.js$/',
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/client/views/index.html",
filename: "./index.html",
}),
new CleanWebpackPlugin({
// Simulate the removal of files
dry: true,
// Write Logs to Console
verbose: true,
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: true,
protectWebpackAssets: false
})
]
}
this is my package.json file:
{
"name": "example-project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node src/server/index.js",
"build-prod": "webpack --config webpack.prod.js",
"build-dev": "webpack --config webpack.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"aylien_textapi": "^0.7.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"terser-webpack-plugin": "^2.3.5",
"webpack-dev-server": "^3.10.3",
"workbox-webpack-plugin": "^5.0.0"
}
}
figured it out. I can only access the environment variables on the server side.
Hi I am new with frontend technologies so I have a question around webpack and express js. I am building an application using react , webpack , node and express js. The app.js looks like the following
app.js
const express = require('express');
const app = express();
var path = require('path');
app.use(express.static(__dirname + '/'));
app.get('/', (req, res) => { // new
res.sendFile(__dirname + "/index.html");
});
app.listen(3000, () => console.log('listening on port 3000'));
package.json looks like following
"version": "1.0.0",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 0",
"build": "webpack --mode production",
"start": "nohup webpack-dev-server --mode development --open &",
"prepublishOnly": "cp -r configuration/* build/"
},
"repository": {
"type": "git",
"url": "ssh://git.amazon.com/pkg/SPSWebApplication"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"express": "^4.16.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"react-dom": "^16.8.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-middleware": "^3.6.1",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"#stencil-react/core": "*",
"#stencil-react/theme-default": "*",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"react": "^16.8.4",
"webpack-dev-server": "^3.2.1",
"html-webpack-plugin": "^3.2.0"
},
"description": ""
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
resolve: { // this allows to import 'Foo.jsx'
extensions: ['.jsx', '.js', '.json']
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
when i build the code in the build folder it creates dist/app.js,main.js,index.html whenever i try to run app.js it says
Error: Cannot find module 'express'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:649:15)
at Function.Module._load (internal/modules/cjs/loader.js:575:25)
at Module.require (internal/modules/cjs/loader.js:705:19)
at require (internal/modules/cjs/helpers.js:14:16)
I want to run my application in production environment through dist/app.js but when I do "node app.js" it gives me this dependency issue I am assuming webpack should pull the express dependency in dist/* folder in a minified form which i am assuming it is not doing. Can you please if I am missing anything and my understanding is correct or not?
I have built a basic babel webpack starter project that i clone from git. The git repository has no dest/output/build folder nor does it have any initial build files. I am knew to webpack so i assumed that when the webpack-dev-server started up it would create a folder (in my case 'build') and do a first time compilation of the source files. Instead i am forced to start the process manually only then after the initial compilation will webpack-dev-server compile the changes.
What am i missing ?
package.json
{
"name": "babel-webpack-starter",
"version": "1.0.0",
"description": "A Babel Webpack Stater Pack for compiling ES2015/ES6, ES2016/ES7 and ES2017 code doen to ES5. This will allow for the use of ES6 modules and later ECMAScript features such as async/await. Also includes a webpack-dev-server to auto load server without having to re-compile.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=development",
"start": "webpack-dev-server --output-public-path=/build/ --mode=development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.16.4",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
webpack.config.js
// Load Node modules
const path = require('path');
// Export modules
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [{
test: /\.js?$/,
exclude: '/node_modules',
loader: 'babel-loader',
query: {
presets: ['env']
}
}]
}
};
webpack-dev-server will not put your app.bundle.js in your working directory, it will compile your files in-memory.
If you want to access the files, add public path to the output option or which you have done there in the npm start script.
output: {
...
publicPath: '/build/'
}
Now, your files will be available in localhost:<port>/build/app.bundle.js
You can check this site out for more information
I am creating a simple react project using webpack npm and babel.
I am able to install all the dependencies using npm.
when I try to start the webpack-dev-server, it errors out.
Can someone please suggest a way out.
I use the command npm run dev to start, defined in the package.json
here is my webpack.config.js
var webpack = require('webpack');
var path = require('path');
var config = {
entry: "D:\github\UI\ReactWebpackBabel\app\index.jsx",
output: {
path: "D:\github\UI\ReactWebpackBabel\build",
filename: 'bundle.js',
publicPath: '/':
},
devtool: 'source-map',
devServer: {
inline: true,
contentBase: BUILD_DIR,
port: 3333
},
module: {
loaders: [{
test: /\.jsx?/,
include: "D:\github\UI\ReactWebpackBabel\app\index.jsx",
loader: 'babel-loader',
query: {
presets: ['babel-preset-es2015', 'react']
}
}]
}
}
and here is my package.json
{
"name": "reactwebpackbabel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "D:\\github\\UI\\ReactWebpackBabel\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js --config D:\\github\\UI\\ReactWebpackBabel\\code\\ReactWebpackBabel\\webpack.confg.js",
"build": "webpack --config D:\\github\\UI\\ReactWebpackBabel\\code\\ReactWebpackBabel\\webpack.confg.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"create-react-class": "^15.6.2",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"webpack": "^3.8.0",
"webpack-dev-server": "^2.9.2"
}
}
You should use webpack-dev-server.cmd not *.js file. Especially on Windows ;)
It stays here -> node_modules/.bin/webpack-dev-server.
It should also run without full path. Npm script will locate it in node_modules.
Check out getting started: https://github.com/webpack/webpack-dev-server
I first ran:
npm install babel-core babel-loader --save-dev
then I ran:
npm run build
and I got this following error:
> immutable-todo#1.0.0 build C:\Users\Ryan\Documents\to-do\immutable-redux- todo
> webpack
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.3
Time: 1285ms
+ 1 hidden modules
ERROR in ./src/app.js
Module build failed: Error: Couldn't find preset "react" relative to directory "C:\\Users\\Ryan\\Documents"
at C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-core\lib\transformation\file\options\option
-manager.js:299:19
at Array.map (native)
at OptionManager.resolvePresets (C:\Users\Ryan\Documents\to- do\immutable-redux-todo\node_modules\babel-core\lib\tran
sformation\file\options\option-manager.js:270:20)
at OptionManager.mergePresets (C:\Users\Ryan\Documents\to-do\immutable- redux-todo\node_modules\babel-core\lib\transf
ormation\file\options\option-manager.js:259:10)
at OptionManager.mergeOptions (C:\Users\Ryan\Documents\to-do\immutable- redux-todo\node_modules\babel-core\lib\transf
ormation\file\options\option-manager.js:244:14)
at OptionManager.init (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-core\lib\transformation
\file\options\option-manager.js:374:12)
at File.initOptions (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-core\lib\transformation\f
ile\index.js:216:65)
at new File (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-core\lib\transformation\file\inde
x.js:139:24)
at Pipeline.transform (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-core\lib\transformation
\pipeline.js:46:16)
at transpile (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-loader\lib\index.js:41:20)
at Object.module.exports (C:\Users\Ryan\Documents\to-do\immutable-redux- todo\node_modules\babel-loader\lib\index.js:
138:12)
Here is my package.json:
{
"name": "immutable-todo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"immutable": "^3.8.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-redux": "^4.4.5",
"redux": "^3.4.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.0"
}
}
I have been trying to search this four a long time with no luck, can you please help me understand what I am doing wrong and what I need to fix?
Thank you.
Here is my webpack.config.js:
module.exports = {
entry: './src/app.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: { presets: [ 'es2015', 'react' ] }
}
]
}
};