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
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
I'm bulding a lib that allow to export react components to a nextjs application, at first time it works very well but when I started to check react hooks on that library it trigger a invalid hook error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
In order to solve issues like that on webpack and microbundle, I was using npm link for development, cause this error happen on production build, that was my reference https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
This strategy don't work on rollup stack, I tried to link react and do some configs and nothing is working
that's my rollup.config.js
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import external from 'rollup-plugin-peer-deps-external'
import { terser } from 'rollup-plugin-terser'
import styles from "rollup-plugin-styles";
const input = 'src/index.js'
const output = 'dist/index'
export default [
{
input: input,
external: ['react', 'react-dom'],
output: {
file: `${output}.modern.js`,
format: 'es',
},
plugins: [
external('./package.json'),
resolve(),
commonjs({
include: ['node_modules/**'],
}),
babel({
exclude: 'node_modules/**'
}),
styles(),
terser()
],
},
]
An that's my package.json
{
"name": "project",
"version": "0.0.17",
"description": "",
"private": true,
"main": "dist/index.js",
"module": "dist/index.modern.js",
"umd:main": "dist/index.umd.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"prebuild": "rimraf dist",
"build": "rollup -c --environment BUILD:production",
"watch": "rollup -c --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"#webpack-cli/init": "^1.0.2",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"microbundle-crl": "^0.13.11",
"mini-css-extract-plugin": "^1.2.1",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rimraf": "^3.0.2",
"rollup": "^2.32.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-sass": "^1.2.2",
"rollup-plugin-scss": "^2.6.1",
"rollup-plugin-styles": "^3.11.0",
"rollup-plugin-terser": "^6.1.0",
"rollup-plugin-uglify": "^6.0.4",
"sass-loader": "^10.0.4",
"source-map-loader": "^1.1.1",
"static-site-generator-webpack-plugin": "^3.4.2",
"style-loader": "^2.0.0"
},
"peerDependencies": {
"react": "17.0.1",
"prop-types": "15.7.2",
"react-dom": "17.0.1"
},
"dependencies": {
"file-loader": "^6.2.0"
}
}
When I change my nextjs application on dev mode removing a test useState component it works, but if I reload the page or load directly with a useState component rendered it will trigger a react hook error :(
I found the reason for my case.
It's necessary peerDependencies setting on the package.json file.
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
So you try dependencies to peerDependencies.
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"file-loader": "^6.2.0"
},
Hope this helps. :)
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
While following the instructions to use the React component of Plotly in Meteor,
import createPlotlyComponent from 'react-plotlyjs';
import Plotly from 'plotly.js/dist/plotly-cartesian';
const PlotlyComponent = createPlotlyComponent(Plotly);
gives the error
Uncaught Error: Cannot find module 'plotly.js/dist/plotly-cartesian'
How do we install/load plotly-cartesian? react-plotlyjs NPM package has already been installed.
package.json
{
"name": "chart-test",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"babel-runtime": "^6.23.0",
"meteor-node-stubs": "~0.2.0",
"meteor-rxjs": "^0.4.7",
"pondjs": "^0.8.4",
"react": "^15.4.2",
"react-addons-pure-render-mixin": "^15.4.2",
"react-dom": "^15.4.2",
"react-plotlyjs": "^0.4.0",
"react-router": "^3.0.2",
"rxjs": "^5.2.0"
}
}
You may be missing the
"plotly.js": "^1.26.1",
Workaround for plotly that works for me is to import 'plotly.js/dist/plotly' instead of the cartesian version.
This issue may align with this suggesstion: https://github.com/benjeffery/react-plotlyjs/issues/15
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.