I am using webpack and babel in my project. While the webpack is wokring fine but babel is somehow not doing it's job in polyfilling the ES6+ features. When I use the npm script, I get some error "Entrypoint undefined = index.html" in the command prompt. Kindly help !
Package.json
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "neeraj",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-preset-env": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.19.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
}
webpack.config.js
const path=require('path');
const HtmlWebPackPlugin=require('html-webpack-plugin');
module.exports={
entry:['babel-polyfill','./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'
}
}
]
}
};
.bablerc
{
"presets":[
["env",{
"targets":{
"browser":[
"last 5 versions",
"ie>=8"
]
}
}]
]
}
Error what I get:
Project Structure:
EDIT------------------
I started getting some new error now.
It is the html-webpack-plugin's problem, a fix was introduced in
3.0.7 but was removed again in 3.0.8. For more information, please click here.
So if you run npm install --save-dev html-webpack-plugin#3.0.7, and then npm run dev will output Entrypoint html-webpack-plugin for "index.html" = index.html. And personally, it is a trivail problem not that important.
There was some dependency issue. Deleted my node_modules folder and used this command instead: npm install -D babel-loader#7 babel-core babel-preset-env webpack
Follow this link for more information : https://github.com/babel/babel-loader
Now I no longer get any error and also babel is working fine.
FYI....you might have to install babel-polyfill & html-webpack-plugin seperately.
Related
I have been following a django-react tutorial and ran into a problem with the command npm run dev. I thought it was a problem with the webpack file but maybe not.
[error message][1]
[webpack file][2]
[package.json][3]
[file structure and app.js][4]
[index.js][5]
This is the error that I am receiving:
[1]: https://i.stack.imgur.com/vCK8g.png
(django_venv) C:\Users\bostm\Documents\CodingProjects\React-Django
\music_controller\frontend>npm run dev
> frontend#1.0.0 dev
> webpack --mode development --watch
[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset main.js 0 bytes [compared for emit] [minimized] (name: main)
ERROR in main
Module not found: Error: Can't resolve './src/index.js' in 'C:\Users\bostm
\Documents\CodingProjects\React-Django\music_controller\frontend'
webpack 5.10.2 compiled with 1 error in 136 ms
[webpack-cli] watching files for updates...
This is the webpack file. I assumed the problem was here because the error message said that it couldn't resolve "./src/index.js" in the path to the frontend directory, which is the name of the webapp folder that src/index is in. I tried using a solution from another post by using path.resolve(__dirname, /path/). It did not work so this is what I had originally.
[2]
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
// This has effect on the react lib size
NODE_ENV: JSON.stringify("production"),
},
}),
],
};
This is the package.json file. The only lines I added were for "dev" and "build."
[3]: https://i.stack.imgur.com/Yea1b.png
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.10",
"#babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.10.2",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"react-router-dom": "^5.2.0"
}
}
This is my app.js file The screenshot is included mostly so that you can see how the file directory is setup and I was not sure how to include that as text in the post itself.
[4]: https://i.stack.imgur.com/dLBXd.png
Lastly the index.js file which is just a single line importing App from components.
[5]
import App from "./components/App";
Sorry if anything about my problem is unclear let me know if I can clarify anything. Any help or suggestions would be greatly appreciated. I'm really not sure where I went wrong. I have been considering going back and just creating the react app using npx create-react-app [appName], but I would like to know how to set it up manually in case I want to use something other than babel and webpack in the future. Thanks again.
i'm having a hard time to understand how to run all of my .js files using package.js files
i have almost 2000.js scripts i need to run them one by one, i'm using a api made by gameflip
in the folder i found package.js, but i don't know how to use it ,
can anyone tell me how to do that ? thank you
here the script :
{
"name": "gfapi",
"version": "0.1.1",
"description": "Gameflip API",
"keywords": "Gameflip",
"homepage": "https://github.com/iJJi/gfapi",
"bugs": "https://github.com/iJJi/gfapi/issues",
"author": {
"name": "Eng-Shien Wu",
"email": "engshien.wu#ijji.com"
},
"license": "MIT",
"private": true,
"files": [
"index.js"
],
"repository": "iJJi/gfapi",
"engines": {
"node": ">=8.5.0"
},
"scripts": {
"bulk_listing": "node src/samples/bulk_listing.js",
"test": "ENVIRONMENT=mocha mocha src/test --recursive",
"docs": "jsdoc -c jsdoc_conf.js -d docs -P package.json index.js; docco -o docs/samples src/samples/*.js src/samples/*.rb"
},
"dependencies": {
"base-64": "^0.1.0",
"bluebird": "^3.5.0",
"bunyan": "^1.8.12",
"file-type": "^8.1.0",
"http-errors": "^1.6.2",
"node-rest-client-promise": "^3.1.1",
"promise-ratelimit": "^0.0.3",
"request": "^2.85.0",
"request-promise": "^4.2.2",
"speakeasy": "^2.0.0"
},
"devDependencies": {
"marked": "^0.3.19",
"docco": "^0.7.0",``
"jsdoc": "^3.5.5"
}
}
What you posted isn't a package.js (I don't even know if it exists), but a package.json. It's generated by NPM, the Node Package Manager. It's a list of all the project's dependencies. I think that what you're looking for are the npm scripts, they are in the script object of package.json.
npm run <script>
# For example :
npm run bulk_listing
npm run test
npm run docs
Each script will run its associated command in this package.json.
npm run bulk_listing
# Will do the same thing as:
node src/samples/bulk_listing.js
More about package.json.
The script I talked about below
If you want to run all the scripts, this should do the job :
const fileNames = ["path/to/fileA", "fileB"]; // I assume you have something to get all the files path. Isn't that npm run bulk_listing ?
fileNames.forEach(async (path, index) => {
// It's pretty much like 'node <path>'
await require(path);
// All the code here is executed AFTER the script has been launched
console.log(`LAUNCHED ${index} | ${path}`)
});
I try to build a small app based upon Webex web SDK, internally requiring regenerator-transform.
Here is my package.json simple file:
{
"scripts": {
"serve": "yarn build",
"build": "parcel index.html --out-dir dist --public-url ./",
"deploy": "git subtree push --prefix dist origin gh-pages",
},
"license": "MIT",
"dependencies": {
"crypto-js": "^4.0.0",
"moment": "^2.24.0",
"urijs": "^1.19.2",
"webex": "^1.80.147"
},
"browserslist": [
"last 2 major versions and >1%"
],
"devDependencies": {
"#babel/core": "^7.8.7",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-stage-0": "^6.24.1"
}
}
Here is my .babelrc file too:
{
presets : [ 'es2015', 'es2016' ]
}
It works perfectly when I use browserslist preset latest Chrome, but with this current query, I have this error:
[...]pkijs/src/SignedCertificateTimestampList.js: unknown Statement of type "ForOfStatement"
Full stack trace:
🚨 /Users/guillaumepotier/Sites/webex-sdk/node_modules/pkijs/src/SignedCertificateTimestampList.js: /Users/guillaumepotier/Sites/webex-sdk/node_modules/pkijs/src/SignedCertificateTimestampList.js: unknown Statement of type "ForOfStatement"
at Emitter.Ep.explodeStatement (/Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/emit.js:587:13)
at /Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/emit.js:323:12
at Array.forEach (<anonymous>)
at Emitter.Ep.explodeStatement (/Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/emit.js:322:22)
at Emitter.Ep.explode (/Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/emit.js:280:40)
at PluginPass.<anonymous> (/Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/visit.js:111:17)
at PluginPass.<anonymous> (/Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/util.js:28:17)
at newFn (/Users/guillaumepotier/.config/yarn/global/node_modules/#babel/traverse/lib/visitors.js:179:21)
at NodePath._call (/Users/guillaumepotier/.config/yarn/global/node_modules/#babel/traverse/lib/path/context.js:55:20)
at NodePath.call (/Users/guillaumepotier/.config/yarn/global/node_modules/#babel/traverse/lib/path/context.js:42:17)
It seems the problem is raised by regenerator-transform and the "ForOfStatement" within a generator, I tried many babel different configs but in vain.
My parcel --version gives me 1.12.4
Do you have any clue for that, how do you ship code with Parcel for IE11?
So I have been trying to setup React Js environment. I am facing the babel dependencies error. I know this problem is very common and there are tons of answers available but none of them have worked for me so far.
I have searched through the internet to solve it but it still shows the same error.
This is the error I am getting:
ERROR in ./main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-es2015' from 'D:\my-app'
at Function.module.exports [as sync] (D:\my-app\node_modules\resolve\lib\sync.js:58:15)
at resolveStandardizedName (D:\my-app\node_modules\#babel\core\lib\config\files\plugins.js:101:31)
at resolvePreset (D:\my-app\node_modules\#babel\core\lib\config\files\plugins.js:58:10)
at loadPreset (D:\my-app\node_modules\#babel\core\lib\config\files\plugins.js:77:20)
at createDescriptor (D:\my-app\node_modules\#babel\core\lib\config\config-descriptors.js:154:9)
at items.map (D:\my-app\node_modules\#babel\core\lib\config\config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (D:\my-app\node_modules\#babel\core\lib\config\config-descriptors.js:109:29)
at createPresetDescriptors (D:\my-app\node_modules\#babel\core\lib\config\config-descriptors.js:101:10)
at passPerPreset (D:\my-app\node_modules\#babel\core\lib\config\config-descriptors.js:58:96)
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 448 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpac
This is my .babelrc
{
"presets": ["es2015"]
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
package.json
{
"name": "my-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
},
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-es2015": "^7.0.0-beta.53",
"babel-loader": "^8.0.6",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.31.0"
}
}
babel-loader#8.x uses Babel 7.x, which is #babel/core#^7.0.0, and more importantly in your case #babel/preset-env#7 replaces babel-preset-env#^1.7.0.
You'll need to make sure to do
npm install #babel/core #babel/preset-env
and update your Babel config to use #babel/preset-env instead of babel-preset-env with something like
"presets": [
"#babel/preset-env"
]
Note: For others coming across this, the issue may also be that you're using plugins/preset from Babel 6 on Babel 7. This may be hard to notice if you're using a third-party Babel preset since the versions of the presets may not match the version of Babel itself.
For NPM, run
npm install -D babel-loader #babel/core #babel/preset-env webpack
FOR YARN, run
yarn add --dev babel-loader #babel/core #babel/preset-env webpack
Late but might be helpful.
Downgrade the version of #babel-loader to version 7.
It worked for me when i encountered same problem
If you noticed this after installing a package like web3.
Kill the server and try to rebuild hope it helps
I am working on a new project on react js using lynda "Reactjs essential training". Issue is when i run "npm start" command it compiles my project successfully but neither "assets" directory created nor "bundle.js" created why?
I have used my modified "webpack.config.js" what was different from the training exercise files as the provided file not working for me. Below is the code:
.babelrc
--------
{
"presets": ["#babel/preset-env","#babel/react"]
}
package.json
------------
{
"name": "react-essential",
"version": "1.0.0",
"description": "A project focusing on React and related tools",
"main": "index.js",
"dependencies": {
"#babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-react-native": "^5",
"webpack": "^4.28.3",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"scripts": {
"start": "./node_modules/.bin/webpack-dev-server"
},
"author": "Muhammad Waqas",
"license": "MIT"
}
webpack.config.js
-----------------
var webpack = require("webpack");
module.exports = {
entry: __dirname + "/src/index.js",
output: {
path: __dirname + "/dist/assets",
filename: "bundle.js",
publicPath: "assets"
},
devServer: {
inline: true,
contentBase: __dirname + "/dist",
port: 3000
},
module: {
rules: [{
test: /\.js$/,
loader: ["babel-loader"]
}]
}
}
Whenever i run "npm start" it should start the webpack-dev-server and changes (if any) should be reflected in the browser.
webpack development server does not write to disk. it serves from memory. if you wish to create a production build, that will get outputted to the assets folder, you need to add a build script, which you will run.
Add the follow build script to your package.json file, just after the start script, the order does not matter though:
"start": "./node_modules/.bin/webpack-dev-server",
"build": "./node_modules/.bin/webpack --config webpack.config.js",
Then you can run the following on the command line, to create a build
npm run build
just like running
npm run start
The webpack dev server doesn't write any assets to disk. It serves them all from memory.