I just started using Ember and I have some trouble with the Ember Quickstart tutorial. Currently, I get Parsing error: Unexpected character '#' in line 5 of people-list.js:
import Component from '#glimmer/component';
import { action } from '#ember/object';
export default class PeopleListComponent extends Component {
#action
showPerson(person) {
alert(`The person's name is ${person}!`);
}
}
What's wrong here? The code is copied from the tutorial.
This is the output of ember -v:
ember-cli: 3.18.0
node: 11.13.0
os: darwin x64
This is my package.json. I can run npm install, but yarn install gives me The engine "node" is incompatible with this module. Expected version "10.* || >= 12". Got "11.13.0".
{
"name": "ember-quickstart",
"version": "0.0.0",
"private": true,
"description": "Small description for ember-quickstart goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"#ember/jquery": "^0.5.2",
"#ember/optional-features": "^0.6.3",
"broccoli-asset-rev": "^2.7.0",
"ember-ajax": "^5.0.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.1.2",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^4.2.3",
"ember-cli-htmlbars": "^3.0.0",
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-data": "~3.9.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.1.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^3.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.9.0",
"ember-welcome-page": "^3.2.0",
"eslint-plugin-ember": "^5.2.0",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.0"
},
"engines": {
"node": "10.* || >= 12"
},
"dependencies": {
"ember-cli": "^3.18.0",
"#glimmer/component": "^1.0.0"
}
}
Adding some text here as SO won't let me post the question otherwise.
You're ember-source is set to ~3.9.0. I'm pretty sure #action is an Octane feature that was added in 3.14.
Either update ember-source to 3.14 or newer or switch to the 3.9.0 documentation. I'd recommend updating as Octane is awesome.
The output says you currently have ember-cli 3.18, but your app seems to have been generated by an older ember-cli 3.9 as indicated by devDependencies.
As mentioned in the comments, 3.9 does not have access to some of the current features unless you install some polyfills.
If regenerating the app is a possibility, I would suggest doing it.
Run ember --version to make sure 3.18 is being called
Run ember new my-app-name and check that package.json has 3.18 for ember-source.
Go through the quickstart!
Alternatively, you can run npx ember-cli new my-app-name and it should generate an app using the latest ember-cli version available in npm.
If you don't want to lose some work you might have done, you can check out ember-cli-update by running something like npx ember-cli-update. Check the README for more info.
Related
I have spent three hours trying to debug this Gatsby build error.
It says to use a non-minified command, but gatsby develop doesn't throw any error so I'm a bit unsure on how to debug this.
Looking online reveals very little for the /styles/ folder.
My Netlify server also throws the same error as well as failing locally on Mac.
Any suggestions on where to start?
ERROR
Page data from page-data.json for the failed page "/styles/": {
"componentChunkName": "component---src-pages-styles-js",
"path": "/styles/",
"result": {
"pageContext": {}
},
"staticQueryHashes": []
}
failed Building static HTML for pages - 2.025s
ERROR #95313
Building static HTML failed for path "/styles/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
1 | /*!
> 2 | * Font Awesome Free 5.15.4 by #fontawesome - https://fontawesome.com
| ^
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | function _typeof(obj) {
WebpackError: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bname%2C%20styles%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
- index.es.js:2
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:2:1
- index.es.js:2
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:2:1
- index.es.js:4
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:4:1
- index.es.js:27
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:27:1
- index.es.js:26
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:26:37
- index.es.js:37
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:37:1
- static-entry.js:294
play-landing/.cache/static-entry.js:294:22
- index.es.js:147
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:147:1
Here is my package JSON
{
"name": "play-landing",
"description": "-",
"version": "1.1.3",
"author": "Luke Brown",
"dependencies": {
"#emotion/react": "^11.7.1",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/pro-light-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.17",
"#mui/material": "^5.3.1",
"bulma": "^0.9.0",
"dotenv": "^14.3.2",
"gatsby": "^4.0.0",
"gatsby-plugin-emotion": "^7.6.0",
"gatsby-plugin-image": "^2.0.0",
"gatsby-plugin-netlify": "^3.14.0",
"gatsby-plugin-netlify-cms": "^6.0.0",
"gatsby-plugin-purgecss": "^6.0.0",
"gatsby-plugin-react-helmet": "^5.0.0",
"gatsby-plugin-react-svg": "^3.1.0",
"gatsby-plugin-sass": "^5.0.0",
"gatsby-plugin-sharp": "^4.0.0",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-remark-copy-linked-files": "^5.0.0",
"gatsby-remark-images": "^6.0.0",
"gatsby-remark-relative-images": "^0.3.0",
"gatsby-source-filesystem": "^4.0.0",
"gatsby-transformer-remark": "^5.0.0",
"gatsby-transformer-sharp": "^4.0.0",
"lodash": "^4.17.15",
"lodash-webpack-plugin": "^0.11.4",
"lottie-react": "^2.2.1",
"netlify-cms-app": "^2.15.65",
"netlify-cms-media-library-cloudinary": "^1.3.10",
"netlify-cms-media-library-uploadcare": "^0.5.10",
"prop-types": "^15.6.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-helmet": "^6.0.0",
"sass": "^1.43.2",
"uuid": "^8.0.0"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"scripts": {
"clean": "gatsby clean",
"start": "npm run develop",
"build": "npm run clean && gatsby build",
"develop": "npm run clean && gatsby develop",
"serve": "gatsby serve",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"prettier": "^2.0.5"
},
"engines": {
"node": ">= 14.15.0"
}
}
After having access to the repo (which runs on Gatsby) I found that /styles/ folder when searched was inside the /public/ folder which is generated by gatsby, this pointed me to the same error that referenced the chunk error "componentChunkName": "component---src-pages-styles-js", I then searched for this file which existed in the .cache, this file showed me the error was coming from #emotion trying to compile the src/pages/styles.js file that is used by index-old.js.
It seemed that Gatsby was interpreting /src/pages/styles.js as a normal static page to build, but because it is returning a function that returned emotion JSX it couldn't build properly as Gatsby expects all .js files to return React JSX code.
It turned out in this project, these files wasn't actually used anymore so simply deleting them fixed the issue. If it was used though, simply having styles.js somewhere other than the /src/pages folder would fix this. I'd recommend having a views folder where you store all pages and styling relative to it to avoid Gatsby trying to compile pages from styling.
I have created an electron project which is working fine but when I try to package an electron app using electron packager and then run it. I am facing an exception
Uncaught Exception:
Error: Cannot find module
Require stack
'E:\app-folder..release-builds\app-win32-ia32\resources\app....\node_sqlite3.node'
click here to see Error
'Here is my package.json'
{
"name": "app",
"version": "1.0.0",
"main": "main.js",
"devDependencies": {
"electron": "^8.2.0",
"electron-builder": "^22.8.0",
"electron-rebuild": "^1.10.1"
},
"scripts": {
"start": "electron .",
"rebuild": "electron-rebuild -f -w sqlite3",
"package-win": "electron-packager . App--overwrite --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"App\"",
"postinstall": "electron-builder install-app-deps"
},
"dependencies": {
"axios": "^0.19.2",
"concat-stream": "^2.0.0",
"datatables.net": "^1.10.20",
"datatables.net-dt": "^1.10.20",
"ejs": "^3.1.5",
"electron-packager": "^15.0.0",
"express-validator": "^6.6.1",
"form-data": "^3.0.0",
"jquery": "^3.5.0",
"nodemailer": "^6.4.11",
"sqlite3": "^5.0.0"
}
}
npm install --save-dev #electron-forge/cli
npm run package
try running these commands you will get an out folder and the application is present in that out folder
I installed grunt-babel in order to allow IE 11 users on our site. Right now the site is broken for those users. I've been mostly successful except I've gotten the following error that I don't know how to address.
ReferenceError: regeneratorRuntime is not defined
It looks like polyfills are deprecated so I'm wondering what is the best solution.
EDIT
Following justDan and David's advice, I installed regenerator/runtime package and am now getting an error require is not defined
This code will be run through the browser. My company is using a custom CMS which requires us to compress the theme file and there are large sections requiring dynamically populated text which is part of the reason for using ES6 template literals.
package.json file
{
"name": "Some Site",
"version": "1.0.0",
"description": "",
"main": "Gruntfile.js",
"dependencies": {
"regenerator-runtime": "^0.13.3"
},
"devDependencies": {
"#babel/core": "^7.7.2",
"#babel/preset-env": "^7.7.1",
"#babel/preset-es2015": "^7.0.0-beta.53",
"babel-preset-es2015-nostrict": "^6.6.2",
"grunt": "^1.0.4",
"grunt-autoprefixer": "^3.0.4",
"grunt-babel": "^8.0.0",
"grunt-contrib-compress": "^1.5.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-cssmin": "^3.0.0",
"grunt-contrib-imagemin": "^3.1.0",
"grunt-contrib-less": "^2.0.0",
"grunt-contrib-uglify": "^4.0.1",
"grunt-contrib-watch": "^1.1.0",
"grunt-purifycss": "^0.1.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
.babelrc file
{
"presets": ["#babel/preset-env"]
}
You need to install and run this package
https://www.npmjs.com/package/regenerator-runtime
I started a new react project using create-react-app boilerplate (https://github.com/facebook/create-react-app), and I'm getting the following error when trying to start the app, the reason is that I have created a folder called 'containers' where all the containers go, and I want to create an index file to export all of them from that directory, this way I can just reference the directory in order to import de components.
Like this:
import UserContainer from './containers/UserContainer'; //This work(but ugly)
import { UserContainer } from './containers'; // This does not work
Basically this is the content of my index.js file inside the containers folder:
export UserContainer from './UserContainer';
And I'm getting the error Syntax error: Unexpected token, expected { (1:7),
this is the content of my package.json:
{
"name": "user-management1",
"version": "0.1.0",
"private": true,
"dependencies": {
"install": "^0.11.0",
"npm": "^6.0.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^4.2.1",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.4",
"react-scripts": "1.1.4",
"redux": "^3.5.2"
},
"scripts": {
"lint": "eslint src",
"lint:fix": "npm run lint -- --fix",
"lint:css": "stylelint \"src/**/*.{css,less,scss,sss}\"",
"start": "npm run lint:fix && react-scripts start & npm run apiserver",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"apiserver": "json-server --watch --port 4000 api/db.json"
},
"devDependencies": {
"bulma": "^0.7.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-css-modules": "^2.7.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"json-server": "^0.12.2"
}
}
I start the app using 'react-scripts'. The problem seems related to babel?, do I need to start the app using babel-node?, or add any presets anywhere? I thought using this boilerplate babel was already configured to start coding in ES6.
Please help
You are basically re-exporting a module (that is adding another module’s exports to those of the current module). In order to make the named export UserContainer of module ./UserContainer the default export of current module you should write:
export { default as UserContainer } from './UserContainer'
Check this link for a complete reference
UPDATE It seems the problem is I can't update/edit my post. Every time I create a new post, then it enter dead loop. Please help me T-T
Recently I started a program using keystoneJS as my CMS.
Everything goes fine but this Post problem.
I have found if I install keystone-demo via yo keystone(using the KeystoneJS generator made with Yeoman) then publishing post can work, but if I install keystone manually, the problem comes...
In Google Inspect Console, there is a error-
"TypeError: undefined is not an object (evaluating 'refList.expandColumns')"
I guess it is the keystone version problem.
This is my package.json file
{
"name": "keystone-demo",
"version": "1.0.1",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/JedWatson/keystone-demo.git"
},
"dependencies": {
"keystone": "https://github.com/keystonejs/keystone.git",
"async": "^1.5.0",
"lodash": "^3.10.1",
"csv": "^0.4.6",
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-shell": "^0.5.2",
"gulp-watch": "^4.3.5",
"pug": "^2.0.0-alpha6"
},
"scripts": {
"start": "node keystone.js"
}
}
And this is the package.json file in that can work normally version
{
"name": "keystone",
"version": "0.0.0",
"private": true,
"dependencies": {
"keystone": "^0.3.16",
"async": "^1.5.0",
"underscore": "^1.8.3",
"node-sass": "^3.3.2",
"node-sass-middleware": "^0.9.7",
"dotenv": "^1.1.0"
},
"devDependencies": {
"gulp": "^3.7.0",
"gulp-jshint": "^1.9.0",
"jshint-stylish": "^0.1.3",
"gulp-shell": "^0.5.0",
"gulp-watch": "^4.3.5",
"gulp-sass": "^2.0.4"
},
"engines": {
"node": ">=0.10.22",
"npm": ">=1.3.14"
},
"scripts": {
"start": "node keystone.js"
},
"main": "keystone.js"
}
You're loading the latest keystone version from github, which is not always stable. This is probably the reason for the error you're seeing.
I recommend using the latest version published to npm (0.3.22 at time of writing) instead.
Update the first line in your dependencies to this, and it will work:
"keystone": "^0.3.22",
To add keystone to a new project you can also type npm install --save keystone