Here are the files for my app which uses babel to compile the ES6 in main.js to ES5 in main.bundle.js
Here is my babel.rc file (hidden):
{
"presets": ["#babel/preset-env"]
}
Here is my package.json file with all my node modules (devDependencies):
{
"name": "es6-tutorial",
"version": "1.0.0",
"description": "ES6 tutorial",
"main": "index.js",
"scripts": {
"babel": "babel js/main.js -o build/main.bundle.js",
"start": "http-server",
"watch": "babel js/main.js -o build/main.bundle.js --watch"
},
"author": "me",
"license": "ISC",
"devDependencies": {
"#babel/preset-env": "^7.2.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"http-server": "^0.11.1"
}
}
Right now to start the compile from ES6 to ES5 I navigate (cd) to the root of this directory and I set up a watch to compile automatically (npm run watch)
This works fine except now I also have functions in myFunctions.js that I want to export and import into main.js
When I add this export/import I notice that the compiled file, main.bundle.js, adds this:
`var _myFunctions = require('myFunctions.js');`
Then when I go to run the app I get an error in the console:
`Uncaught ReferenceError: require is not defined
at main.bundle.js:9`
After researching this, I think I need to add some sort of plugin for Babel : https://babeljs.io/docs/en/plugins#modules to handle the export/import (is that right?) but I'm not sure which one I should use and I tried a few but I cannot get any to work after the npm install.
Also, I understand that I do NOT need to add the require.js library right?
Related
This question already has answers here:
'node' is not recognized as an internal or an external command, operable program or batch file while using phonegap/cordova
(19 answers)
Closed last year.
I am learning Node, and I get the error "node is not recognized as an internal or external command" when I try to run my project with npm start or npm run start. It works if I use node index.js. I have checked the Node Environment Variables, my Node version is v16.13.2 and npm is 8.4.1.
My package.json:
{
"name": "node-express-practica",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.17.0",
"#babel/core": "^7.17.2",
"#babel/preset-env": "^7.16.11",
"#babel/register": "^7.17.0",
"nodemon": "^2.0.15"
}
}
Running command as administrator should work for you.
I have a project that already was deployed on Vercel. Since last week Im working on improve the layout with the goal of finish a MVP of this project. So, I changed my usage of auth0, using the package to nextjs #auth0/nextjs-auth0. I ran
npm install #auth0/nextjs-auth0
and I have on my package.json
{
"name": "MAmanager",
"version": "1.0.0",
"engines": {
"node": "14.x",
"npm": "6.x"
},
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"start": "next start",
"build": "next build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#auth0/nextjs-auth0": "github:auth0/nextjs-auth0",
"dayjs": "^1.9.5",
"formik": "^2.1.5",
"next": "^10.2.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^4.2.0",
"swr": "^0.5.6",
"yup": "^0.29.3"
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.2"
}
}
The usages on my pages are
import { UserProvider } from '#auth0/nextjs-auth0'
import { useUser } from '#auth0/nextjs-auth0'
import { withPageAuthRequired } from '#auth0/nextjs-auth0'
And when I deploy my branch on Vercel I get this error
08:57:49.989 Failed to compile.
08:57:49.990 ModuleNotFoundError: Module not found: Error: Can't resolve '#auth0/nextjs-auth0' in '/vercel/path0/pages'
08:57:49.990 > Build error occurred
08:57:49.991 Error: > Build failed because of webpack errors
08:57:49.991 at /vercel/path0/node_modules/next/dist/build/index.js:17:924
08:57:49.991 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
08:57:50.020 error Command failed with exit code 1.
I have seen errors like that caused by casing discrepancies but I don't understanding what is happening here. I appreciate any help.
After see other examples I just edited manually the package.json.
After run npm install #auth0/nextjs-auth0 the package was automatically added "#auth0/nextjs-auth0": "github:auth0/nextjs-auth0",.
I just edit to
"#auth0/nextjs-auth0": "^1.3.1"
and worked on deployment.
Note: The way the package was installed worked on dev in localhost but broke only on the deployment.
try making a custom build script for your deployment as a temporary workaround:
npm install && npm i #auth0/nextjs-auth0#1.3.1 && npm run build
This can be added under the deployment settings tab using a custom build command for production. Running the specific targeted package version install after npm i should override the problematic version being installed in prod
When I try running npm run build for a new webpack build I get
You have installed webpack-cli and webpack-command together. To work with the "webpack" command you need only one CLI package, please remove one of them or use them directly via their binary.
I think I installed them globally. I tried, deleting them, webpack, deleating node clearing cache but I keep getting the same result.
Using webpack 4
{
"name": "ls",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
}
}
I think the message was quite clear so just run npm uninstall "webpack-command" to remove webpack-command (b/c "webpack-cli" has newer version)
Currently exploring webpack different tools associated with it. Now I am using Babel for transpiling ES6 code into ES5 code. I came accross the need for a .babelrc file which holds the configurations for Babel. However, on the website of Babel I also saw that you could also place these configurations into the package.json file. Like this:
Package.json File:
{
"name": "webpack-tutorial",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0"
},
"babel": {
"presets": [
"env"
]
}
}
Now when I run npm run dev Babel also works and the code gets transpiled succesfully.
How does Babel know to access the package.json file? Does it first look for an .babelrc file and then if this is not present does it automatically look for its configurations in the package.json? How does Webpack interact with both Babel and the package.json file to produce this result?
For anyone who is interested it was on the official website:
Babel will look for a .babelrc in the current directory of the file
being transpiled. If one does not exist, it will travel up the
directory tree until it finds either a .babelrc, or a package.json
with a "babel": {} hash within.
I am using ember-cli to setup my new emberjs application. While I was able to successfully install jade, it does not appear to be rendering .jade templates added to the /app directory?
Thoughts? Current package.json:
{
"name": "frontend",
"version": "0.0.0",
"private": true,
"directories": {
"doc": "doc",
"test": "test"
},
"scripts": {
"start": "ember server",
"build": "ember build",
"test": "ember test"
},
"repository": "https://github.com/stefanpenner/ember-cli",
"engines": {
"node": ">= 0.10.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9",
"broccoli-sass": "^0.1.4",
"broccoli-csso": "^0.2.0",
"broccoli-jade": "^0.2.0"
}
}
There is a rather small template in the /app folder named error.jade with the following code:
doctype html
head
title
|Error!
body
p
strong
|Error!
When I run ember serve or ember build it never gets compiled. Everything else is the standard setup in ember cli. I ran npm install --save broccoli-jade to install it. Here is an example repo I setup for this issue embercli-emberjs-test. Ideally I would like to compile both handlebars and jade templates.
Thoughts? github issue
try running
bower install
in your app root. Some times the post-install routine does not execute automatically.