I had a react-redux app working perfectly fine with the UI being auto updated after every file change, then I decided to plugin sass into my app and the auto-reloading stopped working. So in order to get sass in my app, I had to install sass-loader, node-sass, css-loader, etc. But one of the loaders needed webpack 2, so I switched from 1.15 to 2.0, now when I run "npm run dev" I see webpack recompile after every file change, but my UI isn't being auto reloaded in my browser. Can anyone help me troubleshoot this?
Here is my webpack config file:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/app.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy', "transform-object-rest-spread"],
}
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: __dirname + "/src/",
filename: "app.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
An here is my package.json file:
{
"name": "campaign-viewer",
"version": "0.0.0",
"description": "Code challenge from MediaMath",
"main": "webpack.config.js",
"dependencies": {
"axios": "^0.12.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"css-loader": "^0.28.4",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"react": "^0.14.6",
"react-datetime": "^2.8.10",
"react-dom": "^0.14.6",
"react-redux": "^4.4.5",
"redux": "^3.6.0",
"redux-logger": "^2.6.1",
"redux-promise-middleware": "^3.2.0",
"redux-thunk": "^2.1.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.0.0",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Chris Stephenson",
"license": "ISC"
}
Looks like the problem was with using webpack-dev-server. When I used version 2.0.0 instead of 1.14.1 it started auto reloading again.
Related
In my project, I'm using the reanimate library to add animations, but I'm receiving an error
https://stackoverflow.com/questions/63005011/support-for-the-experimental-syntax-jsx-isnt-currently-enabled
I follow all the steps mention in the link but none of them work for me
My package.json file
{
"name": "animation",
"version": "0.1.0",
"private": true,
"dependencies": {
"#react-spring/native": "^9.6.1",
"#react-spring/web": "^9.6.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"babel-polyfill": "^6.26.0",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native-reanimated": "^2.14.4",
"react-native-web": "^0.18.10",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"url-loader": "^4.1.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
webpack.config.js
// web/webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = path.resolve(__dirname, "../");
// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, "index.web.js"),
path.resolve(appDirectory, "src"),
path.resolve(appDirectory, "node_modules/react-native-uncompiled"),
],
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: [
"#babel/preset-react",
"module:metro-react-native-babel-preset",
],
// Re-write paths to import only the modules needed by the app
plugins: [
"#babel/plugin-syntax-jsx",
"react-native-web",
"react-native-reanimated/plugin",
],
},
},
};
// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: "url-loader",
options: {
name: "[name].[ext]",
esModule: false,
},
},
};
module.exports = {
entry: [
// load any web API polyfills
path.resolve(appDirectory, "polyfills-web.js"),
// your web-specific entry file
path.resolve(appDirectory, "index.web.js"),
],
// configures where the build ends up
output: {
filename: "bundle.web.js",
path: path.resolve(appDirectory, "dist"),
},
// ...the rest of your config
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./index.html",
}),
new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null }),
new webpack.DefinePlugin({ process: { env: {} } }),
],
module: {
rules: [babelLoaderConfiguration, imageLoaderConfiguration],
},
resolve: {
// This will only alias the exact import "react-native"
alias: {
"react-native$": "react-native-web",
},
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// `.web.js`.
extensions: [".web.js", ".js"],
},
};
I am currently modifying the configuration file a Vue app (acting here as a host app) to implement the plugin of webpack : ModuleFederationPlugin.
The goal for me is to set up a micro-frontend architecture by getting a component from a remote app called "foo".
Here is the code to reproduce the issue :
config file host app :
const path = require("path");
const helpers = require("./config/helpers");
const { ModuleFederationPlugin } = require("webpack").container;
const config = {
configureWebpack: {
entry: {
polyfill: "#babel/polyfill",
},
stats: {
cached: false,
cachedAssets: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
modules: false,
},
devServer: {
historyApiFallback: true,
port: 8765,
},
plugins: [
new ModuleFederationPlugin({
name: "vue",
remotes: {
foo: "foo#http://localhost:5173/remoteEntry.js",
},
}),
],
},
pluginOptions: {
"style-resources-loader": {
preProcessor: "scss",
patterns: [],
},
},
};
module.exports = config;
package.json host app :
{
"name": "Test",
"version": "1.0.0",
"description": "Test",
"author": "Test",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vue": "^2.6.10"
},
"devDependencies": {
"#babel/core": "7.7.2",
"#babel/plugin-transform-runtime": "7.6.2",
"#babel/preset-env": "7.7.1",
"#babel/register": "7.7.0",
"#vue/cli-plugin-babel": "^4.0.5",
"#vue/cli-plugin-eslint": "^4.0.5",
"#vue/cli-service": "^4.0.5",
"#vue/eslint-config-airbnb": "^5.0.0",
"babel-plugin-istanbul": "5.2.0",
"cache-loader": "^4.1.0",
"eventsource-polyfill": "0.9.6",
"image-webpack-loader": "^6.0.0",
"karma-webpack": "4.0.2",
"selenium-server": "3.141.59",
"url-loader": "^2.2.0",
"vue-cli-plugin-style-resources-loader": "^0.1.4",
"vue-loader": "15.7.2",
"vue-style-loader": "4.1.2",
"vue-template-compiler": "2.6.10",
"webpack": "^4.41.2",
"webpack-merge": "4.2.2"
},
"engines": {
"node": ">= 8.0.0",
"npm": ">= 5.0.0"
}
}
yarn version host app : 1.22.19
node version host app : v12.0.0
config file remote app :
import svgr from "vite-plugin-svgr"
import { defineConfig } from "vite"
import react from "#vitejs/plugin-react"
import * as path from "path"
import federation from "#originjs/vite-plugin-federation"
export default defineConfig({
plugins: [
svgr(),
react(),
federation({
name: "foo",
filename: "remoteEntry.js",
exposes: {
"./App": "./src/App.tsx",
},
}),
],
build: {
target: "esnext",
assetsDir: "assets",
},
server: {
host: "0.0.0.0",
port: 5173,
},
})
package.json file of the remote app :
{
"name": "test",
"version": "1.0.0",
"description": "test",
"author": "test",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"build:prod": "tsc && vite build",
"build:demo": "tsc && vite build --mode demo",
"preview": "vite preview",
"lint:check": "eslint \"./src/**/*.{ts,tsx}\"",
"lint:fix": "eslint --fix \"./src/**/*.{ts,tsx}\"",
"prettier:check": "prettier --check .",
"prettier:fix": "prettier --write ."
},
"dependencies": {
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.0",
"#mui/x-date-pickers": "^5.0.0",
"#originjs/vite-plugin-federation": "^1.1.11",
"axios": "^0.27.2",
"classnames": "^2.3.1",
"dayjs": "^1.11.5",
"i18next": "^21.8.14",
"moment": "^2.29.4",
"npm": "^8.19.2",
"react": "^18.2.0",
"react-charts": "=3.0.0-beta.30",
"react-confetti": "^6.1.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.33.1",
"react-i18next": "^11.18.1",
"react-number-format": "^5.0.1",
"react-router-dom": "^6.3.0"
},
"devDependencies": {
"#types/node": "^18.7.18",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.30.7",
"#typescript-eslint/parser": "^5.30.7",
"#vitejs/plugin-react": "^2.0.0",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.1",
"prettier": "^2.7.1",
"sass": "^1.55.0",
"typescript": "^4.6.4",
"vite": "^3.0.0",
"vite-plugin-svgr": "^2.2.1"
}
}
yarn version of the remote app : 1.22.19
node version of the remote app : v12.0.0
Here is what I get when running the host app with "yarn serve" :
error logs when launching the app
My goal is then to be able to use the component App from the remote app in the host app by importing it like that :
Vue.component("App", () => import("foo/App"));
After running graphql-codegen-esm --config codegen.yml the following message is shown in the console
loadTs is not a function
I add files with my project configuration
package.json
{
"main": "src/index.js",
"type": "module",
"scripts": {
"dev": "concurrently \"nodemon\" \"npm run codegen --watch\"",
"codegen": "graphql-codegen-esm --config codegen.yml"
},
"dependencies": {
"#graphql-tools/load-files": "^6.6.0",
"apollo-server": "^3.10.0",
"graphql": "^16.5.0",
"graphql-modules": "^2.1.0",
"graphql-scalars": "^1.17.0"
},
"devDependencies": {
"#graphql-codegen/add": "^3.2.0",
"#graphql-codegen/cli": "2.11.3",
"#graphql-codegen/graphql-modules-preset": "^2.5.0",
"#graphql-codegen/typescript": "^2.7.2",
"#graphql-codegen/typescript-resolvers": "^2.7.2",
"#tsconfig/node18-strictest-esm": "^1.0.0",
"concurrently": "^7.3.0",
"nodemon": "^2.0.19",
"ts-node": "^10.9.1",
"typescript": "^4.7.4"
}
}
codegen.yml
schema: './src/**/*.graphql'
emitLegacyCommonJSImports: false
generates:
./src/graphql/:
preset: graphql-modules
presetConfig:
baseTypesPath: ../generated-types/graphql.ts # Where to create the complete schema types
filename: generated-types/module-types.ts # Where to create each module types
plugins:
- add:
content: '/* eslint-disable */'
- typescript
- typescript-resolvers
tsconfig.json
{
"extends": "#tsconfig/node18-strictest-esm/tsconfig.json",
"ts-node": {
"esm": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
Node
v18.7.0
I'm using Cucumber in my project with protractor and now I want to integrate it with Jira using XRAY but looking at the documentation, it uses jasmine and I don't know how to use both frameworks because if I put the code as indicated in the documentation using the "jasmine" framework instead of "custom" it doesn't recognize the cucumber sentences of the features.
Can someone help me? Thanks in advance
I include package.json and xrayconfig.ts .
xrayconfig.ts:
import { Config, protractor } from 'protractor';
import * as reporter from "cucumber-html-reporter";
import 'jasmine';
const XrayReporter = require('protractor-xray-reporter');
let onPrepareDefer;
let onCompleteDefer;
export let config: Config = {
directConnect: true,//Running chrome
capabilities: {
'browserName': 'chrome'
},
framework: 'jasmine',
frameworkPath: require.resolve('protractor-cucumber-framework'),
"types": ["chai", "cucumber", "node"],
specs: ['../Features/*.feature'],
cucumberOpts: {
tags:"#scenarioLola", //only executed this scenario
require: [
'../JSFiles/stepDefinitions/*.js' // accepts a glob
]
},
'onPrepare': function() {
let globals = require('protractor');
let browser = globals.browser;
onPrepareDefer = protractor.promise.defer();
onCompleteDefer = protractor.promise.defer();
const options = {
'screenshot': 'always',
'version': '1.0',
'jiraUser': 'user',
'jiraPassword': 'pwd',
'xrayUrl': 'https://jira.com/rest/raven/1.0/import/execution'
};
jasmine.getEnv().addReporter(XrayReporter(options, onPrepareDefer, onCompleteDefer, browser));
return onPrepareDefer.promise;
},
'onComplete': function() {
return onCompleteDefer.promise;
}
};
package.json
{
"name": "project",
"version": "1.0.0",
"description": "Project one",
"main": "index.js",
"scripts": {
"test": "protractor JSFiles/cucumberconfig.js",
"pretest": "tsc",
"protractor": "./node_modules/protractor/built/cli.js",
"webdriver-update": "./node_modules/.bin/webdriver-manager update"
},
"author": "Carol",
"license": "ISC",
"dependencies": {
"#types/cucumber": "^6.0.1",
"#types/jasmine": "^3.5.11",
"#types/jasminewd2": "2.0.8",
"#types/node": "^14.0.13",
"#types/jest": "^26.0.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"cucumber": "^6.0.5",
"cucumber-html-reporter": "^5.2.0",
"jasmine": "~3.5.0",
"protractor-cucumber-framework": "^6.2.1",
"typescript": "~3.9.5",
"protractor-jasmine2-screenshot-reporter": "0.5.0"
},
"devDependencies": {
"install-peers": "^1.0.3",
"protractor": "^7.0.0",
"protractor-zephyr-reporter": "^1.2.1",
"ts-node": "^8.10.2",
"jasmine-spec-reporter": "5.0.2",
"jasmine-core": "3.5.0"
}
}
i am running a webpack project and running this script
My package.json looks like this
{
"name": "collab-ui",
"version": "0.0.10",
"author": {
"name": "some-name",
"email": "some-emailId"
},
"main": "electron.js",
"scripts": {
"start": "rimraf debug && npm outdated && webpack --watch",
"http": "rimraf debug && npm outdated && webpack --watch",
"release": "rimraf dist && webpack --bail --progress --profile",
"elecstart": "rimraf debug && webpack && electron .",
"elecrel": "electron-packager . XorChat --all",
},
"devDependencies": {
"#types/jquery": "2.0.41",
"api-ai-javascript": "^2.0.0-beta.21",
"autoprefixer": "~6.7.7",
"awesome-typescript-loader": "~3.1.2",
"browser-sync": "~2.18.8",
"browser-sync-webpack-plugin": "~1.1.4",
"css-loader": "~0.27.3",
"custom-event-polyfill": "~0.3.0",
"electron": "^1.7.9",
"electron-packager": "^9.1.0",
"es6-promise": "~4.1.1",
"extract-text-webpack-plugin": "~2.1.0",
"file-loader": "~0.10.1",
"html-loader": "~0.4.5",
"html-webpack-plugin": "~2.28.0",
"html5-notification": "~3.0.0",
"http-proxy-middleware": "~0.17.4",
"import-glob-loader": "~1.1.0",
"knockout": "~3.4.2",
"live-server": "~1.2.0",
"node-sass": "~4.5.0",
"open-browser-webpack-plugin": "~0.0.5",
"postcss-loader": "~1.3.3",
"qrcode-generator": "~1.3.1",
"resolve-url-loader": "~2.1.0",
"rimraf": "~2.6.1",
"sass-loader": "~6.0.3",
"socket.io-client": "~2.0.3",
"store": "~2.0.12",
"style-loader": "~0.14.1",
"ts-loader": "~2.0.2",
"typescript": "~2.2.1",
"url-loader": "~0.5.8",
"webpack": "~2.2.1",
"webpack-dev-middleware": "~1.10.1",
"webpack-dev-server": "~2.4.2",
"webpack-hot-middleware": "~2.17.1",
"webpack-stream": "~3.2.0",
"webrtc-adapter": "^6.0.2",
"uuid": "^3.1.0"
}
}
My electron.js looks like this
const electron = require('electron');
const { app, BrowserWindow } = electron;
app.commandLine.appendSwitch("ignore-certificate-errors");
app.on('ready', () => {
let win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL(`file://${__dirname}/debug/index.html`);
win.webContents.openDevTools();
})
But after running npm run elecstart, i am getting this error
Any clue,why i am getting this error. i am running on windows 10 64bit, 8 gb ram(FYI), but after running the script the window error box comes as shown in the image and after i close it , the script halts.I am suspecting some JS error to be in there, as it is not able to find some symbol or some configuration is missing. Any help is appreciated.