Im trying to make a Desktop App with Electron and React.
Im allerdings getting startet and the most components are working, but in my React component I need to make a new Funktion like:
add = () => {
//this.setState({active: !this.state.active})
}
But after adding this 3 (2) Lines i get the error:
app/app.js: Unexpected token (17:11) while parsing file: .../app/app.js
this is my package.json so far:
{
"name": "rac",
"productName": "rac-desktop",
"version": "1.0.0",
"description": "desktop",
"main": "main.js",
"scripts": {
"start": "electron main.js",
"watch": "watchify app/app.js -t babelify -o public/js/bundle.js -- debug --verbose"
},
"author": "timo",
"license": "MIT",
"dependencies": {
"axios": "^0.16.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babelify": "7.3.0",
"classnames": "2.2.5",
"electron-prebuilt": "^1.4.13",
"electron-reload": "^1.2.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"semantic-ui-react": "^0.75.1"
} }
The Repo
That is not valid syntax for a class function in Javascript.
A class has functions like so:
class Test {
constructor() {
// do stuff
}
// basic function
doSomething() {
this.test++;
}
}
So in your case you just need to make add use the correct syntax for a function in a class
add() {
this.setState({active: !this.state.active});
}
The syntax you have used is coming in the future as part of the Class Fields Proposal
Related
I am trying to run node.js project. I added "type":"module" in my package.json, it worked for import syntax. Next, I initialised my app with .babelrc. It seems to work but, I am expected to add .js extension at the end of my import statements. How can I avoid adding .js extension in import statements? Below is the error that I get when I run npm run dev:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/nabeel.77.dev/Desktop/chat/graphql/resolvers' imported from /Users/nabeel.77.dev/Desktop/chat/server.js
Did you mean to import ../graphql/resolvers.js?
at new NodeError (node:internal/errors:387:5)
at finalizeResolution (node:internal/modules/esm/resolve:404:11)
at moduleResolve (node:internal/modules/esm/resolve:965:10)
at defaultResolve (node:internal/modules/esm/resolve:1173:11)
at nextResolve (node:internal/modules/esm/loader:173:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:852:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Node.js v18.7.0
[nodemon] app crashed - waiting for file changes before starting...
my Package.json
{
"type": "module",
"dependencies": {
"apollo-server": "^3.10.0",
"esm": "^3.2.25",
"graphql": "^16.5.0",
"mysql2": "^2.3.3",
"sequelize": "^6.21.3"
},
"scripts": {
"dev": "nodemon server.js --exec babel-node",
"start": "node server.js"
},
"name": "chat",
"version": "1.0.0",
"main": "server.js",
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.2",
"#babel/node": "^7.0.0",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"nodemon": "^2.0.19",
"rimraf": "^3.0.2"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
Node version: 18.7.0
Hi I have been stewing over this for the last couple of days. I realise this is a common error with various solutions.
I have the dreaded:
Jest encountered an unexpected token
/__tests__/index.test.js:16
import React from "react";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
I have read a few posts and the docs in next and jest.
package.json:
{
"name": "some-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest --watch"
},
"dependencies": {
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.17.12",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#types/jest": "^28.1.3",
"#types/node-fetch": "^2.6.2",
"babel-jest": "^28.1.1",
"eslint": "8.16.0",
"eslint-config-next": "12.1.6",
"identity-obj-proxy": "^3.0.0",
"jest": "^28.1.1",
"jest-environment-jsdom": "^28.1.1",
"node-fetch": "^3.2.6",
"ts-jest": "^28.0.5",
"typescript": "^4.7.4"
},
"description": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).",
"main": "jest.config.js",
"repository": {
"type": "git",
},
"author": "",
"license": "ISC",
"bugs": {
},
}
index.test.js:
import { render, screen } from '#testing-library/react'
import Home from '../pages/index'
import '#testing-library/jest-dom'
import React from "react";
describe('Home', () => {
it('renders a h', () => {
render(<Home />)
const link = screen.getByRole('link', {
name: "Library",
})
expect(link).toHaveAttribute('href', '/storage-area')
})
});
jest.config.js:
module.exports = {
collectCoverage: true,
// on node 14.x coverage provider v8 offers good speed and more or less good report
coverageProvider: 'v8',
collectCoverageFrom: [
'**/*.{js,jsx,ts,tsx}',
'!**/*.d.ts',
'!**/node_modules/**',
'!<rootDir>/out/**',
'!<rootDir>/.next/**',
'!<rootDir>/*.config.js',
'!<rootDir>/coverage/**',
],
moduleNameMapper: {
// Handle CSS imports (with CSS modules)
// https://jestjs.io/docs/webpack#mocking-css-modules
'^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
// Handle CSS imports (without CSS modules)
'^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
// Handle image imports
// https://jestjs.io/docs/webpack#handling-static-assets
'^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
// Handle module aliases
'^#/components/(.*)$': '<rootDir>/components/$1',
},
// Add more setup options before each test is run
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
testEnvironment: 'jsdom',
transform: {
// Use babel-jest to transpile tests with the next/babel preset
// https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel', '#babel/preset-react',"#babel/preset-env" ]}],
},
transformIgnorePatterns: [
'/node_modules/',
'^.+\\.module\\.(css|sass|scss)$',
],
}
As I mentioned in the title the it seems that the error message suggests that the import is added by Next.js to the end of the index.test.js.
This was a problem due to the tests folder being nested in the directory above the root directory of the project. By the time I figured this out I had manipulated the jest.config.js transform: presets array property to contain imports that it didn't require in the standard jest/next setup.
I am working on exporting my custom vue component as NPM module. I have followed steps mentioned in the official doc Packaging Vue Components for npm.
My index.js AKA wrapper.js file:
// index.js -> wrapper.js
// Import vue component
import component from "./components/VueOpenapiForm.vue";
import ExtendSchema from "./functional-components/extend-schema.js";
// global components
import ObjectForm from "./components/ObjectForm.vue";
import ArrayInput from "./components/ArrayInput.vue";
import KeyValuePairs from "./components/KeyValuePairs.vue";
import SimpleInput from "./components/SimpleInput.vue";
// export ExtendSchema
export const extendSchema = ExtendSchema;
// Declare install function executed by Vue.use()
export function install(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component("VueOpenapiForm", component);
Vue.component("object-form", ObjectForm);
Vue.component("array-input", ArrayInput);
Vue.component("key-value-pairs", KeyValuePairs);
Vue.component("simple-input", SimpleInput);
}
// Create module definition for Vue.use()
const plugin = {
install
};
// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null;
if (typeof window !== "undefined") {
GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
// To allow use as module (npm/webpack/etc.) export component
export default component;
rollup.config.js file:
// rollup.config.js
import babel from "rollup-plugin-babel";
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs"; // Convert CommonJS modules to ES6
import vue from "rollup-plugin-vue"; // Handle .vue SFC files
import buble from "#rollup/plugin-buble"; // Transpile/polyfill with reasonable browser support
export default {
input: "src/index.js", // Path relative to package.json
output: {
name: "VueOpenapiForm",
exports: "named"
},
plugins: [
resolve(),
commonjs({
namedExports: {
// left-hand side can be an absolute path, a path
// relative to the current directory, or the name
// of a module in node_modules
"vue-codemirror": ["codemirror"]
}
}),
babel({
runtimeHelpers: true,
exclude: "node_modules/**",
plugins: [
"#babel/plugin-external-helpers",
"#babel/plugin-transform-runtime"
]
}),
vue({
css: true, // Dynamically inject css as a <style> tag
compileTemplate: true // Explicitly convert template to render function,
}),
buble() // Transpile to ES5
]
};
package.json
{
"name": "#appscode/vue-openapi-form",
"version": "0.1.0",
"main": "dist/vue-openapi-form.umd.js",
"module": "dist/vue-openapi-form.esm.js",
"unpkg": "dist/vue-openapi-form.min.js",
"browser": {
"./sfc": "src/vue-openapi-form.vue"
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"pkg": "npm run pkg:umd & npm run pkg:es & npm run pkg:unpkg",
"pkg:umd": "rollup --config pkg/rollup.config.js --format umd --file dist/vue-openapi-form.umd.js",
"pkg:es": "rollup --config pkg/rollup.config.js --format es --file dist/vue-openapi-form.es.js",
"pkg:unpkg": "rollup --config pkg/rollup.config.js --format iife --file dist/vue-openapi-form.min.js"
},
"dependencies": {
"#babel/runtime": "^7.7.7",
"bulma": "^0.8.0",
"bulma-switch": "^2.0.0",
"core-js": "^3.3.2",
"font-awesome": "^4.7.0",
"vee-validate": "^3.1.3",
"vue": "^2.6.10",
"vue-codemirror": "^4.0.6",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/plugin-external-helpers": "^7.7.4",
"#babel/plugin-transform-runtime": "^7.7.6",
"#rollup/plugin-buble": "^0.20.0",
"#rollup/plugin-node-resolve": "^6.0.0",
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-eslint": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"prettier": "^1.18.2",
"rollup": "^1.17.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-uglify-es": "0.0.1",
"rollup-plugin-vue": "^5.0.1",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"description": "A Vue component to generate html form using OpenAPI v3 schema",
"repository": {
"type": "git",
"url": "git+https://github.com/appscode/vue-openapi-form.git"
},
"keywords": [
"json-schema",
"vue",
"openapi",
"kubernetes"
],
"author": "support#appscode.com",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/appscode/vue-openapi-form/issues"
},
"homepage": "https://github.com/appscode/vue-openapi-form#readme"
}
When I run npm run pkg rollup bundles the component and produces 3 files in the dist folder.
vue-openapi-form.es.js
vue-openapi-form.min.js
vue-openapi-form.umd.js
Now, I am trying import this bundled component inside a different Vue project. In the new project in main.js file:
// main.js
...
import VueOpenapiForm from "#appscode/vue-openapi-form"
Vue.use(VueOpenapiForm)
...
Now, when I try to use vue-openapi-form as html tag inside vue template. I have the following error
[Vue warn]: Unknown custom element: <vue-openapi-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue
Can anyone tell me what am I doing wrong here ?
I need all those components to be declared globally as they are recursive. The install function does just that but it is not being called when I use Vue.use. How can I solve this ?
While trying to use react-rails, I've been running into issues incorporating mobx as state management into my app.
I was under the impression that the rails asset pipeline would bring in mobx to react, but, this hasn't been successful. I'm using the react-rails gem and trying to incorporate mobx into my react.es6.jsx sheets in the components folder.
my package.json file:
{
"name": "rent-pseudo",
"version": "1.0.0",
"description": "== Zipqode",
"main": "index.js",
"dependencies": {
"babel-plugin-syntax-async-functions": "^6.3.13",
"babel-plugin-transform-regenerator": "^6.3.18",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babelify": "^7.2.0",
"bourbon": "^4.2.7",
"bourbon-neat": "^1.8.0",
"browserify": "^13.1.0",
"browserify-incremental": "^3.1.1",
"font-awesome": "^4.6.3",
"graphql": "^0.6.2",
"mobx": "2.4.1",
"mobx-react": "^3.5.3",
"mobx-react-devtools": "^4.2.5",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-google-maps": "^4.11.0",
"react-router": "2.6.1",
"es6-promise": "^3.0.2",
"fetch": "^0.3.6",
"jquery": "^2.1.4",
"jquery-ujs": "^1.0.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://alexung#github.com/alexung/rent-pseudo.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/alexung/rent-pseudo/issues"
},
"homepage": "https://github.com/alexung/rent-pseudo#readme"
}
My first react file that's included in /components:
import { observer } from 'mobx-react'
const SearchResultsLayout = observer(React.createClass({
render: function() {
return (
<h1>Hello, World</h1>
)
}
}))
But I keep getting the error VM3275:1 Uncaught ReferenceError: SearchResultsLayout is not defined
Any ideas?
It seems like you either didn't declare React inside your jsx file via
import React from 'react'
or mobx package did not install
For those interested in knowing, the react_on_rails gem is better for incorporating mobx. Got it to work this morning by simply installing the gem and npm installing mobx into my package.json that's included in the client folder
You can use mobX from rails assets.
https://rails-assets.org/#/?query=mobx
I am setting up (or actually modifying existing) project with Browserify and Babelify. For some reason I can't configure my gulpfile properly. The project itself is a React project, if it matters.
I got rid of most of the problems, but now I am getting "Unexpected token" error on Browserify. It is caused by React components or html elements with attribute names which have a dash, ie. the following:
<button type="button" data-toggle="collapse">
My Browserify task:
gulp.task('browserify', function() {
browserify('./src/js/main.js')
.transform(babelify.configure({
presets: ["react", "es2015"]
}))
.bundle()
.on('error', function(err){
process.stdout.write('' + err + '\n');
notifier.notify({
title: 'Error',
message: err,
sound: true,
wait: true
}, function (err, response) {
});
})
.pipe(source('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload());
});
Package.json:
{
"name": "srcd-mockup",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"babel-preset-es2015": "^6.0.12",
"bootstrap-sass": "^3.3.5",
"browserify": "^11.2.0",
"flux": "^2.1.1",
"font-awesome": "^4.4.0",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"jquery": "^2.1.4",
"lodash": "^3.10.1",
"node-notifier": "^4.3.1",
"react": "^0.14.1",
"react-dom": "^0.14.1",
"react-redux": "^4.0.0",
"react-router-component": "^0.27.2",
"reactify": "^1.1.1",
"redux": "^3.0.4",
"redux-logger": "^2.0.4",
"updeep": "^0.10.1",
"vinyl-source-stream": "^1.1.0"
},
"devDependencies": {
"babel-preset-react": "^6.0.12",
"babelify": "^7.0.2",
"gulp-connect": "^2.2.0",
"gulp-notify": "^2.2.0",
"gulp-sass": "^2.0.4",
"gulp-uglify": "^1.4.1",
"redux-devtools": "^2.1.5"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
What I tried before:
The weird thing here is that previously I had similar project with similar dependencies and config, and it worked fine.
Then I tried to set up the new one, and first I got Unexpected token error on this line on my main.js (initial render of React):
ReactDOM.render(<App />, document.getElementById('main'));
The error was caused by "(". Then there was no presets on Babelify.
If I only have "react" on presets, I get "ParseError: 'import' and 'export' may appear only with 'sourceType: module'", because of, well importing.
Questions:
Is this related to Babelify or can it be caused by other module or dependency?
Is this related to Babel 6?
Why is dash causing the error?
How should I set this up?
There appears to be a bug as of Babel version 6.0.12 which is rendering data-* tags as object keys without quoting them, resulting in invalid JS syntax.
You can use a pre-v6 version of Babel, or else wait for someone to submit a fix.
UPDATE:
A fix for this just got checked into the repo, so this will be fixed in the next release.