Develop Reference

Images loaded using next.js only showing default image and subtext

Images current show up like this.
Looking at the image source, it shows up as <img class="blur flex-shrink-0 mb-0 mr-3 rounded-full w-14 h-14 lazyloaded" alt="Profile" src="[object Object]">
Without using .default as shown below, the src would be [object Module]
I am using next.js 12 (but the same issues happen on 11).
I am loading the images like this (Both the commented and uncommented result in the same):
<Image
className="flex-shrink-0 mb-0 mr-3 rounded-full w-14 h-14"
// src={require("../../../content/assets/profile.png").default}
// webpSrc={require("../../../content/assets/profile.png?webp").default}
// previewSrc={require("../../../content/assets/profile.png?lqip").default}
src={require("public/profile_new.png").default}
webpSrc={require("/public/profile_new.png?webp").default}
previewSrc={require("/public/profile_new.png?lqip").default}
alt="Profile"
/>
I've tried suggestions from:
Webpack file-loader outputs [object Module]
IMAGE: You may need an appropriate loader to handle this file type
I can't reference an image in Next.js
Nextjs: TypeError: unsupported file type: undefined after update to v.11
Below is my next.config.js. All the parts that have been commented out have at one point been uncommented but have yielded the same result.
const optimizedImages = require("next-optimized-images");
module.exports = optimizedImages({
webpack: (config, options) => {
config.module.rules.push({
test: /\.(png|jpe?g|gif)$/i,
use: [
options.defaultLoaders.babel,
{
loader: "file-loader",
options: {
esModule: false,
},
},
],
});
return config;
},
});
Here are my dependencies from package.json
"dependencies": {
"clsx": "^1.1.1",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"lazysizes": "^5.3.1",
"lqip-loader": "^2.2.1",
"next": "^12.0.4",
"next-compose-plugins": "^2.2.1",
"next-optimized-images": "^2.6.2",
"next-themes": "^0.0.14",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-markdown": "^5.0.3",
"react-syntax-highlighter": "^15.4.3",
"react-toggle-dark-mode": "^1.0.3",
"remark-gfm": "^1.0.0",
"typeface-merriweather": "^1.1.13",
"typeface-open-sans": "^1.1.13",
"url-loader": "^4.1.1",
"webp-loader": "^0.6.0"
},
"devDependencies": {
"#babel/preset-env": "^7.16.4",
"#babel/preset-react": "^7.16.0",
"#tailwindcss/typography": "^0.4.0",
"autoprefixer": "^10.2.5",
"gray-matter": "^4.0.2",
"html-webpack-plugin": "^5.5.0",
"postcss": "^8.2.8",
"tailwindcss": "^2.0.4"
},
File structure: file structure

Project migration from Babel 6 to Babel 7 -> error import/export not in top level

After several days i found a working project with mongo, vuejs, express and passport.
https://github.com/searsaw/vue2-auth
This project was originally wrote for Babel 6.
I updated the dependencies in package.json in order to work with Babel 7 :
"devDependencies": {
"#babel/core": "^7.7.5",
"#babel/plugin-syntax-dynamic-import": "^7.7.4",
"#babel/plugin-transform-modules-commonjs": "^7.7.5",
"#babel/plugin-transform-runtime": "^7.7.6",
"#babel/plugin-transform-strict-mode": "^7.7.4",
"#babel/preset-env": "^7.7.6",
"#babel/preset-react": "^7.7.4",
"#babel/runtime": "^7.7.6",
"babelify": "^10.0.0",
"browserify": "^16.5.0",
"browserify-hmr": "^0.4.1",
"concurrently": "^5.0.1",
"eslint": "^6.7.2",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-plugin-html": "^6.0.0",
"eslint-plugin-import": "^2.19.1",
"nodemon": "^2.0.2",
"vue-hot-reload-api": "^2.3.4",
"vueify": "^9.2.4",
"watchify": "^3.11.1"
},
"dependencies": {
"axios": "^0.19.0",
"body-parser": "^1.19.0",
"connect-mongo": "^3.2.0",
"express": "^4.17.1",
"express-session": "^1.17.0",
"flash": "^1.1.0",
"node-uuid": "^1.4.8",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"pug": "^2.0.4",
"vue": "^2.6.10"
}
.babelrc :
{
"presets": [
["#babel/preset-env", {
"targets": {
"ie": "11"
}
}]
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}
When i type "npm run dev" i have an error :
Error: Parsing file
import axios from 'axios';
^ D:\xxx\src\exclamations_viewer.vue: 'import' and
'export' may only appear at the top level (31:0)
Below the vue code :
<style>
.exclamations-viewer,
.add-form-container {
margin-top: 20px;
}
</style>
<template>
<div class="container">
<div class="row add-form-container" v-if='canAdd()'>
<div class="col-md-12">
<Exclamation-Add-Form :onAdd='onExclamationAdded'></Exclamation-Add-Form>
</div>
</div>
<div class="row exclamations-viewer">
<div class="col-md-4">
<Exclamation-List :user='user' :onRemove='onExclamationRemoved' title='All Exclamations' :exclamations='exclamations'></Exclamation-List>
</div>
<div class="col-md-4">
<Exclamation-List :user='user' :onRemove='onExclamationRemoved' title='Your Exclamations' :exclamations='userExclamations'></Exclamation-List>
</div>
<div class="col-md-4">
<Exclamation-Search-List :user='user' :onRemove='onExclamationRemoved' :exclamations='exclamations'></Exclamation-Search-List>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import ExclamationList from './exclamation_list.vue';
import ExclamationSearchList from './exclamation_search_list.vue';
import ExclamationAddForm from './exclamation_add_form.vue';
export default {
name: 'ExclamationsViewer',
data: () => ({
user: {
scopes: [],
},
exclamations: [],
}),
beforeMount() {
Promise.all([
axios.get('/api/me'),
axios.get('/api/exclamations'),
]).then(([{ data: meData }, { data: exclamationData }]) => {
this.user = meData.user;
this.exclamations = exclamationData.exclamations;
});
},
methods: {
onExclamationAdded(text) {
axios.post('/api/exclamations', { text }).then(({ data }) => {
this.exclamations = [data.exclamation].concat(this.exclamations);
});
},
canAdd() {
return this.user.scopes.includes('add');
},
onExclamationRemoved(id) {
axios.delete(`/api/exclamations/${id}`)
.then(() => {
this.exclamations = this.exclamations.filter(e => e.id !== id);
});
},
},
computed: {
userExclamations() {
return this.exclamations.filter(exc => exc.user === this.user.username);
},
},
components: {
ExclamationList,
ExclamationSearchList,
ExclamationAddForm,
},
};
</script>
I think it is related to the old preset-es2015 but after spending one day i am out of options.
Thank you for helping me.

Snapshot test fails for <AnimatedComponent/> in react native and jest

I am using jest to create snapshots of react-native components. I'm using babel 7. I can create snapshots but Snapshot is not created for TouchableOpacity component
I have already tried updating react-test-renderer to latest version but that does not help.
The snapshot test file --
Button.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Button from '../src/components/Button';
test('renders correctly', () => {
const tree = renderer.create(<Button />).toJSON();
expect(tree).toMatchSnapshot();
});
Button.js
const Button = (props: Props) => {
const { text, disabled, style, onPress } = props
return (
<TouchableOpacity
style={[styles.button, style]}
disabled={disabled}
activeOpacity={disabled ? 1 : 0.5}
onPress={!disabled && onPress}
>
<Text style={styles.buttonText}>{text}</Text>
</TouchableOpacity>
)
}
here's the error message for jest
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6884
The above error occurred in the <AnimatedComponent> component:
in AnimatedComponent (created by TouchableOpacity)
in TouchableOpacity (created by Button)
in Button
TypeError: Cannot read property 'bind' of undefined
at new bind (node_modules/react-native/Libraries/Animated/src/createAnimatedComponent.js:39:53)
Here's my package.json
{
"name": "",
"version": "0.0.1",
"scripts": {
"test:unit": "jest",
"test": "jest",
},
"jest": {
"preset": "react-native",
"testMatch": [
"**/?(*.)test.js?(x)"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupFiles": [
"<rootDir>/jest/setup.js"
]
},
"dependencies": {
"#babel/runtime": "^7.1.2",
"react": "16.5.0",
"react-native": "0.57.2",
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.6.0",
"babel-preset-flow": "^7.0.0-beta.3",
"detox": "^9.0.4",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "^3.3.4",
"eslint": "^5.6.0",
"flow-bin": "0.78.0",
"husky": "^0.14.3",
"jest": "23.6.0",
"jest-snapshot": "^23.6.0",
"lint-staged": "^7.3.0",
"metro-react-native-babel-preset": "0.45.4",
"mocha": "^5.2.0",
"react-test-renderer": "16.5.2",
"regenerator-runtime": "^0.12.1"
}
}
Here's my bable.config.js
module.exports = api => {
api.cache(true);
return {
presets: [
'module:metro-react-native-babel-preset',
'flow',
'#babel/preset-env'
],
plugins: ['#babel/plugin-proposal-class-properties']
};
};
Here's my .babelrc
{
"presets": ["module:metro-react-native-babel-preset", "flow"]
}

Update your babel.config.js plugins list to include "#babel/plugin-transform-flow-strip-types" before the class-properties plugin:
plugins: [
"#babel/plugin-transform-flow-strip-types",
"#babel/plugin-proposal-class-properties"
]
Reference:
https://github.com/facebook/react-native/issues/20150#issuecomment-417858270

getDerivedStateFromProps not called in React Native

I'm trying to use the new getDerivedStateFromProps lifecycle method in my React Native component but the method never gets called. I've tried looking it up but found no issues in the react-native repo. No results on StackOverflow or Google either.
What I did find are a reddit thread and a StackOverflow issue which both cite updating react-dom as a solution, which would not work in this case since there's no dom in React Native.
Can anyone confirm if this method is supposed to work in React Native? If it can be used, any help with solving this issue will be much appreciated.
Below is a simplified version of my component:
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Auth } from '../redux';
import ChillaAPI from '../api';
const withUserData = WrappedComponent => {
class UserDataLoader extends React.Component {
static getDerivedStateFromProps(props, state) {
console.log('getDerivedStateFromProps');
if (props.uid !== state.uid) {
return {
uid: props.uid,
};
}
return state;
}
state = { uid: null };
render() {
console.log({ propsUid: this.props.uid });
console.log({ stateUid: this.state.uid });
return <WrappedComponent />;
}
}
UserDataLoader.propTypes = {
uid: PropTypes.bool.isRequired,
};
return connect(mapStateToProps)(UserDataLoader);
};
function mapStateToProps(state) {
return {
uid: Auth.selectors.getUid(state),
};
}
export default withUserData;
The log output from the component is as follows:
{ propsUid: null }
{ stateUid: null }
{ propsUid: 'jW78ej3JDgPpheadAlcrkG8UIZB2' }
{ stateUid: null }
Here is my package.json for good measure:
{
"name": "Chilla",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"start:reset": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
"watch:lint": "node node_modules/eslint-watch/bin/esw -w",
"test": "jest",
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [
"node_modules/.bin/prettier --single-quote --trailing-comma es5 --write",
"eslint",
"git add"
]
},
"dependencies": {
"axios": "^0.18.0",
"firebase": "^4.13.1",
"husky": "^0.14.3",
"lint-staged": "^7.0.4",
"prop-types": "^15.6.1",
"react": "16.3.1",
"react-native": "^0.52.2",
"react-native-fetch-blob": "^0.10.8",
"react-native-image-picker": "^0.26.7",
"react-navigation": "^1.5.11",
"react-redux": "^5.0.7",
"recompose": "^0.27.0",
"redux": "^4.0.0",
"redux-logger": "^3.0.6"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-react-native": "^3.2.1",
"eslint-watch": "^3.1.4",
"jest": "22.4.3",
"prettier": "^1.12.1",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}

Updating to react-native#0.55.3 solved this issue

React Hot Loader not reflecting changes in browser

I am working on a react project. I am trying to use react hot loader in it. Everything in the project works fine but I am not able to see the changes in the browser as I make any changes in my component. I followed the official documentation for setting up hot loader. But it is not working. My content gets loaded in browser (localhost:3000) though. What should I do so that hot loader starts showing the changes. Here are my files.
App.js
import React from 'react';
import Userlist from '../containers/user-list';
import UserDetail from '../containers/user-detail';
require('../../scss/style.scss');
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
const App = () => (
<MuiThemeProvider>
<div>
<RaisedButton label="Default" />
<h2>
Usernamess
</h2>
<Userlist/>
<hr/>
<h2>
User Detail
</h2>
<hr/>
<UserDetail/>
</div>
</MuiThemeProvider>
);
export default App;
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./dev/js/index.js'
],
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'dev')
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
package.json
{
"name": "react-redux-template",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node server.js",
"lint": "eslint src"
},
"license": "ISC",
"dependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-register": "^6.9.0",
"cross-env": "^1.0.8",
"css-loader": "^0.23.1",
"expect": "^1.20.1",
"material-ui": "^0.15.4",
"node-libs-browser": "^1.0.0",
"node-sass": "^3.8.0",
"react": "^15.1.0",
"react-addons-test-utils": "^15.1.0",
"react-dom": "^15.1.0",
"react-redux": "^4.4.5",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.11.0"
},
"devDependencies": {
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-stage-0": "^6.5.0",
"react-transform-hmr": "^1.0.4",
"react-hot-loader": "^1.3.0"
}
}
server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Listening at http://localhost:3000/');
});

An abstract from hot loader official thread https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md
"The following modules couldn't be hot updated: (They would need a full reload!)
If you get this warning when editing a root component, this may be because you don't export anything from it, and call React.render from there. Put your root component in a separate file (e.g. App.jsx) and require it from index.js where you call React.render."
So I made changes in my App.js
export default class App extends Component {
render() {
return (
<MuiThemeProvider>
<div>
<RaisedButton label="Default" />
<h2>
Usernamess
</h2>
<Userlist/>
<hr/>
<h2>
User Deta
</h2>
<hr/>
<UserDetail/>
</div>
</MuiThemeProvider>
);
}
}