We used to have react-scripts#4.0.3 and I am trying to update on react-scripts#5.0.1. Unfortunately after going into polyfill problem (https://github.com/facebook/create-react-app/issues/11756) and hopefully solving it by aliases I ran into another problem with SCSS files...
Application runs without any problem, everything works fine, but after the compilation I get webpack warning:
WARNING in ./src/scss/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[4]!./src/scss/index.scss)Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme"
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.css"
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import"
* and more ...
I am not able to get rid of this warning. I tried following imports:
#import 'uikit/src/scss/mixins-theme';
#import '~uikit/src/scss/mixins-theme';
#import 'uikit/src/scss/mixins-theme.scss';
#import '~uikit/src/scss/mixins-theme.scss';
If I import it with .scss, it just change the invalid values to:
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import.scss"
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import.scss.css"
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import.scss.sass"
I have this problem with multiple files and I have no clue if I solved the relative paths (I basically added absolute ones everywhere) and that error message is changing, but because of I do not see full error log I have no clue if these errors are just "moving" to lower position and I get the top 3 of them or if it is solved. But this one is weird as I do not have any other option how to write the import.
This mixins-theme are imported in imported scss of imported scss of imported scss which is inside the index.scss (so there is multiple nested imports)
Ok, we have found the problem, according to:
https://github.com/facebook/create-react-app/issues/12329
This what is written in the CRA tutorial seems to be not working:
https://create-react-app.dev/docs/adding-a-sass-stylesheet/
We had to remove the SASS_PATH completely to get rid of the warnings
Related
I have generated a React project with create-react-app using the TypeScript template. I've installed Sass via npm install sass, while CSS modules were already supported by the generated template.
I've created a common set of variables within the styles/common.scss file. I wanted to import and use the variables from the file in the stylesheet of my component. The recommended way to do this seems to be the #use directive, but I was unable to get to work.
Relevant files within my project structure:
components/
custom/
Custom.module.scss
Custom.tsx
styles/
common.scss
In this scenario components/custom/Custom.module.scss tries to import and use a variable from styles/common.scss with #use "styles/common.scss". While I don't get any specific errors related to the #use directive, attempting to reference any variables from the common stylesheet results in the following error: SassError: Undefined variable.
Things I've tried so far:
Proceeding the path with ~: #use "~styles/common.scss" yields the same error.
Different combinations of adding underscore to the common stylesheet, as well as removing extensions from the path in #use: same results.
Replacing #use with #import "styles/common.scss" works as expected: the variables are available in the CSS module.
However, since the #import is set to be deprecated, I'm wondering how to get #use to work and what is the root of the issue. Note that CSS modules themselves work as expected, and I'm able to import them correctly within the tsx files.
Given a default create-react-app setup, the correct way to import a module via #use is to omit the file extension (.scss) and the proceeding underscore. So, for example, styles/_colors.scss can be imported with #use "styles/colors".
However, by default each variable (etc.) from the imported file will require a prefix to be used. So, for example, to reference $pink from the imported _colors.scss file, you'd have to write colors.$pink. To change the prefix, you can choose an alias with as in the #use directive. For example, #use "styles/colors" as c; would allow the variables to be accessed with a c. prefix. To remove the prefix altogether, use the * alias.
Additionally, adding an _index.scss file allows using entire folders with specifying individual files. Use #forward directive in the _index.scss to choose which modules are available when importing the folder.
So, to sum it up, the file structure should look roughly like this:
styles/_colors.scss
$pink: #ff00ff;
styles/_index.scss: optional, allows importing multiple modules in 1 step.
#forward "styles/colors";
components/custom/Custom.module.css
#use "styles" as *;
// Or: #use "styles/colors" as *;
// Now $pink can be referenced without an alias.
I am working with a React app w/webpack configured to de-duplicate LESS files imported into multiple stylesheets with the standard #import 'my-file.less' syntax.
If webpack sees that variables.less is imported by 2 children .less files, it will only add the code from variables.less once in the output bundle.
If I, instead, use the reference syntax with my #import statements, will this prevent webpack from being able to de-dupe as outlined above?
In my webpack config file, i have multiple entry points:-
entry: {
bundle: "./src/index1.js",
rUI: "./other/src/js/ui/index2.js"
},
In index1.js file, all imports are getting resolved, but in index2.js which looks like following
import someModule from "./components/SomeModule/SomeModule";
export default SomeModule;
it's not able to resolve someModule (though the relative path is correct and file exits) and gives error - Cannot find module "./components/SomeModule/SomeModule" on browser console...
However, if I bring the entire contents of someModule.js, there is no issues.. which means that there is some problem with path. Not able to figure out why...
Any help is highly appreciated.
Not really a way to solve your problem, but if you are having trouble with import paths, I'd recommend having a look to something like babel-root-import pluging.
It has saved me so many headaches.
I solved it. Though the same code worked using require instead of import. But to make the same code work, I had to add additional preset - es2015 and react. Something like
"babel?presets[]=es2015,presets[]=react,presets[]=stage-0,plugins[]=transform-object-rest-spread"
I am trying to do a POC on Typescript with AngularJS and Grunt. I did not find a lot of documentation that clearly explains the process.
I see that when I add the all the typescript references in _all.ts, It just works. But I need to understand the why. Who parses the _all.ts to make it work?
Folder Structure
anggen
-.tmp
-app
-blocks
-common
-images
...
-styles
-404.html
-_all.ts
-app.ts
-favicon.ico
-index.html
-bower_components
-node_modules
-test
-typings
-.bowerrc
-.editorconfig
-.gitattributes
-.gitignore
-.jscsrc
-.jshintrc
-.travis.yml
-.yo-rc.json
-bower.json
-Gruntfile.js
-package.json
-README.md
-tsd.json
-tslint.json
TypeScript landscape has evolved quite a lot. _all.ts is a very old workflow (before tsconfig.json became a thing). The compiler would parse it to find all the files that make the compilation context
For new code
* One should use tsconfig.json
* Use modules (recommend --module commonjs)
* Use a module loader (recommend webpack).
The XXX are just names that I need to keep confidential.
Compiling module com.XXX.XXX.XXX_Test
Validating newly compiled units
Ignored 12 units with compilation errors in first pass.
Compile with -strict or with -logLevel set to TRACE or DEBUG to see all errors.
Scanning for additional dependencies: file:/D:/Eclipse/Indigo/Workspace/XXX%20Test/src/com/XXX/XXX/client/Restlet.java
Computing all possible rebind results for 'com.wai.XXX.client.proxy.DonglesProxy'
Rebinding com.XXX.XXX.client.proxy.DonglesProxy
Checking rule <generate-with class='org.restlet.rebind.ClientProxyGenerator'/>
[ERROR] Errors in 'file:/D:/Eclipse/Indigo/Workspace/XXX%20Test/src/com/XXX/XXX/client/proxy/DonglesProxy.java'
[ERROR] Line 11: No source code is available for type org.restlet.resource.ClientProxy; did you forget to inherit a required module?
[ERROR] Unable to find type 'com.XXX.XXX.client.proxy.DonglesProxy'
[ERROR] Hint: Previous compiler errors may have made this type unavailable
[ERROR] Hint: Check the inheritance chain from your module; it may not be inheriting a required module or a module may not be adding its source path entries properly
Here is what the console tells me when I try to do a GWT Compile on my project. What I don't understand that I've included the 'org.restlet.jar' into the buildpath of the project and have the following imports in the DonglesProxy source code:
import org.restlet.resource.ClientProxy;
import org.restlet.resource.Put;
Anyone any ideas?
I'm new to Java and the whole Web Application process so my knowledge is a bit lacking. This is actually someone else's project that has been left unfinished so I'm trying to debug/understand someone else code whilst learning as I go along...nightmare :(
Any help would be greatly appreciated!
Cheers
Kev
You must use :
import org.restlet.client.resource.ClientProxy;
import org.restlet.client.resource.Get;
import org.restlet.client.resource.Post;
import org.restlet.client.resource.Result;
to define the proxies; Take notice of the "client" part;
The referenced imports must be part of the GWT distribution;
You have to add it to your projects xml file. That is to com.XXX.XXX.XXX_Test.gwt.xml or something like that.
You have to add this line there,
<inherits name='org.restlet.whateverClass.xmlfilename />'
This means you are pointing to the xml file named xmlfilename.xml at the path org.restlet.whteverclass
So say for example if i am using sencha ui libraries jar, I will add,
<inherits name='com.sencha.gxt.ui.GXT' />
So here there will should be a xml file called GXT.xml at the path 'com.sencha.gxt.ui'