Storybook Viewport Addon: Custom Viewports Do Not Build (react) - reactjs

I built an app using create-react-app. I create custom viewport types to add to my storybook. When I use yarn start everything builds fine and works. But when I build the app the viewports that I globally defined my preview.js file are not loading on the build. It is still the defaults. And for the life of me I can't figure out why. As far as I can tell I set it up the way the documentation explains.
This is my preview.js file
import { configure, addDecorator, addParameters } from '#storybook/react';
import { DocsPage, DocsContainer } from '#storybook/addon-docs/blocks';
import { withA11y } from '#storybook/addon-a11y';
import { GlobalStyle } from '../src/styles/global-styles';
const loaderFn = () => {
const allExports = [];
const styles = require.context('../src/styles', true, /\.stories\.(js|mdx)$/);
const req = require.context('../src/components', true, /\.stories\.(js|mdx)$/);
addDecorator(withA11y, GlobalStyle);
styles.keys().forEach(fname => allExports.push(styles(fname)));
req.keys().forEach(fname => allExports.push(req(fname)));
return allExports;
};
const customViewports = {
phoneSmall: {
name: 'Phone (320px min width)',
styles: {
width: '320px',
height: '667px',
},
},
tabletSmall: {
name: 'Tablet Small & Portrait (600px min width)',
styles: {
width: '600px',
height: '801px',
},
},
tabletLarge: {
name: 'Tablet Large & Landscape (960px min width)',
styles: {
width: '960px',
height: '768px',
},
},
desktop: {
name: 'Desktop (1200px min width)',
styles: {
width: '1200px',
height: '1024px',
},
},
};
configure(loaderFn, module);
addParameters({
docs: {
container: DocsContainer,
page: DocsPage,
},
viewport: { viewports: customViewports },
});
My main.js file
module.exports = {
stories: ['../src/**/*.stories.(js|mdx)'],
addons: [
'#storybook/preset-create-react-app',
'#storybook/addon-knobs/',
'#storybook/addon-actions',
'#storybook/addon-links',
'#storybook/addon-notes',
'#storybook/addon-storysource',
'#storybook/addon-a11y',
'#storybook/addon-docs',
'#storybook/addon-viewport',
]
}
Package.json
{
"name": "tamman-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"#storybook/addon-a11y": "^5.3.17",
"#storybook/addon-actions": "^5.3.17",
"#storybook/addon-docs": "^5.3.17",
"#storybook/addon-knobs": "^5.3.17",
"#storybook/addon-links": "^5.3.17",
"#storybook/addon-notes": "^5.3.17",
"#storybook/addon-storyshots-puppeteer": "^5.3.17",
"#storybook/addon-storysource": "^5.3.17",
"#storybook/addon-viewport": "^5.3.17",
"#storybook/addons": "^5.3.17",
"#storybook/preset-create-react-app": "^2.1.0",
"#storybook/react": "^5.3.17",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"autoprefixer": "^9.7.5",
"camel-case": "^4.1.1",
"core-js": "^3.6.4",
"del": "^5.1.0",
"fs": "^0.0.1-security",
"node-sass": "^4.13.1",
"pascal-case": "^3.1.1",
"path": "^0.12.7",
"prop-types": "^15.7.2",
"puppeteer": "^2.1.1",
"react": "^16.12.0",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1",
"styled-components": "^5.0.1",
"xml2js": "^0.4.23"
},
"scripts": {
"start": "node ./src/components/atoms/Icon/utils/generate-icons.js && react-scripts start",
"build-page": "node ./src/components/atoms/Icon/utils/generate-icons.js && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build": "yarn build-page && build-storybook -o build/storybook"
},
"eslintConfig": {
"extends": "react-app"
},
"homepage": ".",
"browserslist": [
"since 2010"
],
"devDependencies": {
"babel-loader": "^8.1.0",
"react-is": "^16.12.0"
}
}

Seems to be working fine. Try registering the viewport add-on
// main.js
module.exports = {
...
addons: [
...
'#storybook/addon-viewport/register',
],
]
}
Like the docs suggest.

Related

Error in vite#4.x + ant#3.x + react#16 : Unknown theme type: undefined, name: undefined

I am trying to migrate an old project into vite and I'm very close to success. There is just one bug which occurs in one of the javascript files of ant design when I deploy the app on server.
bug.
This is happening in the following function exported by antd#3.x
export function withSuffix(name, theme) {
switch (theme) {
case "fill":
return name + "-fill";
case "outline":
return name + "-o";
case "twotone":
return name + "-twotone";
default:
throw new TypeError("Unknown theme type: " + theme + ", name: " + name);
}
}
icons.forEach(function (icon) {
_this2.definitions.set(withSuffix(icon.name, icon.theme), icon);
});
I think this forEach loop is running on an array of undefined ([undefined, undefined..]) but I can't figure out why. I suspect it is due to some configuration I'm missing in my vite file or some other configuration.
If I change the code to this,
export function withSuffix(name, theme) {
switch (theme) {
case "fill":
return name + "-fill";
default:
case "outline":
return name + "-o";
case "twotone":
return name + "-twotone";
}
}
My project runs perfectly on local as well as on server. Here are my package.json and vite.config.ts
`{
"name": "ta",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"start": "vite --mode local",
"start:dev": "vite --mode local-development",
"start:qa": "vite --mode local-qa",
"build:dev": "tsc && vite build --base=/ta-admin --mode development",
"build:qa": "tsc && vite build --base=/ta-admin --mode qa",
"build:staging": "tsc && vite build --base=/admin --mode staging",
"build:prod": "tsc && vite build --base=/admin --mode production",
"preview": "vite preview"
},
"dependencies": {
"#ant-design/plots": "^1.2.4",
"#material-ui/core": "^4.4.0",
"#material-ui/icons": "^4.2.1",
"#reduxjs/toolkit": "^1.9.2",
"antd": "^3.19.3",
"antd-virtual-select": "^1.1.2",
"axios": "^1.3.0",
"file-saver": "^2.0.5",
"history": "^4.10.1",
"html2canvas": "^1.4.1",
"immutability-helper": "^3.0.1",
"jquery": "^3.6.3",
"jspdf": "^2.5.1",
"keycloak-js": "^20.0.3",
"less": "^4.1.3",
"loadable-components": "^2.2.3",
"lodash-decorators": "^6.0.1",
"lodash.difference": "^4.5.0",
"moment": "^2.29.4",
"popper.js": "^1.16.1",
"react": "^16.8.6",
"react-dnd": "^9.4.0",
"react-dnd-html5-backend": "^9.4.0",
"react-dom": "^16.8.6",
"react-html-parser": "^2.0.2",
"react-intl": "^2.9.0",
"react-intl-universal": "^2.6.11",
"react-monaco-editor": "^0.31.0",
"react-redux": "^8.0.5",
"react-router-dom": "^5.3.4",
"styled-components": "^5.3.6"
},
"devDependencies": {
"#types/node": "^18.11.18",
"#types/react": "^16.8.6",
"#types/react-dom": "^18.0.10",
"#types/react-router-dom": "^5.3.3",
"#vitejs/plugin-react": "^3.0.0",
"typescript": "^4.9.5",
"vite": "^4.0.0"
}
}
import { defineConfig, loadEnv } from "vite";
import react from "#vitejs/plugin-react";
const getApiHost = (npm_lifecycle_event: string) => {
switch (npm_lifecycle_event) {
default:
case "start":
return "http://localhost:8080";
}
};
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), "");
const scriptArray = env?.npm_lifecycle_script?.split(" ") || [];
const basePortion = scriptArray.find((scriptPortion) => {
return scriptPortion.includes("--base");
});
let outDir = basePortion ? basePortion.split("/")[1] : "build";
const target = getApiHost(env.npm_lifecycle_event);
const runningLocally = mode.includes("local");
return {
plugins: [react()],
...(runningLocally
? {
define: {
global: {},
},
}
: {}),
server: {
port: 3000,
open: true,
proxy: {
"/api": {
target,
changeOrigin: true,
secure: false,
},
},
},
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: "#root-entry-name: default;",
},
},
},
build: {
outDir,
commonjsOptions: {
transformMixedEsModules: true,
},
},
};
});

NextJS, SWC, React18, ReferenceError: React is not defined

I updated my Nextjs website to React18 and wanted to switch to SWC compiler. I am having a hard time wrapping my head around how to get this to work. I didn't have a custom babelrc config before. Whatever I do I keep getting
Error occurred prerendering page "/en/auth". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: React is not defined
When building my site
This is my next.config.js
const {
PHASE_DEVELOPMENT_SERVER,
PHASE_PRODUCTION_BUILD,
} = require("next/constants");
const { i18n } = require("./next-i18next.config");
module.exports = (phase) => {
/**
* #type {import('next').NextConfig}
*/
const nextConfig = {
env,
swcMinify: false,
//TODO
/* reactStrictMode: true, */
i18n,
//TODO
eslint: {
ignoreDuringBuilds: true,
},
compiler: {
removeConsole: isProd ? { exclude: ["error"] } : true,
},
experimental: {
forceSwcTransforms: true,
},
webpack: (config, options) => {
config.module.rules.push({
test: /\.pdf$/,
issuer: /\.tsx?$/,
use: [
"next-swc-loader",
{
loader: "swc-loader",
options: {
babel: false,
name: "*.pdf",
},
},
],
});
config.module.rules.push({
test: /\.svg$/,
issuer: /\.tsx?$/,
include: [options.dir],
use: [
"next-swc-loader",
{
loader: "#svgr/webpack",
options: { babel: false },
},
],
});
return config;
},
};
return nextConfig;
};
In babel you can set the runtime to fix this
{
"presets": [
"#babel/preset-env",
["#babel/preset-react", {"runtime": "automatic"}]
]
}
Is there similar setup for SWC? From their docs it seems that this should be handled out of the box so my only idea is that SWC is not actually being used but its still defaulting to Babel
EDIT:
My package.json
{
"name": "#example/site",
"private": true,
"version": "1.0.0",
"scripts": {
"dev": "next dev -p 3005",
"build": "next build",
"start": "next start",
"svgr": "npx #svgr/cli -d src/components/icons --ignore-existing --icon --typescript public/icons",
"prepare-husky": "husky install",
"format": "prettier -w .",
"format:check": "prettier -c .",
"lint": "next lint",
"lint:fix": "eslint src --fix && yarn format",
"lint:strict": "eslint --max-warnings=0 src"
},
"dependencies": {
"#hookform/resolvers": "2.9.7",
"#svgr/webpack": "6.3.1",
"axios": "0.27.2",
"clsx": "1.2.1",
"firebase": "9.9.2",
"framer-motion": "7.5.0",
"immer": "9.0.15",
"lottie-react": "2.3.1",
"next": "12.3.1",
"next-i18next": "10.2.0",
"next-language-detector": "1.0.2",
"prettier": "2.7.1",
"react": "18.2.0",
"react-color": "2.19.3",
"react-date-picker": "8.4.0",
"react-datepicker": "4.8.0",
"react-dom": "18.2.0",
"react-dropzone": "12.1.0",
"react-hook-form": "7.36.1",
"react-icons": "4.4.0",
"react-lottie-player": "1.4.3",
"react-phone-number-input": "3.2.6",
"react-query": "3.39.2",
"react-responsive": "9.0.0-beta.10",
"react-tippy": "1.4.0",
"react-use": "17.4.0",
"tailwind-merge": "1.5.1",
"tailwind-scrollbar-hide": "1.1.7",
"yup": "0.32.11",
"zustand": "3.7.0"
},
"devDependencies": {
"#svgr/cli": "6.3.1",
"#swc/core": "^1.3.4",
"#types/node": "17.0.15",
"#types/react": "18.0.17",
"#types/react-color": "3.0.6",
"#types/react-datepicker": "4.4.2",
"#types/react-dom": "18.0.6",
"autoprefixer": "10.4.8",
"config": "workspace:*",
"dotenv": "16.0.1",
"eslint": "8.21.0",
"install": "0.13.0",
"npm": "8.16.0",
"postcss": "8.4.16",
"swc-loader": "^0.2.3",
"tailwindcss": "3.1.8",
"tsconfig": "workspace:*",
"typescript": "4.7.4"
}
}
Swc compilar is for nextjs it is good that you updated React to version 18.xx but you will have to update next js to version 12. 12.3 for swc minify. We don't have to do any settings in next config file. Swc is automatically used at build.

Fail to load storybook everytime

Failed to load storybook, everytime,I run npm run storybook
I have ever tried to clear the npm-cache as well, it didn't worked out.
I am using latest version of storybook - v6.5.4
Error:
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: EBUSY: resource busy or locked, open 'C:\Users\soham.nandi\Desktop\analytics-storybook\node_modules.cache\storybook\dev-server\325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7'] {
errno: -4082,
code: 'EBUSY',
syscall: 'open',
path: 'C:\Users\soham.nandi\Desktop\analytics-storybook\node_modules\.cache\storybook\dev-server\325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7'
main.js
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.#(js|jsx|ts|tsx)"],
addons: [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-interactions",
"#storybook/preset-create-react-app",
"#storybook/addon-a11y",
],
framework: "#storybook/react",
core: {
builder: "#storybook/builder-webpack5",
},
features: {
storyStoreV7: true,
},
};
main.js
import { Suspense } from "react";
import { initReactI18next } from "react-i18next";
import i18n from "i18next";
import HttpApi from "i18next-http-backend";
import { LANGUAGES, TIMEZONES } from "../src/constants";
import "../node_modules/bootstrap/scss/bootstrap.scss";
import "../src/styles/index.scss";
i18n
.use(initReactI18next)
.use(HttpApi)
.init({
supportedLngs: LANGUAGES,
fallbackLng: "en-US",
lng: "en-US",
backend: {
loadPath: "/assets/locals/{{lng}}/translation.json",
},
react: { useSuspence: false },
});
export const globalTypes = {
locale: {
name: "Change Language",
description: "Change Language Support for the application",
defaultValue: "en-US",
toolbar: {
icon: "lightning",
items: LANGUAGES,
showName: true,
},
},
timezone: {
name: "Change Timezone",
description: "Change Timezone Support for the application",
defaultValue: "Asia/Kolkata",
toolbar: {
icon: "time",
items: TIMEZONES,
showName: true,
},
},
};
export const decorators = [
(Story, context) => {
i18n.changeLanguage(context.globals.locale);
return (
<div style={{ margin: "3em" }}>
<Suspense fallback={<div>Loading...</div>}>
<Story />
</Suspense>
</div>
);
},
];
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
options: {
storySort: (a, b) =>
a.title === b.title
? 0
: a.id.localeCompare(b.id, undefined, { numeric: true }),
},
};
package.js
{
"name": "analytics-storybook",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bootstrap": "^5.1.3",
"date-fns": "^2.28.0",
"date-fns-tz": "^1.3.4",
"i18next": "^21.8.2",
"i18next-http-backend": "^1.4.0",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-bootstrap": "^2.4.0",
"react-datepicker": "^4.7.0",
"react-dom": "^17.0.2",
"react-i18next": "^11.16.9",
"react-scripts": "^5.0.1",
"react-select": "^5.3.2",
"react-table": "^7.8.0",
"react-table-sticky": "^1.1.3",
"sass": "^1.51.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"eject": "react-scripts eject",
"lint": "eslint .",
"lint:fix": "eslint --fix",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#storybook/addon-a11y": "^6.5.4",
"#storybook/addon-actions": "^6.5.4",
"#storybook/addon-essentials": "^6.5.4",
"#storybook/addon-interactions": "^6.5.4",
"#storybook/addon-links": "^6.5.4",
"#storybook/builder-webpack5": "^6.5.4",
"#storybook/manager-webpack5": "^6.5.4",
"#storybook/node-logger": "^6.5.4",
"#storybook/preset-create-react-app": "^4.1.1",
"#storybook/react": "^6.5.4",
"#storybook/testing-library": "^0.0.11",
"babel-plugin-named-exports-order": "^0.0.2",
"eslint": "^7.32.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-storybook": "^0.5.12",
"identity-obj-proxy": "^3.0.0",
"prop-types": "^15.8.1",
"webpack": "^5.72.1"
}
}
npm version: v8.10.0
node version: v16.15.0
Try changing your node version to LTS.
I got the solution, it was due to some Hp driver. I uninstalled it, it started working
Driver name: HP Wolf Security
https://support.aspnetzero.com/QA/Questions/11057/Error-EBUSY-resource-busy-or-locked-when-running-npm-run-create-bundles

React App Keep Reloading until it get crashed

I am new to react js, I created a react app, and whenever I try to open the app it continuously reloads. can anyone help me in this? i tried but unable to find out any perfect solution.
Any solution?
package.json
{
"name": "sf",
"author": "KKK Team",
"version": "0.0.1",
"private": true,
"homepage": "/sfrs",
"scripts": {
"start": "env-cmd -f .env.development react-scripts start",
"build:development": "env-cmd -f .env.development react-scripts build",
"build:nonprod": "env-cmd -f .env.nonprod react-scripts build",
"build:production": "env-cmd -f .env.production react-scripts build",
"build": "react-scripts build",
"test": "jest --verbose",
"test:dev": "jest",
"test:watch": "jest --silent --watchAll",
"test:coverage": "jest --silent --coverage",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-table/core": "^0.2.20",
"#mui/icons-material": "^5.3.1",
"#mui/lab": "^5.0.0-alpha.66",
"#mui/material": "^5.3.1",
"#mui/styles": "^5.3.0",
"axios": "^0.25.0",
"buffer": "^6.0.3",
"clsx": "^1.1.1",
"crypto-browserify": "^3.12.0",
"env-cmd": "^10.1.0",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"msal": "^1.4.16",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.6",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"recompose": "^0.30.0",
"redux": "^4.1.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.4.1",
"stream-browserify": "^3.0.0",
"sweetalert2": "^11.4.8",
"sweetalert2-react-content": "^4.2.0",
"util": "^0.12.4",
"validator": "^13.7.0",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.8",
"husky": "^4.2.3",
"jest-canvas-mock": "^2.3.1",
"lint-staged": "^10.0.8",
"prettier": "^1.19.1",
"react-error-overlay": "^6.0.9",
"react-scripts": "4.0.3"
},
"jest": {
"setupFiles": [
"jest-canvas-mock"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "npm run test"
}
},
"lint-staged": {
"src/**/*.{js,jsx,json,css}": [
"prettier --write",
"eslint --fix"
]
},
"babel": {
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
},
"resolutions": {
"react-error-overlay": "6.0.9"
}
}
I am using MUI 5. I have tried with upgrading and degrading the node version but unable to solve the issue.
app.jsx
import 'react-perfect-scrollbar/dist/css/styles.css';
import React, { useEffect } from 'react';
import { useRoutes } from 'react-router-dom';
import _ from 'lodash';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { ThemeProvider } from '#mui/material';
import AuthProvider from './components/auth_provider';
import GlobalStyles from './components/globalstyles';
import theme from './theme/theme';
import AuthenticationProgressLoader from './components/authentication_progress_loader';
import UnAuthorized from './components/unauthorized';
import routeManager from './lib/route.manager';
import Alerts from './components/c_alert';
import PageProgress from './components/c_page_progress';
import PermissionManager from './lib/permission.manager';
const App = props => {
const {
userAccount,
userPermissions,
graphProfile,
routesConfig,
alerts,
isPageLoader
} = props;
const routing = useRoutes(routesConfig || []);
useEffect(() => {
if (
!_.isEmpty(userPermissions) &&
PermissionManager.isUserMerchant() &&
_.isEmpty(routesConfig)
) {
routeManager.dispatchRoutes();
}
}, [routesConfig, userPermissions]);
return !userPermissions ||
(!_.isEmpty(userPermissions) && !PermissionManager.isUserMerchant()) ? (
<UnAuthorized />
) : (
<ThemeProvider theme={theme}>
<GlobalStyles />
{!_.isEmpty(alerts.message) && <Alerts />}
{isPageLoader && <PageProgress />}
{userAccount && graphProfile && !_.isEmpty(userPermissions) ? (
routing
) : (
<AuthenticationProgressLoader />
)}
</ThemeProvider>
);
};
App.propTypes = {
// eslint-disable-next-line react/forbid-prop-types
userAccount: PropTypes.object,
// eslint-disable-next-line react/forbid-prop-types
graphProfile: PropTypes.object,
// eslint-disable-next-line react/forbid-prop-types
userPermissions: PropTypes.object,
// eslint-disable-next-line react/forbid-prop-types
routesConfig: PropTypes.array,
// eslint-disable-next-line react/forbid-prop-types
alerts: PropTypes.object,
isPageLoader: PropTypes.bool
};
App.defaultProps = {
userAccount: {},
graphProfile: {},
userPermissions: {},
routesConfig: [],
alerts: {},
isPageLoader: false
};
function mapStatesToProps(state) {
const { userPermissions, graphProfile, userAccount } = state.auth;
const { routesConfig } = state.routes;
const { alerts } = state;
const { isPageLoader } = state.pageProgress;
return {
userPermissions,
graphProfile,
userAccount,
routesConfig,
alerts,
isPageLoader
};
}
const authApp = AuthProvider(App);
const connectedApp = connect(mapStatesToProps, null)(authApp);
// eslint-disable-next-line
export { connectedApp as App };

WebSocket connection to 'wss://localhost:3000/sockjs-node' failed:

I am working in a react application (Below Package.json)
{
"name": "seed",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8080",
"dependencies": {
"#ckeditor/ckeditor5-adapter-ckfinder": "23.1.0",
"#ckeditor/ckeditor5-alignment": "23.1.0",
"#ckeditor/ckeditor5-autoformat": "23.1.0",
"#ckeditor/ckeditor5-basic-styles": "23.1.0",
"#ckeditor/ckeditor5-block-quote": "23.1.0",
"#ckeditor/ckeditor5-build-classic": "23.1.0",
"#ckeditor/ckeditor5-ckfinder": "23.1.0",
"#ckeditor/ckeditor5-dev-utils": "^23.5.1",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^23.5.1",
"#ckeditor/ckeditor5-easy-image": "23.1.0",
"#ckeditor/ckeditor5-editor-classic": "23.1.0",
"#ckeditor/ckeditor5-editor-decoupled": "23.1.0",
"#ckeditor/ckeditor5-font": "23.1.0",
"#ckeditor/ckeditor5-heading": "23.1.0",
"#ckeditor/ckeditor5-highlight": "23.1.0",
"#ckeditor/ckeditor5-image": "23.1.0",
"#ckeditor/ckeditor5-link": "23.1.0",
"#ckeditor/ckeditor5-list": "23.1.0",
"#ckeditor/ckeditor5-media-embed": "23.1.0",
"#ckeditor/ckeditor5-paste-from-office": "23.1.0",
"#ckeditor/ckeditor5-react": "3.0.0",
"#ckeditor/ckeditor5-real-time-collaboration": "23.1.0",
"#ckeditor/ckeditor5-remove-format": "23.1.0",
"#ckeditor/ckeditor5-table": "23.1.0",
"#ckeditor/ckeditor5-theme-lark": "23.1.0",
"#date-io/date-fns": "1.3.13",
"#material-ui/core": "4.9.10",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/pickers": "^3.2.10",
"#types/pdfjs-dist": "^2.1.5",
"aws-amplify": "^3.0.22",
"babel-polyfill": "6.26.0",
"connected-react-router": "^6.3.2",
"date-fns": "^2.14.0",
"env-cmd": "8.0.2",
"formik": "2.1.5",
"history": "4.7.2",
"juice": "^7.0.0",
"lodash": "^4.17.11",
"pdf-viewer-reactjs": "^2.0.7",
"pdfjs-dist": "2.4.456",
"raw-loader": "^4.0.1",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-hot-toast": "^1.0.2",
"react-intl": "2.7.2",
"react-redux": "^6.0.1",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-scripts": "^2.1.5",
"redux": "4.0.1",
"redux-persist": "5.10.0",
"redux-persist-transform-filter": "^0.0.20",
"redux-saga": "^1.0.2",
"styled-components": "4.1.1",
"superagent": "4.0.0",
"typesafe-actions": "^3.0.0",
"yup": "^0.28.3"
},
"scripts": {
"start": "HTTPS=true REACT_APP_ENV=local react-app-rewired start",
"start:windows": "set HTTPS=true&&set REACT_APP_ENV=local&&react-app-rewired start",
"build": "env-cmd .env.${REACT_APP_ENV} react-app-rewired build",
"build:staging": "REACT_APP_ENV=staging env-cmd .env.staging react-app-rewired build ",
"build:qa": "REACT_APP_ENV=qa env-cmd .env.qa react-app-rewired build ",
"build:qaint": "REACT_APP_ENV=qaint env-cmd .env.qaint react-app-rewired build ",
"build:euat": "REACT_APP_ENV=euat env-cmd .env.euat react-app-rewired build ",
"test": "react-app-rewired test --maxWorkers=4",
"test:ci": "react-app-rewired test --maxWorkers=4 --all --coverage",
"eject": "react-app-rewired eject",
"analyze": "env-cmd .env.${REACT_APP_ENV} react-app-rewired build --analyze-bundle",
"test:coverage": "npm run test -- --coverage",
"generate": "plop --plopfile scripts/generators/index.js",
"lint": "eslint 'src/**/*.{js,ts,tsx}'",
"lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
"lint-style": "stylelint 'src/**/*.style.{ts,tsx}' 'src/**/style.{ts,tsx}'",
"cypress:run": "sudo docker-compose -f docker-compose-cypress.yml run e2e-chrome"
},
"browserslist": [
">0.2%",
"not dead",
"not ie < 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.js",
"!src/**/*.test.js",
"!src/**/actions.js",
"!src/**/index.js",
"!src/**/serviceWorker.js",
"!src/**/*.wrap.js",
"!src/index.js",
"!src/tempPolyfills.js",
"!src/setupTests.js",
"!src/redux/reducers.js",
"!src/redux/sagas.js",
"!src/redux/store.js",
"!src/**/mocks/**",
"!src/redux/reducers.ts",
"!src/redux/sagas.ts"
],
"coverageThreshold": {
"global": {
"statements": 0,
"branches": 0,
"functions": 0,
"lines": 0
}
},
"snapshotSerializers": [
"<rootDir>/node_modules/enzyme-to-json/serializer"
],
"setupFiles": [
"core-js"
]
},
"bundlesize": [
{
"path": "./build/static/js/*.js",
"maxSize": "200 kB"
}
],
"devDependencies": {
"#types/cheerio": "^0.22.10",
"#types/enzyme": "^3.1.15",
"#types/enzyme-react-intl": "^2.0.0",
"#types/history": "^4.7.2",
"#types/jest": "^23.3.12",
"#types/lodash": "^4.14.119",
"#types/node": "^10.12.18",
"#types/pdf-viewer-reactjs": "^2.0.0",
"#types/react": "^16.8.3",
"#types/react-dom": "^16.0.11",
"#types/react-intl": "^2.3.15",
"#types/react-redux": "^6.0.12",
"#types/react-router": "^4.4.3",
"#types/react-router-dom": "^4.3.1",
"#types/react-test-renderer": "^16.0.3",
"#types/redux-mock-store": "^1.0.2",
"#types/styled-components": "^4.1.5",
"#types/superagent": "^3.8.6",
"#types/webpack-env": "^1.13.6",
"#types/yup": "^0.26.34",
"#typescript-eslint/eslint-plugin": "^1.6.0",
"#typescript-eslint/parser": "^1.6.0",
"babel-plugin-styled-components": "1.8.0",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.15",
"enzyme-react-intl": "^2.0.6",
"enzyme-to-json": "3.3.4",
"eslint-config-prettier": "4.1.0",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jest": "22.0.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-mysticatea": "4.2.4",
"eslint-plugin-prefer-object-spread": "1.2.1",
"eslint-plugin-prettier": "3.0.0",
"eslint-plugin-react": "7.11.1",
"husky": "^4.2.5",
"mockdate": "^3.0.2",
"plop": "2.1.0",
"prettier": "1.15.1",
"react-app-rewire-webpack-bundle-analyzer": "1.0.1",
"react-app-rewired": "2.1.0",
"react-test-renderer": "16.10",
"redux-mock-store": "^1.5.4",
"redux-saga-test-plan": "^4.0.0-beta.2",
"stylelint": "^9.10.1",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-declaration-strict-value": "^1.1.2",
"stylelint-processor-styled-components": "^1.5.2",
"typescript": "^3.2.2",
"wait-on": "^3.2.0",
"webpack-manifest-plugin": "^2.0.4"
}
}
Below config-overrides.js
const { styles } = require( '#ckeditor/ckeditor5-dev-utils' );
module.exports = {
webpack: function override(config, env) {
const analyzeBundle = process.argv.indexOf('--analyze-bundle') !== -1;
if (analyzeBundle) {
const rewireWebpackBundleAnalyzer = require('react-app-rewire-webpack-bundle-analyzer');
config = rewireWebpackBundleAnalyzer(config, env, {
analyzerMode: 'static',
reportFilename: 'report.html',
});
}
// Fix strange issue with webpack build
// details here: https://stackoverflow.com/questions/60407393/create-react-app-production-build-runtime-error-cannot-read-property-call-of
// TODO: maybe update webpack to fix while keeping import optimization
config.optimization.sideEffects = false;
// Customize webpack config here
console.log("Loading Custom config for Webpack, rebuilding ckeditor");
const oneOfIndex = config.module.rules.findIndex(item => {
return item.hasOwnProperty("oneOf");
});
oneOf = config.module.rules[oneOfIndex].oneOf;
// Add the SVG and CSS loaders to the oneOf array
const additions = [
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: ["raw-loader"]
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
use: [
{
loader: "style-loader",
},
{
loader: "postcss-loader",
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve("#ckeditor/ckeditor5-theme-lark")
},
minify: true
})
}
]
}
];
additions.forEach((item) => {
oneOf.push(item);
});
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
// Modify cssRegex
let loader;
loader = oneOf.find(item => {
if (item.test !== undefined)
return item.test.toString() === cssRegex.toString();
});
loader.exclude = [cssModuleRegex, /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/];
// Modify cssModuleRegex
loader = oneOf.find(item => {
if (item.test !== undefined)
return item.test.toString() === cssModuleRegex.toString();
});
loader.exclude = [/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/];
// Modify file-loader
loader = oneOf.find(item => {
if (item.loader !== undefined)
return (
item.loader.toString() === require.resolve("file-loader").toString()
);
});
loader.exclude = [
/\.(js|mjs|jsx|ts|tsx)$/,
/\.html$/,
/\.json$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/
];
config.module.rules[oneOfIndex].oneOf = oneOf;
return config;
},
devServer: function(configFunction) {
// Return the replacement function for create-react-app to use to generate the Webpack
// Development Server config. "configFunction" is the function that would normally have
// been used to generate the Webpack Development server config - you can use it to create
// a starting configuration to then modify instead of having to create a config from scratch.
return function(proxy, allowedHost) {
// Create the default config by calling configFunction with the proxy/allowedHost parameters
const defaultConfig = configFunction(proxy, allowedHost);
return {
...defaultConfig,
hot: true,
historyApiFallback: true,
// Allow mounting react apps from a page served by the backend.
headers: {
'Access-Control-Allow-Origin': 'http://localhost:8080',
},
};
};
},
};
I am trying to load another react application as a microfront end using :
I ve tested the imported microfront end in a simple react app (container) and everything went well
import React, {useCallback, useEffect} from 'react';
import {History} from 'history';
interface MicroFrontendProps {
history?: History;
name: string;
host: string | undefined;
}
const MicroFrontend: React.FC<MicroFrontendProps> = ({history, name, host,}) => {
const renderMicroFrontend = useCallback(() => {
(window as any)[`render${name}`](`${name}-container`, history);
}, [name, history]);
useEffect(() => {
const scriptId = `micro-frontend-script-${name}`;
if (document.getElementById(scriptId)) {
renderMicroFrontend();
} else {
fetch(`${host}/asset-manifest.json`)
.then(res => res.json())
.then(manifest => {
const promises = Object.keys(manifest.files)
.filter(key => key.endsWith('.js'))
.reduce((sum, key) => {
sum.push(
new Promise(resolve => {
const path = `${host}${manifest.files[key]}`;
const script = document.createElement('script');
if (key === 'main.js') {
script.id = scriptId;
}
script.onload = () => {
resolve();
};
script.crossOrigin = '';
script.src = path;
document.body.after(script);
}),
);
return sum;
}, [] as any);
Promise.allSettled(promises).then(() => {
renderMicroFrontend();
});
});
}
return () => {
(window as any)[`unmount${name}`](`${name}-container`);
};
}, [renderMicroFrontend, host, name]);
return <main id={`${name}-container`} />;
};
export default MicroFrontend;
When I am importing the app, when I go to a link which loads it I am getting this error (the imported app is rendred but server shuts down) :
webpackHotDevClient.js:60 WebSocket connection to 'wss://localhost:3000/sockjs-node' failed:
./node_modules/react-dev-utils/webpackHotDevClient.js # webpackHotDevClient.js:60
webpackHotDevClient.js:76 The development server has disconnected.
Refresh the page if necessary.
Do you have any idea about this error ?
Thanks

Resources