Related
hi i will try to learn gulp but at start i have an error in my simple hello world. can anybody help me?
my gulp version is:
CLI version 3.9.0
Local version 4.0.2
my .babelrc file :
{
"presets": [ "#babel/preset-env" ]
}
my gulpfile.babel.js file :
export const hello = (done) => {
console.log('hello');
done();
}
my package.json file :
"name": "meatheme",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"start": "gulp",
"build": "gulp build --prod",
"bundle": "gulp bundle --prod"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/register": "^7.12.1",
"babel-loader": "^8.1.0",
"browser-sync": "^2.26.13",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-if": "^3.0.0",
"gulp-imagemin": "^7.1.0",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"gulp-wp-pot": "^2.5.0",
"gulp-zip": "^5.0.2",
"sass": "^1.43.4",
"vinyl-named": "^1.1.0",
"webpack-stream": "^5.2.1",
"yargs": "^15.4.1"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.1",
"jquery": "^3.5.1",
"normalize.css": "^8.0.1",
"slick-carousel": "^1.8.1"
}
}
and when i run gulp hello is see this in terminal.
[16:47:07] Failed to load external module babel-core/register
[16:47:07] Failed to load external module babel/register
/home/mehdi/Work/Meacodes/Mea template/mea0.1/gulpfile.babel.js:16
import gulp from 'gulp';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
at Liftoff.execute (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:203:12)
at module. Exports (/usr/local/lib/node_modules/gulp/node_modules/flagged-respawn/index.js:51:3)
do you know where is my issue?
I was advised to write "type": "module" to file package.json to the very end of the file
since node otherwise does not consider js files as ES modules, outside of which you still cannot use the import statement)
(in the browser we do modules through the type attribute of the script tag)
Background:
I am trying to test an npm package that I am developing: a React Component that manages a SVG filter animation. In verifying that it works as expected, I have used npm pack to generate a tarball, which I have then installed as a dependency in another project (one I expect to consume said package when properly published).
To make this easier, I will refer to the npm package I am developing as package A and refer to the project that consumes it as project B. Please take note of the technologies mentioned below as their giving context will likely provide insight.
Relevant Technologies
packageA
node: 14.18.1
esbuild: ^0.11.11
typescript: ^4.2.3
projectB
node: 14.18.1
remix: 1.4.1
typescript: ^4.2.3
Observations + Problems:
Observations:
npm pack, when run in package A, spits out a tarball that includes everything BUT the output build directory of package A.
package A has a package.json with a type field set as "module", thereby declaratively supporting ES Module System syntax.
npm install of this tarball in project B is successful.
If I change my import of package A to its absolute path (node_modules/projectA/build/main.js) in project B's node_modules I avoid the problem defined in Problems #1.
Problems:
Any attempt to consume package A in project B is met with the following error:
// THIS IMPORT
// projectB > index.js
import PackageAComponent from 'packageA'
// RESULTS IN:
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/jackwilliammorris/Code/better-brain-blogging/node_modules/fuzzy-scrawl/build/esbuild/browser.js
require() of ES modules is not supported.
require() of /Users/jackwilliammorris/Code/better-brain-blogging/node_modules/fuzzy-scrawl/build/esbuild/browser.js from /Users/jackwilliammorris/Code/better-brain-blogging/server/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename browser.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/jackwilliammorris/Code/better-brain-blogging/node_modules/fuzzy-scrawl/package.json.
at new NodeError (internal/errors.js:322:7)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at Object.<anonymous> (/Users/jackwilliammorris/Code/better-brain-blogging/app/routes/braindumps/index.tsx:8:25)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
Relevant Code Snippets
// projectB package.json
{
"name": "projectB",
"private": true,
"description": "",
"license": "",
"sideEffects": false,
"scripts": {
... ,
"dev": "run-p dev:*",
"dev:arc": "node ./dev sandbox",
"dev:css": "npm run generate:css -- --watch",
"dev:remix": "remix watch",
...
},
"prettier": {},
"dependencies": {
"#architect/architect": "^10.2.1",
"#architect/functions": "^5.0.4",
"#happy-dom/jest-environment": "^3.1.0",
"#notionhq/client": "^1.0.4",
"#remix-run/architect": "^1.4.1",
"#remix-run/node": "^1.4.1",
"#remix-run/react": "^1.4.1",
"#remix-run/server-runtime": "^1.4.1",
"bcryptjs": "2.4.3",
"classnames": "^2.3.1",
"cuid": "^2.1.8",
"fuzzy-scrawl": "file:../fuzzy-scrawl/fuzzy-scrawl-0.0.0.tgz",
"highlight.js": "^11.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tiny-invariant": "^1.2.0"
},
"devDependencies": {
"#faker-js/faker": "^6.1.1",
"#remix-run/dev": "^1.4.1",
"#remix-run/eslint-config": "^1.4.1",
"#testing-library/cypress": "^8.0.2",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^14.0.4",
"#types/architect__functions": "^3.13.6",
"#types/bcryptjs": "2.4.2",
"#types/eslint": "^8.4.1",
"#types/jest": "^27.4.1",
"#types/react": "^17.0.43",
"#types/react-dom": "^17.0.14",
"#vitejs/plugin-react": "^1.3.0",
"c8": "^7.11.0",
"cross-env": "^7.0.3",
"cypress": "^9.5.3",
"esbuild": "^0.14.29",
"eslint": "^8.12.0",
"eslint-config-prettier": "^8.5.0",
"happy-dom": "^2.55.0",
"jest": "^27.5.1",
"mock-aws-s3": "^4.0.2",
"msw": "^0.39.2",
"npm-run-all": "^4.1.5",
"prettier": "^2.6.1",
"prettier-plugin-tailwindcss": "^0.1.8",
"start-server-and-test": "^1.14.0",
"tailwindcss": "^3.0.23",
"ts-jest": "^27.1.4",
"ts-node": "^10.7.0",
"typescript": "^4.6.3",
"vitest": "^0.8.2"
},
"engines": {
"node": "14"
}
}
// packageA package.json
{
"name": "fuzzy-scrawl",
"version": "0.0.0",
"author": "slackermorris",
"repository": "",
"license": "MIT",
"keywords": [
"css",
"typescript",
"scss"
],
"main": "./build/main.js",
"module": "./build/main.js",
"type": "module",
"types": "./build/tsc/main.d.ts",
"scripts": {
"esbuild-browser:dev": "NODE_ENV=development node build esbuild-browser:dev",
},
"devDependencies": {
"#types/jest": "^26.0.21",
"#types/node": "^15.0.1",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^4.19.0",
"#typescript-eslint/parser": "^4.19.0",
"esbuild": "^0.11.11",
"esbuild-css-modules-plugin": "^2.3.2",
"esbuild-plugin-css-modules": "^0.1.3",
"esbuild-sass-plugin": "^2.2.6",
"esbuild-style-plugin": "^1.6.0",
"eslint": "^7.22.0",
"jest": "^26.6.3",
"live-server": "^1.2.2",
"sass": "^1.53.0",
"ts-jest": "^26.5.4",
"ts-node": "^9.1.1",
"typedoc": "^0.20.35",
"typescript": "^4.2.3"
},
"dependencies": {
"gsap": "^3.10.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
I am learning MERN application development. I got a incomplete MERN application and trying to run the application. My package.json file is like below.
package.json
{
"name": "machine-shop",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"build": "node ace build --production",
"start": "node server.js",
"dev": "node ace serve --watch",
"lint": "eslint . --ext=.ts",
"format": "prettier --write ."
},
"devDependencies": {
"#adonisjs/assembler": "^5.0.0",
"#babel/core": "^7.14.3",
"#babel/preset-react": "^7.13.13",
"#symfony/webpack-encore": "^1.4.0",
"#types/node": "^16.3.3",
"adonis-preset-ts": "^2.1.0",
"autoprefixer": "^10.2.6",
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-adonis": "^1.3.1",
"eslint-plugin-prettier": "^3.4.0",
"node-pre-gyp": "^0.17.0",
"pino-pretty": "^5.0.1",
"postcss": "^8.3.0",
"postcss-loader": "^5.3.0",
"prettier": "^2.3.0",
"sass": "^1.34.0",
"sass-loader": "^11.1.1",
"tailwindcss": "^2.1.2",
"typescript": "~4.2",
"youch": "^2.2.2",
"youch-terminal": "^1.1.1"
},
"dependencies": {
"-": "^0.0.1",
"#adonisjs/auth": "^8.0.4",
"#adonisjs/core": "^5.1.0",
"#adonisjs/lucid": "^14.1.0",
"#adonisjs/repl": "^3.0.0",
"#adonisjs/session": "^6.0.0",
"#adonisjs/shield": "^7.0.0",
"#adonisjs/view": "^6.0.0",
"#ckeditor/ckeditor5-build-decoupled-document": "^28.0.0",
"#ckeditor/ckeditor5-react": "^3.0.2",
"#date-io/date-fns": "2.6.1",
"#formatjs/intl-pluralrules": "1.3.5",
"#fortawesome/fontawesome-free": "5.13.0",
"#manaflair/redux-batch": "1.0.0",
"#material-ui/core": "4.9.14",
"#material-ui/icons": "4.9.1",
"#material-ui/lab": "4.0.0-alpha.53",
"#material-ui/pickers": "3.2.10",
"#material-ui/styles": "4.9.14",
"#reduxjs/toolkit": "^1.6.1",
"#tanem/svg-injector": "8.0.50",
"apexcharts": "^3.27.2",
"axios": "^0.21.1",
"axios-mock-adapter": "1.18.1",
"bootstrap": "4.6.0",
"camelcase": "^5.2.0",
"clipboard-copy": "3.1.0",
"clsx": "1.1.0",
"cp-cli": "2.0.0",
"css-mediaquery": "^0.1.2",
"date-fns": "2.8.1",
"dotenv": "^10.0.0",
"dotenv-expand": "5.1.0",
"downshift": "3.4.2",
"fg-loadcss": "^3.1.0",
"force": "^0.0.3",
"formik": "2.1.4",
"holderjs": "^2.9.9",
"json2mq": "^0.2.0",
"luxon": "^1.27.0",
"material-ui-popup-state": "^1.8.3",
"mysql": "^2.18.1",
"object-path": "^0.11.5",
"phc-argon2": "^1.1.1",
"phc-bcrypt": "^1.0.7",
"prop-types": "^15.7.2",
"proxy-addr": "^2.0.7",
"react": "^17.0.2",
"react-app-polyfill": "^1.0.4",
"react-bootstrap": "1.0.1",
"react-bootstrap-table-next": "4.0.2",
"react-bootstrap-table2-paginator": "2.1.2",
"react-datepicker": "2.16.0",
"react-dev-utils": "^9.1.0",
"react-dom": "^17.0.2",
"react-draggable": "4.4.2",
"react-dropzone": "^11.3.4",
"react-inlinesvg": "1.2.0",
"react-intl": "3.6.2",
"react-is": "16.13.1",
"react-perfect-scrollbar": "1.5.8",
"react-portal": "4.2.0",
"react-redux": "7.1.3",
"react-router-dom": "^5.2.0",
"react-select": "3.1.0",
"react-slick": "^0.28.1",
"react-swipeable-views": "0.13.9",
"react-syntax-highlighter": "12.2.1",
"react-tinder-card": "^1.4.0",
"react-window": "1.8.5",
"redux": "4.0.5",
"redux-persist": "6.0.0",
"redux-saga": "1.1.3",
"reflect-metadata": "^0.1.13",
"socicon": "3.0.5",
"source-map-support": "^0.5.19",
"sweetalert2": "^11.0.11",
"yup": "^0.32.9"
}
}
My server.js file is like below
server.js
import 'reflect-metadata';
import sourceMapSupport from 'source-map-support';
import { Ignitor } from '#adonisjs/core/build/standalone';
sourceMapSupport.install({ handleUncaughtExceptions: false })
new Ignitor(__dirname).httpServer().start()
I am trying to run the application using npm start command. But I am getting below error.
file:///home/foysal/Music/machineshop/server.js:20
new Ignitor(__dirname).httpServer().start()
^
ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/foysal/Music/machineshop/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///home/foysal/Music/machineshop/server.js:20:13
What is the meaning of this code new Ignitor(__dirname).httpServer().start() ? Is it correct code ?
Previously I worked in another MERN application. server.js file of that project is not similar like server.js file of this project.
Am I doing anything wrong ?
Could any one help me to run the application ?
You have mixed up client and server. Usually you keep them separated when you work on stacks like that - in separate repositories or at least in separate directories. You have 2 ways as I see:
Separate client and server dependencies
Use Adonis to serve the React app
I would take the first path for better maintainability. If that seems too complicated, you can take the later one for now and keep working on separation down the road. For that you may wanna look into this document.
I found this error message when running react-script test
The react-scripts package provided by Create React App requires a dependency "babel-jest": "^24.9.0"`
So the error message also recommend us to remove package-lock.json and also node_modules I tried but I have the same error message.
And I inspect the package-lock.json and for example jest-config (is a sub dependancies) use higher version than react-script accept.
Please if you have some advices
packages.json
{
"name": "creator-web-app",
"version": "0.1.0",
"private": true,
"main": "public/electron.js",
"homepage": "./",
"dependencies": {
"#craco/craco": "^5.6.4",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/react": "^16.9.34",
"await-to-js": "^2.1.1",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"electron-is-dev": "^1.2.0",
"env-cmd": "^10.1.0",
"enzyme": "^3.11.0",
"history": "^4.10.1",
"i18next": "^19.4.2",
"i18next-browser-languagedetector": "^4.0.2",
"jest": "^25.3.0",
"jwt-decode": "^2.2.0",
"moment": "^2.24.0",
"nano-id": "^1.1.0",
"npm-watch": "^0.6.0",
"react": "^16.13.1",
"react-cookies": "^0.1.1",
"react-dom": "^16.13.1",
"react-i18next": "^11.3.4",
"react-inlinesvg": "^1.2.0",
"react-redux": "^7.2.0",
"react-router-dom": "5.1.2",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-form": "^8.3.3",
"redux-thunk": "^2.3.0",
"typescript": "^3.7.0"
},
"scripts": {
"electron": "NODE_ENV=production npm run build && NODE_ENV=production electron .",
"start": "NODE_ENV=development react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"pack": "NODE_ENV=production && npm run build && electron-builder --dir",
"dist": "NODE_ENV=production && npm run build electron-builder"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/classnames": "^2.2.10",
"#types/enzyme": "^3.10.5",
"#types/jest": "^25.2.1",
"#types/react-redux": "^7.1.7",
"#types/react-router-dom": "^5.1.4",
"#types/redux-form": "^8.2.3",
"craco-alias": "^2.1.1",
"electron": "^8.2.1",
"electron-builder": "^22.4.1",
"enzyme-adapter-react-16": "^1.15.2",
"node-sass": "^4.13.1",
"react-test-renderer": "^15.6.2",
"ts-jest": "^25.4.0",
"whatwg-fetch": "^3.0.0"
},
"build": {
"appId": "studioapp.id",
"mac": {
"category": "your.app.category.type"
},
"files": [
"**/*"
],
"directories": {
"buildResources": "."
},
"protocols": {
"name": "studioapp-protocol",
"schemes": [
"studioapp"
]
}
},
"jest": {
"collectCoverageFrom": [
"<rootDir>/src/**/*.{ts,tsx}"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|yml)$": "<rootDir>/tests/test-file-mock.js",
"\\.(css|less|scss|sss|styl)$": "<rootDir>/tests/test-mock.js",
"#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.(tsx|ts)?$": "ts-jest"
}
}
}
Thanks
I faced the same problem with create-react-app. Here is what I did
Go to the path
C:\Users\YOURNAME\node_modules
and then remove those packages which show an error.
More information here: https://github.com/creativetimofficial/argon-dashboard-react/issues/28
Ironically I was working on a similarish problem this morning. Could you provide a screenshot of your package.json and the error message?
Babel-Jest is used to compile javascript code into a format that jest can consume. I suspect that your problem is that you have a dependency that the lock file has subsequently locked in the incorrect version of babel-jest.
I can add some more details from the above response for solve this issue I found the problem.
When we use react-scripts we can't have jest packages or something is already manage by create-react-app
The problem when I have is package.json contain jest at superior version than react-script can accept
When I deleted this line in my package.json already seems to work
One of your dependencies is using a newer version of babel-jest. You can find which ones they are by running npm ls babel-jest in your project root directory.
A simple way to fix the problem then, is to try and link to an older version of those packages, e.g. "#types/jest": "^24.0.0" so that they don't use the newer version of babel-jest.
for mac user remove
/Users/{UserName}/node_modules
I found tutorials like this: https://medium.com/heresy-dev/getting-started-with-postcss-a-quick-guide-for-sass-users-90c8b675d5f4
(I must really wonder how less i find on the internet about the use of a postcss.json config file.)
and this one: https://www.sitepoint.com/an-introduction-to-postcss/
But all those tutorials didnt worked for me. I use the latest version of postcss and postcss-cli. When i start this script:
"postcss": "postcss --config postcss.json"
then i just get a error:
Input Error: Did not receive any STDIN
When i google for this, i also dont find any solution that helps me.
My package.json:
{
"scripts": {
"postcss": "postcss --config postcss.json"
},
"devDependencies": {
"autoprefixer": "^7.1.6",
"bootstrap-sass": "^3.3.7",
"cssnano": "^3.10.0",
"node-sass": "^4.5.0",
"postcss": "^6.0.13",
"postcss-cli": "^4.1.1",
"postcss-colormin": "^2.2.2",
}
}
My postcss.json:
{
"use": [
"autoprefixer"
],
"input": "public_html/css/",
"output": "public_html/css/min/*.css",
"local-plugins": true,
"watch": false
}