We Keep Coding

Keep getting Uncaught SyntaxError: cannot use import statement outside a module

I keep getting message even after trying out the following:
btw, I am using the exact same code as the lecture, so I'm guessing it might be a version issue.
1. Add "type":"module" in package.json file
//which throws a different error: [ERR_REQUIRE_ESM]: require() of ES Module not supported
2. use require() instead
// which throws another error: Uncaught ReferenceError: require is not defined
3. in html file, add type module
<script type = "module" src="./app/javascripts/app.js"></script>
app.js
// Import the page's CSS. Webpack will know what to do with it.
import "../stylesheets/app.css";
//Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract';
import voting_artifacts from '../../build/contracts/Voting.json';
//require("../stylesheets/app.css")
//const Web3 = require("web3")
//const contract = require("truffle-contract")
//const voting_artifacts = require("../../build/contracts/Voting.json")
package.json
{
"name": "truffle-init-webpack",
"version": "0.0.1",
"description": "Frontend example using truffle v3",
"scripts": {
"build-amd": "npm run bundle-amd && npm run minify-amd",
"lint": "eslint ./",
"build": "webpack",
"dev": "webpack-dev-server"
},
"author": "Douglas von Kohorn",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.1.8",
"babel-preset-es2015": "^6.22.0",
"babel-register": "^6.22.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"eslint": "^3.14.0",
"eslint-config-standard": "^6.0.0",
"eslint-plugin-babel": "^4.0.0",
"eslint-plugin-mocha": "^4.8.0",
"eslint-plugin-promise": "^3.0.0",
"eslint-plugin-standard": "^2.0.0",
"html-webpack-plugin": "^2.28.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"truffle-contract": "^1.1.6",
"web3": "^0.18.4",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"dependencies": {
"milsymbol": "^2.0.0",
"node-fetch": "^2.6.1",
"solc": "^0.8.10",
"truffle": "^4.0.1",
"truffle-hdwallet-provider": "latest"
}
}

Vue - failed to compile tiptap.esm.js

I'm new to npm and I'm trying to use tiptap in my project. The problem is that after I try to import tiptap, it raises error. This is what I did:
sudo npm install -g vue-cli
vue init webpack frontend
vue add vuetify - didn't do nothing so I did
npm add vuetify
Then I added this to main.js
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
npm install tiptap
Then I added import { Editor, EditorContent } from 'tiptap' to App.vue and it started raising error:
<template>
<div> ... SOME CODE ...
</div>
</template>
<script>
import { Editor, EditorContent } from 'tiptap'
export default {
name: 'App'
}
</script>
ERROR
Failed to compile.
./node_modules/tiptap/dist/tiptap.esm.js
Module parse failed: Unexpected token (126:23)
You may need an appropriate loader to handle this file type.
| } = this.node;
| const pos = this.getPos();
| const newAttrs = { ...this.node.attrs,
| ...attrs
| };
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 46:0-47
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Do you know what to do?
EDIT - package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "xxx",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"ajv": "^6.0.1",
"tiptap": "^1.32.1",
"vue": "^2.5.2",
"vuetify": "^2.4.7"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

To work with webpack you need to provide more configurations, vue create project-name scaffolds new project to which you could add vuetify using
vue add vuetify
then install tiptap :
npm i tiptap
and use as explained in official docs

RollupJS library React Hook Error useState

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. :)

How do you use mobx with react rails?

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

Why is "-" (dash) giving "Unexpected token error" on Babelify with Gulp?

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.