I am trying to change the primary colour for BlueprintJS in react. Below is the following information on my setup.
Dependencies in packages.json:
"dependencies": {
"#blueprintjs/core": "^4.11.2",
"#blueprintjs/icons": "^4.6.3",
"#blueprintjs/select": "^4.8.2",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.64",
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"sass": "^1.55.0",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
}
In the index.scss I have the following:
#import "~normalize.css";
#import "~#blueprintjs/core/src/blueprint";
#import "~#blueprintjs/icons/src/blueprint-icons";
#import "~#blueprintjs/select/src/blueprint-select";
// I have also tried this above the imports.
$pt-intent-primary: #5655bc !default;
When I run the app, I just get the following error:
Compiled with problems:X
ERROR in ./src/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (path: (fill: #5f6b7c)) isn't a valid CSS value.
╷
39 │ background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\#blueprintjs\core\src\components\breadcrumbs\_breadcrumbs.scss 39:54 #import
node_modules\#blueprintjs\core\src\components\_index.scss 5:9 #import
node_modules\#blueprintjs\core\src\blueprint.scss 18:9 #import
src\index.scss 2:9 root stylesheet
I have gone through a lot of the issues listed on GitHub and people have said they have gotten around it by doing this:
#use "#blueprintjs/core/src/blueprint" with (
$pt-intent-primary: #5655bc
);
#use "~#blueprintjs/icons/src/blueprint-icons";
#use "~#blueprintjs/select/src/blueprint-select";
#import "~normalize.css";
But I get the same error. It looks like people have managed to do this, but I cannot seem to get it working and I cannot find any step-by-step instruction on what exactly I need to do to just change a variable.
When testing a form, I am using userEvent to type 'hello' into a textbox, then when testing the value of said textbox straight after, using toHaveValue(), it returns the string backwards...
render(<Form />)
userEvent.clear(screen.getAllByRole('textbox')[0])
userEvent.type(screen.getAllByRole('textbox')[0], 'hello')
expect(screen.getAllByRole('textbox')[0]).toHaveValue('hello')
The error in console after running yarn test:
Package versions:
"react-scripts": "^3.4.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.1.9",
I experienced the same thing, and I was previously on jest ^24.8.0, and after upgrading to the latest (jest ^27.2.1) the issue was resolved.
In a CRA based React app I get this error in a webworker file (all code is using Typescript) when I import files that are also imported by normal application code (normal === non-worker) and run the app using the babel dev server in debug mode.
Searching for this error brings me to various module specific issue reports/solutions, which I cannot use, however. But it's clear that this is a React hot reloading problem and I wonder how to solve it, as it keeps me from using my app code also in web workers.
My dev dependencies are:
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.11.11",
"#babel/preset-typescript": "^7.12.7",
"#testing-library/react": "^11.2.3",
"#types/classnames": "^2.2.11",
"#types/color": "^3.0.1",
"#types/d3": "^6.2.0",
"#types/history": "4.7.8",
"#types/jest": "^26.0.20",
"#types/lodash": "^4.14.168",
"#types/node": "^14.14.22",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-test-renderer": "^17.0.0",
"#types/react-window": "^1.8.2",
"#types/resize-observer-browser": "^0.1.5",
"#types/selenium-webdriver": "^4.0.11",
"#types/topojson": "^3.2.2",
"#types/uuid": "^8.3.0",
"#types/ws": "^7.4.0",
"#typescript-eslint/eslint-plugin-tslint": "^4.14.0",
"acorn": "^8.0.5",
"antlr4ts-cli": "^0.5.0-alpha.4",
"eslint": "^7.18.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsdoc": "^31.3.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prefer-arrow": "^1.2.2",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "26.6.0",
"jest-transform-stub": "^2.0.0",
"jest-websocket-mock": "^2.2.0",
"mock-socket": "^9.0.3",
"monaco-editor-webpack-plugin": "^1.9.1",
"monaco-typescript": "^4.2.0",
"raw-loader": "^4.0.2",
"react-app-rewired": "^2.1.8",
"react-scripts": "^4.0.3",
"react-test-renderer": "^17.0.1",
"selenium-webdriver": "^4.0.0-beta.1",
"ts-jest": "^26.5.2",
"tslint": "^6.1.3",
"typescript": "^4.1.3",
"typescript-eslint-parser": "22.0.0",
"webdriver-manager": "^12.1.8",
"webpack": "4.44.2",
"webpack-bundle-analyzer": "^4.4.0",
"worker-loader": "^3.0.8",
"ws": "^7.4.3"
},
The only promising solution I also could apply is: https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213, but it didn't help. I still get the same error. My web worker code is:
/* eslint-disable no-restricted-globals */
/* eslint-disable no-eval */
/* eslint-disable #typescript-eslint/no-unused-vars */
(window as any).$RefreshReg$ = () => {/**/};
(window as any).$RefreshSig$ = () => () => {/**/};
import { ShellInterfaceSqlEditor } from "../../supplement/ShellInterface";
import { PrivateWorker, ExecutionResultType, IConsoleWorkerData } from "./console.worker-types";
const backend = new ShellInterfaceSqlEditor();
const ctx: PrivateWorker = self as any;
The further discussion there about changing the babel loader config is unfortunately beyond me, as I don't configure that myself (what I'm using, however, is react-app-rewired to configure some custom loaders).
What else could I try to fix the issue?
In my case, this error was happening when overwriting Webpack's mode option. After removing the line below I stopped receiving the error.
webpackConfig.mode = 'none'; // this line caused the bug
I believe this is because react-refresh requires webpack to be in mode: 'development' to function properly.
You may want to read about Webpack's modes here: https://webpack.js.org/configuration/mode/. It is also possible that you are setting Webpack mode from the NODE_ENV environment variable.
I tried many of the solutions in this answer and in various Github issues, but none of them resolved the issue for me. Eventually I found a solution via the Webpack sideEffects optimization and config!
tl;dr:
Ensure your Webpack config has an object optimization set and that the optimization object has an attribute sideEffects set to true. Seems like nx and potentially cra or craco defaults this to false, leading to unused React components being imported in WebWorker bundles if they're exported as part of a "barrel" file
If you're importing your own shared ui package which exports React components and some non-React components, then you need to specify the sideEffects config in your package's package.json file to ensure that the React components are marked as "pure" and safe to prune. See below for more details
After inspecting the bundles of my WebWorker, I realized that some React components were being bundled into the worker bundle from worker-loader, even though they weren't being used in the worker. At least one of these cases was happening in our app because we have a shared package which contained some React components and other normal TS utils.
Our WebWorker was importing a value (named export) from this package and for some reason, the entire package was being included in the WebWorker – including the React components that were not being used anywhere! The React Fast Refresh plugin (which is installed / used by CRA by default) then was augmenting our WebWorker bundle with the changes necessary to support hot refresh / reloading (calls to $RefreshReg$ and co).
Some Github issues regarding this problem referenced a Webpack tree shaking optimization called sideEffects, which you can read more about at https://webpack.js.org/guides/tree-shaking/. Here's the relevant bit:
The new webpack 4 release expands on this capability with a way to provide hints to the compiler via the "sideEffects" package.json property to denote which files in your project are "pure" and therefore safe to prune if unused.
In your package's package.json, you can either specify "sideEffects": false to mark the whole package as "pure" and safe to prune if unused, or you can specify the specific exports / paths that do have side effects, eg for us:
"sideEffects": [
"./src/styles/*"
],
However, setting this value didn't work for our app immediately, which was confusing. Eventually, I ran into a thread about this for nx where a very helpful comment noted that their Webpack config was disabling the sideEffects optimization for Webpack: (https://github.com/nrwl/nx/issues/9717#issuecomment-1163533981)
I found that Nx is passing optimization: { sideEffects: false } to webpack, which explicitly turns off tree shaking regardless of your package.json contents. The library that was not being tree shaken in my original issue (lodash-es) already has it's own package.json where it specifies the required setting to facilitate optimal tree shaking, however Nx was turning off tree shaking in Webpack globally, so that it doesn't happen at all for any library or any code in the project.
I tried explicitly setting webpackConfig.optimization.sideEffects = true in my app and boom! Issue resolved, React components being excluded from the WebWorker bundle.
You can try worker-plugin instead of worker-loader. I have been running into the same issue for a long time before trying worker-plugin.
I've also stumbled on this issue on a CRA project
I'm not using typescript for the Web Worker but adding this helped fix the error. (BTW I've only found it thanks to your question. Thanks!)
web.worker.js
if (process.env.NODE_ENV != 'production') {
global.$RefreshReg$ = () => {};
global.$RefreshSig$ = () => () => {};
}
Maybe if you try (global as any) it would work?
Another thing I'm doing is I only import libraries at the top and any code that is used by both main and the worker is added with a require before the usage
e.g.
web.worker.js
const generateSingle = async (client) => {
const mark = `generate for: ${client.id}`;
performance.mark(mark);
const { BillingReportDocument } = require('../pdf/PdfBillingReport');
/* ... */
}
Otherwise I get a different error like "browser is not defined" it's related to emotion/react being used in that file
We are adding infinite scrolling to a table in an old project based on ruby on rails. We tried the library react-infinite but it did not work.
We installed it through bower
"dependencies": {
"bootstrap": "~3.3.7",
"bootstrap-sass": "~3.3.7",
"jquery": "~1.9.1",
"react": "~0.13.3",
"react-simpletabs": "^0.7.0",
"react-bootstrap-treeview": "0.1.0",
"sisyphus": "1.1.3",
"prototypejs": "1.7.1",
"highcharts": "4.2.7",
"js-grid": "1.5.3",
"jquery-colorbox": "1.5.10",
"react-infinite": "*"
}
In application.js, we import it using
//= require react-infinite
Then we use it like this:
<react-infinite containerHeight={200} elementHeight={40}>
<ContentTable
data={this.state.tableData}
filterText={this.state.filterText}
onUserClick={this.handleUserClick}
dataType={this.props.dataType}
showPublic={this.state.publicCheckbox}
/>
</react-infinite>
But it did not make any difference. ContentTable is a customized table. And in the console, there is an error:
How can I make it work on a table? Any help would be appreciated.
How can I identify the dependency that is causing the warning?
Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0....
I understand the changes that are coming with React v16.0. I want to help the dependency resolve the warnings but I don't know who needs help.
Package.json
"dependencies": {
"autosuggest-highlight": "^3.1.0",
"material-ui": "next",
"material-ui-icons": "^1.0.0-alpha.19",
"nuka-carousel": "^2.2.1",
"react": "^15.6.1",
"react-autosuggest": "^9.3.2",
"react-dom": "^15.6.1",
"react-helmet": "^5.1.3",
"react-router-dom": "^4.1.2",
"react-tap-event-plugin": "^2.0.1",
"typeface-roboto": "^0.0.35"
},
"devDependencies": {
"enzyme": "^2.9.1",
"jest-enzyme": "^3.6.1",
"react-scripts": "^1.0.10",
"react-test-renderer": "^15.6.1"
},
You see next to the warning in the console the line of it. Jump to that line in the chrome-debugger, (just click on it)
Set a break-point there
Reload the page, and you'll get there
Next, in the debugger there is the stack tab, open it, to see all the functions path to that line.. You should be able to identify the problematic source