WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.73.0 compiled with 1 warning in 2053 ms
Related
Question
How can I add bootstrap and react-bootstrap to my custom SPFX Webpart?
Steps I have taken
Add bootstrap, react-bootstrap and #types/bootstrap
Overwrite defaulf bootstrap variables with my scss file
Import scss file into my application
What is the problem?
Currently the custom webpart is not building and exits with an error I can't do nothing with. There is no semicolon missing.
This line is causing the error: #import "~bootstrap/scss/bootstrap"
Because I would like to overwrite certain default sass bootstrap variables I have to load bootstrap second. With Sharepoint's spcomponentloader this is not really possible.
Bootstrap css loads fine with the following code, however my variables are not taken into consideration cause there are loaded on second place.
SPComponentLoader.loadCss("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");
Error
exited with code 2
Error - [webpack] 'dist':
./lib/webparts/webpartDgdmHelloworld/components/Theme.module.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./lib/webparts/webpartDgdmHelloworld/components/Theme.module.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(40:4) Missed semicolon
# ./lib/webparts/webpartDgdmHelloworld/components/Theme.module.css 1:14-155
# ./lib/webparts/webpartDgdmHelloworld/components/Theme.module.scss.js
# ./lib/webparts/webpartDgdmHelloworld/components/WebpartDgdmHelloworld.js
# ./lib/webparts/webpartDgdmHelloworld/WebpartDgdmHelloworldWebPart.js
Same happens when trying to use react-bootstrap in my SPFX webpart. The following occurs when importing it:
Error - [tsc] node_modules/#popperjs/core/lib/createPopper.d.ts(1,73): error TS1005: ';' expected.
Error - [tsc] node_modules/#popperjs/core/lib/modifiers/applyStyles.d.ts(1,13): error TS1005: '=' expected.
Your bootstrap theme file is not a module, you need to compile it directly (remove the .module. thing). Means, rename Theme.module.scss to Theme.scss. This may show a warning, ignore it - it's okay in your case, you don't use modules.
Import it simply with: import './Theme.scss'
That should do. Probably there is no need for SPComponentLoader in your case.
Regarding the react-bootstrap, it's a different story. It is compatible with typescript 3.9, SPFx is using typescript 3.7 out of the box. The easiest may be to upgrade your SPFx to use 3.9 instead of 3.7. To do so:
> npm uninstall -D #microsoft/rush-stack-compiler-3.7
> npm install -D #microsoft/rush-stack-compiler-3.9
Then modify the line in tsconfig:
"extends": ..../rush-stack-compiler-3.7/",
with:
"extends": ..../rush-stack-compiler-3.9/",
Keep in mind that this is not supported by Microsoft (they support only what they have tested properly), so you are basically on your own here.
I have react app that used bootstrap 4.3.1 as node modules.When i am building the app its giving below error TypeScript error in /codebuild/output/src478180495/src/app-name/node_modules/#popperjs/core/lib/createPopper.d.ts(1,13): '=' expected. TS1005 > 1 | import type { OptionsGeneric, Modifier, Instance, VirtualElement } from "./types"; It was fine earlier. error coming up today.
It is due to a new syntax introduced by Typescript type-only-imports-and-export
Upgrade your typescript module in package.json to > 3.8.0 and #type definitions should solve this issue.
Heres the related Stackoverflow topic.
I ran into same problem while coding a web part for SPFx, which is slightly different, but since search led me here, so I'll leave the answer for anyone in the future.
while updated typescript to 4.4 when running gulp serve i got typescript version: 3.7.7. Steps to remedy:
run npm i #microsoft/rush-stack-compiler-3.9 This variant selects TypeScript 3.9
in tsconfig.json change extends to "extends": "./node_modules/#microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
in tslint.json remove "no-use-before-declare": true, as it will cause error Error - [tslint] no-use-before-declare is deprecated. Since TypeScript 2.9. Please use the built-in compiler checks instead.
We are trying to upgrade our react project to latest packages including relay (7.0.0). Our application builds and works but we are getting this error message in the console (during build) on every file where we import graphql from 'babel-plugin-relay/macro'. We are doing exactly like documented here adding relay
The error is "There was an error trying to load the config "relay" for the macro imported from "babel-plugin-relay/macro. Please see the error thrown for more information." It is coming from \node_modules\babel-plugin-macros\dist\index.js in getConfig( ).
To understand how other projects were configured, I downloaded another sample relay project / installed it and it had the same problem. Interesting enough there was this recent post in that app's issues list error loading config
The solution noted worked for me (adding that noted .babel-plugin-macrosrc.yml file with empty relay plugin?) but I am not understanding why this is needed or what was causing this seemingly benign error message?
I've recently started using TypeScript with Expo. I've done all the linter/formatter integrations like typescript-eslint so I can catch most of the errors during coding. To check if the code compiles, I run npx tsc every once in a while and fix accordingly.
One thing that I haven't fully grasped yet is why my app builds successfully even when there are numerous compile errors. I expect (and prefer) to see a red screen error for every compile error rather than the app build successfully and me find it out later. For example,
function square<T>(x: T): T {
console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'.
return x * x;
}
is a typical TypeScript error that (I believe?) can be easily checked at compile time. I want it to result in a big red screen error and the build to fail.
I'm quite new to TypeScript so it's possible that I'm missing something very important. What exactly is causing this leniency and is there a way to enforce stricter checks?
The first thing to understand is that Typescript is a superset of Javascript, and in this case it doesn't actually get type checked during compilation.
Essentially what happens is Babel just strips out the Typescript and converts it to Javascript, which then gets compiled into the js bundles.
You can take a look at the first line of the following Babel docs as well as the caveats:
https://babeljs.io/docs/en/next/babel-plugin-transform-typescript
Since Babel does not type-check, code which is syntactically correct, but would fail the TypeScript type-checking may successfully get transformed, and often in unexpected or invalid ways.
What I would suggest is extending your build command to first include tsc or rather Typescript compilation, with noEmit set to true in your tsconfig.
Update: I found another instance where this applies recently when adding jest and typescript to a project. At the bottom of the Jest docs they actually state the same thing:
https://jestjs.io/docs/en/getting-started#using-typescript
However, there are some caveats to using TypeScript with Babel. Because TypeScript support in Babel is transpilation, Jest will not type-check your tests as they are run. If you want that, you can use ts-jest.
The straight answer to this question is: Babel, strips out all typescript marks before compiling. Therefore you won't see it erroring out in the cli.
Description
I can't get an initial React Native app to run, following a basic tutorial. The error seems to have to do with UIUserInterfaceIdiomCarPlay.
Reproduction Steps and Sample Code
Following the tutorial here https://facebook.github.io/react-native/releases/0.23/docs/tutorial.html#content
I created a new React Native project react-native init AwesomeProject
Then went into the directory, and ran react-native run-ios
Note I also tried from Xcode, and the myriad fixes online, but still no dice. This is the error I got:
/Users/lauracressman/Desktop/AwesomeProject/node_modules/react-native/React/Base/RCTPlatform.m:26:10: error: use of undeclared identifier 'UIUserInterfaceIdiomCarPlay'; did you mean 'UIUserInterfaceIdiomPad'?
case UIUserInterfaceIdiomCarPlay:
^~~~~~~~~~~~~~~~~~~~~~~~~~~
UIUserInterfaceIdiomPad
In module 'UIKit' imported from /Users/lauracressman/Desktop/AwesomeProject/node_modules/react-native/React/Base/RCTPlatform.m:12:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator9.2.sdk/System/Library/Frameworks/UIKit.framework/Headers/UIDevice.h:33:5: note: 'UIUserInterfaceIdiomPad' declared here
UIUserInterfaceIdiomPad NS_ENUM_AVAILABLE_IOS(3_2), // iPad style UI
^
/Users/lauracressman/Desktop/AwesomeProject/node_modules/react-native/React/Base/RCTPlatform.m:26:10: error: duplicate case value 'UIUserInterfaceIdiomPad'
case UIUserInterfaceIdiomCarPlay:
^
/Users/lauracressman/Desktop/AwesomeProject/node_modules/react-native/React/Base/RCTPlatform.m:22:10: note: previous case defined here
case UIUserInterfaceIdiomPad:
^
2 errors generated.
Additional Information
React Native version: 0.42.3
Platform: iOS
Development Operating System: MacOS
Dev tools: Xcode, command line
Someone was recently facing the same problem with that error message Use of undeclared identifier 'UIUserInterfaceIdiomCarPlay'; did you mean 'UIUserInterfaceIdiomPad'?. He commented out lines 26 & 27 from node_modules/react-native/React/Base/RCTPlatform.m and apparently got it to work. It might be related to using an outdated version of Xcode