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
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 got project from my client to update that project with some points. But I'm facing problem to run this project.
I install npm and all required node modules downloaded based on package.json information.
{
"name": "acelle-builder",
"version": "1.0.0",
"description": "",
"private": true,
"type" : "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#types/ace": "0.0.42",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.6.0",
"file-loader": "^4.1.0",
"html-loader": "^0.5.5",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.14.1",
"raw-loader": "^3.1.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-url-loader": "^3.0.0",
"to-string-loader": "^1.1.5",
"url-loader": "^2.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"ace-builds": "^1.4.12",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"js-beautify": "^1.13.0",
"popper.js": "^1.16.1"
}
}
there are some codes of importing html files like
import controls from './controls.html';
import widgets from './widgets.html';
but when I run this project using node command I'm getting error with unknown file .html extension.
How can I solve this?
Node.js can only import JS modules.
If you want to use syntax which involves importing other kinds of things then you need to use an appropriate tool. The dependencies in the package.json file include WebPack. Use that.
There is even a script (named build) listed that will run it.
npm run build
You can't import from an html file. You are trying to import from ./controls.html and ./widgets.html. You have to import from js files. Maybe you meant "./controls.html" and "./widgets.js".
I need to import some assets from public folder. I can do it easily in html; it wont give an error.
However, I can not do it with css url() method.
I need to do this since react encodes images that are smaller than 10Kb to base 64 and uses that encoded text instead of image path.
As I've read in some articles, this does not benefit performance since css is a render blocking resource and adding to its text, makes parsing it longer.
Here's my folder structure:
My .scss file is inside src/components and this is how i've tried importing the image:
background-image: url("/media_assets/img/footer-xsm.png");
And my package.json:
{
"name": "roomeet",
"version": "0.1.0",
"private": true,
"dependencies": {
"#glidejs/glide": "^3.4.1",
"#loadable/component": "^5.14.1",
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.2",
"#testing-library/user-event": "^12.2.2",
"bootstrap": "^4.5.3",
"js-cookie": "^2.2.1",
"node-sass": "^4.14.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-lazyload": "^3.1.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"source-map-explorer": "^2.5.2",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"bundle-report": "webpack-bundle-analyzer --port 4200 dist/stats.json"
},
}
Edit:
This is the error that it's giving:
Error: Can't resolve '../media_assets/img/footer-xsm.png' in 'C:\VSCode Projects\rmt_cln\src\components'
i'm currently unable to comment so i'll have to write it as an answer, can you pleas try
background-image: url("./media_assets/img/footer-xsm.png");
if it didn't work just flag it as unuseful and go check this you'll find a solution there
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.
I get a "500 Server Error" when I deploy my Nuxt application.
Below are my configuration files:
package.json
{
"name": "my-app-name",
"version": "1.0.0",
"description": "An App",
"author": "Me",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "NODE_ENV=production nuxt",
"deploy": "npm run build && gcloud app deploy",
"generate": "nuxt generate",
"postinstall": "nuxt build"
},
"dependencies": {
"#nuxtjs/axios": "^5.0.0",
"#firebase/firestore": "^0.6.0",
"#firebase/storage": "^0.2.3",
"firebase": "^5.3.0",
"nuxt": "^1.0.0",
"nuxt-buefy": "^0.0.4"
},
"devDependencies": {
"cross-env": "^5.0.1",
"node-sass": "^4.9.2",
"nuxt-sass-resources-loader": "^2.0.3",
"sass-loader": "^7.0.3"
}
}
Previously my start was nuxt start and i do not have deploy
https://github.com/kamatte-me/nuxt-gae-se/blob/master/package.json
But still get the same error.
app.yaml
runtime: nodejs8
env : standard
I also referred and attempted to try out the suggestions here and here but doesn't work. Note that my application does not have a server.js or app.js, so i cannot use those.
Update
I did a workaround using the below approach (so can ignore everything above unless you need it as additional reference).
I added a server.js (exactly same as theirs) following https://github.com/kamatte-me/nuxt-gae-se and updated my package.json to such:
{
"name": "my-app-name",
"version": "1.0.0",
"description": "A App",
"author": "Me",
"private": true,
"scripts": {
"dev": "node server.js",
"build": "nuxt build",
"start": "NODE_ENV=production node server.js",
"deploy": "npm run build && gcloud app deploy",
"generate": "nuxt generate",
"postinstall": "nuxt build"
},
"dependencies": {
"#nuxtjs/axios": "^5.0.0",
"#firebase/firestore": "^0.6.0",
"#firebase/storage": "^0.2.3",
"express": "^4.16.3", //<-added this as suggested by kamette
"firebase": "^5.3.0",
"nuxt": "^1.0.0",
"nuxt-buefy": "^0.0.4"
},
"devDependencies": {
"cross-env": "^5.0.1",
"node-sass": "^4.9.2",
"nuxt-sass-resources-loader": "^2.0.3",
"sass-loader": "^7.0.3"
}
}
Now my error is this:
Any idea?
I have this in my Navigation.vue:
<nuxt-link to="/" exact>Dashboard</nuxt-link>
In addition, the error logs I saw:
After adding "nuxt-sass-resources-loader": "^2.0.3" to the dependencies as advised by kamatte, I am seeing back the "500 Server Error" again, logs doesn't show anything useful (I have clicked "Load newer logs" many times already, this is the latest...)
Express.js and nuxt-sass-resources-loader must be included in package.json.
.e.g.)
package.json
"dependencies": {
"express": "^4.16.3",
"nuxt-sass-resources-loader": "^2.0.3"
},
Otherwise, Express.js will not be installed on the GAE.
It seems that it worked because you already installed Express.js in your local environment.