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"
Related
I am using a monorepo, where my modules are stored mostly one level above the project.
In jest.config.ts, I am defining setupFiles as:
{
setupFiles: ["<rootDir>/../node_modules/#core/src/setupJest.ts"]
}
I would like to use an absolute path since the library directories could change
{
setupFiles: ["#core/src/setupJest.ts"]
}
I tried using roots, moduleDirectories, modulePaths to define additional path, but it did not work (this is suggested by a lot of replies to similar questions on S/O, no worked for me).
Does anyone have an idea what else I can do. A bit lost, so will try anything.
Thank you
in case anyone is interested.
I solved it by:
Defining sec/setupJest.ts as an “export” (setupJest) in the #core library’s package.json.
Using
const setupJestFile = require.resolve(‘setupJest’)
to resolve
the path to the file.
4. Using setupJestFile variable in setupFiles
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
Is it possible to have Webpack include image assets in the build bundle without:
Using an import statement for that specific resource (which can be done with Asset Modules in Webpack 5)
Not writing it into a static HTML document as an src attribute (which can be done with HtmlWebpackPlugin)
I would have some React JSX code that reference image resources, either as a src attribute in an <img> element, or have some resource string, say var imgUrl = './Assets/img.svg', and some element later using this string as an attribute.
Currently I could manually copy the entire /Assets folder into /dist, but I would have unused resources in /Assets and would like Webpack to figure out which ones are actually used.
Oh, now I understand, and unfortunately, this is not possible.
React won't detect the value of the src of the image because it will consider it just a string, and not a path. It won't figure out which file are you talking about. The only way to use it the way you want to do it is by having those images in the public folder, which you said you didn't want to do.
In my personal opinion what I usually do with static images if the app is small, is putting them all together in a file by importing them and exporting an object with all of them together. Finally every time I want to use any image I just import that file and use whichever image I want. With this approach, at the end of the day, I'll end up with just one file (bundle). It's just an approach, there are many different ways to do this but it's relative to the case
I don't know if I understood correctly, but maybe you could require the asset inline like this...
<img src={require('./Assets/img.svg')} />
If this is not what you are looking for, maybe you can explain me more in detail... I've quite a lot of experience playing with webpack, I think I may have a solution for you
This is maybe stupid question, but I am new and this problem took me a couple of hours :/. I am trying to import component like this:
import * as test from "../../../../common/containers/sidebar/Sidebar";
and file where I write this line is located in :
src/pages/example/containers/example.
above path of 'Sidebar' is correct but react gives me 'Sidebar' is not defined.
I found some kind of similar questions but it didn't help me so please if anyone has anny suggestions write below, huge thanks! and one more thing is this correct way to import files like this - I mean '../../../../' <- this looks like little weird for me.
You can add rootDir option to your jest config. And then just import components as from the global path.
For example if root is your src folder. Just import pages/example/containers/example
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).