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
Related
I want to have my locale messages separately for every component. I found an example how to do it for Vue 2, but I can't find how to do it for Vue 3 and Vuetify 3. This is what I've done:
package.json
"dependencies": {
"#mdi/font": "6.5.95",
"core-js": "^3.8.3",
"roboto-fontface": "*",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-i18n": "^9.1.2",
"vue-router": "^4.0.3",
"vuetify": "npm:#vuetify/nightly#next",
"vuex": "^4.0.0",
"webfontloader": "^1.0.0"
},
"devDependencies": {
"#kazupon/vue-i18n-loader": "^0.3.0", <--- This one is used for Vue 2.
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#types/webfontloader": "^1.6.34",
"#typescript-eslint/eslint-plugin": "^5.4.0",
"#typescript-eslint/parser": "^5.4.0",
"#vue/cli-plugin-babel": "~5.0.0-rc.1",
"#vue/cli-plugin-eslint": "~5.0.0-rc.1",
"#vue/cli-plugin-router": "~5.0.0-rc.1",
"#vue/cli-plugin-typescript": "~5.0.0-rc.1",
"#vue/cli-plugin-vuex": "~5.0.0-rc.1",
"#vue/cli-service": "~5.0.0-rc.1",
"#vue/eslint-config-typescript": "^9.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"less": "^4.1.1",
"less-loader": "7.3.0",
"sass": "^1.38.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vue-i18n": "~1.0.1",
"vue-cli-plugin-vuetify": "~2.4.5",
"vuetify-loader": "^2.0.0-alpha.0"
},
My component.vue:
<template>
<v-card-actions>
<v-tooltip left>
<template v-slot:activator="{ props }">
<v-btn v-bind="props">
<v-icon size="25">mdi-home</v-icon>
</v-btn>
</template>
<span>{{ $t('hello') }}</span>
</v-tooltip>
</v-card-actions>
</template>
<i18n>
{
"en": {
"hello": "Hello, world!"
},
"ru": {
"hello": "Привет, мир"
}
}
</i18n>
And main.ts:
const app = createApp(App)
installI18n(app)
const i18n = createI18n({
locale: 'en',
messages: {
}
})
app
.use(i18n)
.use(vuetify)
.mount('#app')
However, when I run my component, I don't see Hello, world! in the tooltip. Could anyone help to make it work?
EDIT: I tried to use #intlify/vue-i18n-loader instead of #kazupon/vue-i18n-loader but it didn't help. This test project is available on github
In addition to installing #intlify/vue-i18n-loader (instead of #kazupon/vue-i18n-loader) per the other answer by #BoussadjraBrahim, the loader must be configured in your Vue CLI project. That config is missing from your vue.config.js, so the <i18n> blocks are ignored.
Add the following config to enable processing of the <i18n> blocks in SFCs:
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.module
.rule('i18n')
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use('i18n')
.loader('#intlify/vue-i18n-loader')
.end()
},
⋮
}
demo
You need to install vue-i18n-loader as mentioned in official docs :
You need to install vue-loader and vue-i18n-loader to use custom blocks. While vue-loader (opens new window)most likely is already used in your project if you are working with single file components, you must install vue-i18n-loader (opens new window)additionally:
npm i --save-dev #intlify/vue-i18n-loader
I am on project in Vue2 and use element-ui, but we want upgrade our project to Vue3. For this we need to pass on Element-plus (element-ui doesn't compatible with Vue3).
We successfully pass on Vue3 but when we want use element comp we have always the same prob. An error appear in console and I don't understand why. I suspect a problem of translation to my SFC files into renderer function with vue-loader.
My test page:
<template>
<div id="app">
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day"
/>
</div>
</template>
<script>
const default_layout = "default";
export default {
name: "App",
components: {
},
data() {
return {
value1: null
};
},
vue.config.js:
module.exports = {
lintOnSave: false,
chainWebpack: config => {
config.resolve.alias.set("vue", "#vue/compat");
config.module
.rule("vue")
.use("vue-loader")
.tap(options => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2
}
}
};
});
}
};
depencies in package.json:
"dependencies": {
"#ag-grid-enterprise/all-modules": "^25.3.0",
"#vue/compat": "^3.1.0",
"ag-grid-community": "^25.3.0",
"ag-grid-enterprise": "^25.3.0",
"ag-grid-vue": "^25.3.0",
"core-js": "^3.6.5",
"element-plus": "^1.1.0-beta.9",
"highcharts": "^8.1.2",
"highcharts-vue": "^1.3.5",
"object-assign-deep": "^0.4.0",
"rfdc": "^1.1.4",
"rollup": "^2.28.2",
"v-tooltip": "^2.1.3",
"vue": "^3.1.0",
"vue-class-component": "^7.2.3",
"vue-click-outside": "^1.1.0",
"vue-debounce": "^2.5.7",
"vue-i18n": "^9.1.7",
"vue-loader": "^16.0.0",
"vue-numeric": "^2.3.0",
"vue-property-decorator": "^8.5.0",
"vue-router": "^4.0.11",
"vue-simple-svg": "^2.0.2",
"vue-toastification": "^1.7.6"
},
"devDependencies": {
"#babel/core": "^7.10.3",
"#rollup/plugin-alias": "^3.1.2",
"#rollup/plugin-buble": "^0.21.3",
"#rollup/plugin-commonjs": "^17.1.0",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-replace": "^2.3.3",
"#storybook/addon-actions": "^6.1.21",
"#storybook/addon-docs": "^6.1.21",
"#storybook/addon-essentials": "^6.1.21",
"#storybook/addon-links": "^6.0.26",
"#storybook/vue": "^6.1.21",
"#vue/cli-plugin-babel": "~4.5.13",
"#vue/cli-plugin-eslint": "~4.5.13",
"#vue/cli-service": "~4.5.13",
"#vue/compiler-sfc": "^3.2.10",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-preset-vue": "^2.0.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"node-sass": "^4.14.1",
"postcss": "^8.2.8",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-includepaths": "^0.2.4",
"rollup-plugin-scss": "^2.6.1",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1"
},
And the error I have in console:
error
For information I successfully make it work in new project start in Vue.
Encountering issues with setting up Jest for React without the use of Create-React-App.
I do not want to use CRA thus sticking with babel and webpack config setup which does work less Jest.
Jest itself is working fine for testing. It only fails when a component has a css/scss file import.
Seen many similar issues here and tried out the solutions but the issue persists.
Could I get some help with what am doing wrong pls? Thanks.
These are some of the solutions I have tried out which is not working for me.
Tried accepted solution and also the other 2 solutions for this:
jest unexpected token when importing css
A Medium Blog with similar solution
https://stackoverflow.com/questions/51994111/jest-encountered-an-unexpected-token
Plus a couple of other examples more related to Vue but similar solution.
The error output as follows:
Jest encountered an unexpected token
Details:
.some-class {
^
This is class being tested:
import React from 'react';
import '../styles/styles.scss' // line causing issue
const App = () => {
const env = process.env.NODE_ENV;
return (
<div>
<h1>sample header</h1>
<p>{`This is in ${env} environment`}</p>
</div>
);
};
export default App;
The Test class
import App from "../../components/App";
import React from "react";
import {shallow} from "enzyme";
it('should get a matching snapshot', () => {
const wrapper = shallow(<App/>)
expect(wrapper.find('h1').text()).toBe('sample header')
expect(wrapper).toMatchSnapshot()
});
Styles file: styles.scss
.some-class {
color: aliceblue;
}
package.json for reference:
{
"name": "tar",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "cross-env NODE_ENV=beta webpack-dev-server",
"build-prod": "cross-env NODE_ENV=production webpack -p",
"build-beta": "cross-env NODE_ENV=beta webpack",
"test": "jest --config=jest.config.json"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#babel/preset-typescript": "^7.10.4",
"#types/react": "^16.9.49",
"#types/react-dom": "^16.9.8",
"babel-jest": "^26.6.3",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"css-loader": "^4.3.0",
"enzyme": "^3.0.0",
"enzyme-adapter-react-16": "^1.0.0",
"enzyme-to-json": "^3.0.1",
"file-loader": "^6.1.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-cli": "^26.6.3",
"mini-css-extract-plugin": "^0.11.1",
"node-sass": "^4.14.1",
"raf": "^3.3.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass-loader": "^10.0.2",
"typescript": "^4.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
"\\.(scss|css|less)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
}
"transform": {
"\\.js?x$": "<rootDir>/node_modules/babel-jest"
}
}
}
Inside Webpack.config.js (showing partial)
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
Inside . babelrc file
{
"presets": ["#babel/react", "#babel/env"]
}
Looks like you forget to mock scss file during test despite having already had css|less files there.
To fix that, you have to add scss as part of current style file pattern:
package.json
{
"jest": {
"moduleNameMapper": {
// ...
"\\.(css|less|scss)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
}
}
}
Update
You're currently input jest cli with --config=jest.config.json which is json file which is wrong (it must be js file) that ended up the issue.
The right one should be:
jest --config=jest.config.js // `js` not `json`
But you have 2 config one in jest.config.js and jest area in package.json file. Please try to use one place instead by either remove --config=jest.config.js in CLI or move entire jest block into the config file.
Im using Storybook to Visualize and Document our React Component Library. Everything working fine exept that do not Show the Code in the Doc Page.
Project Data:
Typescript, React, Storybook
Project Dependencies:
"dependencies": {
"#types/node": "12.11.1",
"#types/react": "16.9.9",
"#types/react-dom": "16.9.2",
"#types/styled-components": "4.1.19",
"react": "16.10.2",
"react-dom": "16.10.2",
"react-scripts": "3.2.0",
"styled-components": "4.4.0",
"typescript": "3.6.4"
},
"devDependencies": {
"#babel/core": "7.6.0",
"#storybook/addon-actions": "5.2.6",
"#storybook/addon-console": "1.2.1",
"#storybook/addon-docs": "5.2.6",
"#storybook/addon-knobs": "5.2.6",
"#storybook/addon-links": "5.2.6",
"#storybook/addons": "5.2.6",
"#storybook/react": "5.2.6",
"#storybook/theming": "5.2.6",
"#svgr/cli": "4.3.3",
"#types/enzyme": "3.10.3",
"#types/enzyme-adapter-react-16": "1.0.5",
"#types/jest": "24.0.20",
"#types/react-test-renderer": "16.9.1",
"#types/storybook__react": "4.0.2",
"#typescript-eslint/eslint-plugin": "2.3.0",
"#typescript-eslint/parser": "2.5.0",
"babel-loader": "8.0.6",
"create-ts-index": "1.12.0",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.15.1",
"enzyme-to-json": "3.4.2",
"eslint-config-airbnb-typescript": "6.0.0",
"eslint-config-prettier": "6.5.0",
"eslint-config-react": "1.1.7",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jest": "23.0.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-prettier": "3.1.1",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "1.7.0",
"jest": "24.9.0",
"jest-junit": "8.0.0",
"jest-styled-components": "6.3.3",
"prettier": "1.18.2",
"react-docgen-typescript-loader": "3.3.0",
"react-test-renderer": "16.10.2",
"recursive-copy": "2.0.10",
"themeprovider-storybook": "1.2.4",
"ts-jest": "24.1.0",
"ts-loader": "6.2.1"
The Problem is that in the Docs Section of Storybook everything working exept the Code Snippet -> "No code available"
Sceenshot of the Docs Page
My Files in .storybook:
I use the Docs React Preset -> presets.js:
module.exports = [
{
name: '#storybook/addon-docs/react/preset',
options: {
configureJSX: true,
babelOptions: {},
sourceLoaderOptions: null,
},
},
];
And this webpack.config.js
const path = require('path');
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
exclude: path.resolve(__dirname, '..', 'node_modules'),
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [require.resolve('babel-preset-react-app')],
},
},
require.resolve('react-docgen-typescript-loader'),
],
});
return config;
};
Her are the config.tsx
import React, { ReactElement } from 'react';
import { configure, addDecorator, addParameters } from '#storybook/react';
import { withThemesProvider } from 'themeprovider-storybook';
import yourTheme from './yourTheme';
import { brightTheme, GlobalStyle } from '../src';
import './yourStyle.css';
// eslint-disable-next-line #typescript-eslint/no-var-requires
const { setConsoleOptions } = require('#storybook/addon-console');
const themes = [brightTheme];
const withGlobalStyles = (storyFn): ReactElement => {
return (
<>
<GlobalStyle />
{storyFn()}
</>
);
};
addParameters({ options: { theme: yourTheme } });
addDecorator(withThemesProvider(themes));
addDecorator(withGlobalStyles);
setConsoleOptions({ panelExclude: [] });
configure(require.context('../src', true, /.stories.(tsx|mdx)$/), module);
In the addons.ts i have only the other addons registered. Because of the presets i think its not neccessary to register the addon-doc too.
Can anyone help me with that? Thanks a lot.
I found it through help from the Storybook Github Page.
In preset.js the line sourceLoaderOptions: null, kills the loading of the Story-Code-Snipped. -> Simple delete the line and it works.
For some reason my ide is printing out 'Unexpected token <. Remember, adjacent JSX elements must be wrapped in an enclosing parent tag' for the following react code. I don't understand why it's printing that error since the component it's referring to is wrapped in an enclosing parent tag the <TableBody> tag specifically.
/* #flow */
import React from 'react'
import TableBody from '#material-ui/core/TableBody'
import Roster from './roster.jsx'
import type { MembersType } from '../../typeDefs/MembersType.js'
type RanksType = {
_id: string | number,
rankName: string,
members: Array<MembersType>
};
export default (props: {
members: MembersType
}) => (
<TableBody>
{props.members.map(({
_id,
rankName,
members,
}: RanksType) => (
<Roster <---specifically refering to this element
key={_id}
rank={rankName}
members={members}
/>
))}
</TableBody>
)
Package.json
{
"name": "novacms",
"private": true,
"scripts": {
"start": "meteor --settings settings-production.json --port $IP:$PORT",
"dev": "meteor --settings settings-development.json --port $IP:$PORT",
"test": "meteor test --driver-package cultofcoders:mocha --port $IP:$PORT"
},
"dependencies": {
"#babel/runtime": "^7.0.0-beta.42",
"#novacms/assign": "^1.0.0",
"#novacms/dependancy-injector": "^1.0.0",
"#novacms/event-store": "^1.0.0",
"#novacms/extend": "^1.0.0",
"#novacms/extendschema": "^1.0.1",
"#novacms/has": "^1.0.0",
"#novacms/pipe": "^1.0.0",
"#novacms/type-check": "^1.0.0",
"#material-ui/core": "^1.0.0-rc.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-optional-chaining": "^7.0.0-beta.3",
"bcrypt-nodejs": "0.0.3",
"event-emitter": "^0.3.5",
"faker": "^4.1.0",
"lodash": "^4.17.5",
"md5": "^2.2.1",
"meteor-apihelper": "^1.0.0",
"meteor-node-stubs": "^0.3.3",
"mobx": "^3.6.1",
"mobx-react": "^4.4.2",
"moment": "^2.21.0",
"npm": "^5.10.0",
"prettier": "^1.12.1",
"prop-types": "^15.6.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-router": "^4.2.0",
"react-storybook": "^1.0.0",
"recompose": "^0.26.0",
"semantic-ui-css": "^2.3.1",
"semantic-ui-react": "^0.79.1",
"simpl-schema": "^1.4.2",
"simpl-schema-mockdoc": "^1.0.5",
"sinon": "^4.5.0",
"spacejam": "^1.6.1"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"chai": "^4.1.2",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-meteor": "^0.4.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-meteor": "^5.0.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-flowtype": "^2.46.3"
},
"parser": "babel-eslint"
}
VSCode config
{
"files.eol": "\r\n",
"editor.fontFamily": "'Fira Mono', Consolas, 'Courier New', monospace",
"eslint.workingDirectories": [
"./src",
"./client",
"./imports",
"./server"
],
"react.beautify.onSave": true,
"editor.tabSize": 2,
"files.trimTrailingWhitespace": true,
"javascript.validate.enable": false,
"javascript.format.enable": false,
}
.babelrc
{
"plugins": ["transform-decorators-legacy", "transform-class-properties", "syntax-dynamic-import"]
}
I had a very similar issue.
Firstly delete (rename) your .babelrc file which you use (remove where ever you set it).
If storybook can't find that file, then it will use its own settings. This worked for me to prove that it was that file that caused the issue.
If this is the same for you then create a new .babelrc file, and place it into the storybook folder. Storybook will now use this and your project can continue to use the existing one.
The tricky part is finding the config setting in you existing .babelrc file that is breaking storybook - for me it was the react-hot-load/babel, but you don't have that listed.
My file ended up with only #babel/plugin-proposal-class-properties and #babel/plugin-proposal-rest-spread for plugins.