There are lots of resources out there explaining how to do absolute imports in React with create-react-app
But I want to add absolute imports to an existing project which wasn't created through create-react-app. Is anyone aware of a guide for how to do this?
Not sure if this is the best way to do it...
But adding aliases in my resolver in webpack.config
resolve: {
extensions: ['.js', '.jsx'],
alias: {
src: path.resolve(__dirname, 'app')
}
}
Lets me replace imports like this
import Component from './../../src/Component';
With this
import Component from 'src/Component';
See https://webpack.js.org/configuration/resolve/
Related
I could really do with a webpack guru to help explain if this is possible.
Here's my directory listing:
components/
Editor/
Editor.jsx
style.module.scss
UIListing/
UIListing.jsx
style.module.scss
In addition to a webpack alias to resolve within the components directory:
resolve: {
alias: {
['~']: `${path}/components/`
},
extensions: ['.js', '.jsx']
So when I currently import Editor:
import Editor from '~/Editor/Editor
This is fine for me. But, is there any way (without moving the components out of their directory that I can resolve it this way instead?
import Editor from '~/Editor
Figured a solution:
containers/
Editor.jsx
components/
Editor/
Editor.jsx
style.module.scss
UIListing/
UIListing.jsx
style.module.scss
Editor.jsx:
import Editor from '../components/Editor/Editor'
export default Editor
webpack.config.js:
resolve: {
alias: {
['~']: `${path}/containers/`
},
extensions: ['.js', '.jsx']
Unfortunately it does require some extra work, but in my case this proves useful as I have a boilerplate UI kit which needs to be easy to get coding from the get go.
import Editor from '~/Editor'
I have my create-react-app bootstrap workspace setup to support module imports using #app/ as my root module.
I achieve this by adding this to my webpack config
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
'#app': path.resolve(__dirname, '../src')
},
However this does not seem to work with my jest tests. Anytime something is imported with #app the import is not resolved.
Anyone have a good solution to this
I'm trying to configure webpack to use clean import in my react app:
import { userConstants } from 'constants';
instead of:
import { userConstants } from '../../constants';
In webpack.config.js I defined:
resolve: {
modules: [
"node_modules",
helpers.root('client/app')
],
extensions: ['*', '.js', '.jsx']
},
This worked very well until I added a folder called constants. I wonder if some kind of conflict might appear with my node_modules since I get an error that disappears when I change the folder name to _constants:
WARNING in ./client/app/actions/user.actions.js 83:12-25 "export
'userConstants' was not found in 'constants'
My question: Should I define an alias in the webpack config for each of my folders? components, containers, constants, reducers, actions, services?
yes you have to use alias for each of your folder like this:
alias: {
constants: path.resolve(APP_DIR, 'constants'),
api: path.resolve(APP_DIR, 'api'),
components: path.resolve(APP_DIR, 'components'),
reducers: path.resolve(APP_DIR, 'reducers'),
}
This would be helpful in resolving and importing modules. And make sure you have correct APP_DIR
I have two project using webpack. Now I want to bring one project as module of other project. I can get the two bundle created but don't know how to import from the other bundle.
Elaborating a bit:-
Lets say the other file from which i want to import looks like as follows:-
index2.js (Bundled as bundleTwo)
import SomeCompoent from "./components/SomeCompoent/SomeCompoent";
module.exports = {SomeCompoent}
and in the file (is in another bundle - bundleOne) below I want to import the component (somecomponent):-
index1.js (in bundleOne)
import {SomeCompoent} from "bundleTwo";
but here bundleTwo is undefiend
Any help is highly appreciated
One way that I have figured out myself, is that using alias this can be achieved.
To make this line import {SomeCompoent} from "bundleTwo"; work, bundleTwo can be defined in alias :-
config:{
resolve: {
alias: {
"bundleTwo": path.join(__dirname, "<path_to_the_bundleTwo>")
}
....
If you want to use webpack only,then just set the libraryTarget to 'umd' in bundletwo webpack configuration.
In order to be able to import this module, you need to export your bundle.
output: {
libraryTarget: 'umd',// make the bundle export
filename: "index.js",
path: path.resolve(__dirname, "dist"),
}
However, this can also be achieved by just using Babel to transpile your ES6 code to ES5 code.
babel index2.js --out-file dist/index2.js
Now set the main in package.json to "dist/index2.js"
Now you can use it like
import {SomeCompoent} from "bundleTwo";
You can also create a gulp script for that
gulp.task('js', function () {
return gulp.src(['packages/**/*.js', "!**/*.test.js"])
.pipe(babel({
plugins: ['transform-runtime']
}))
.pipe(gulp.dest('dist'));
});
If I understand it correctly, with resolve: {extensions: ['', '.js', '.jsx']} webpack setup, the following statement
import Home from './Home'
will look for './Home.js', './Home.jsx', './Home/index.js', './Home/index.jsx'
My questions is, in addition to above 4 files, how can I teach webpack to also look for './Home/Home.js', './Home/Home.jsx' using the same import statement.
In your resolve, you need to specify a root path like so:
resolve: {
root: path.resolve('.'),
extensions: ['', '.jsx', '.js'],
}
This tells webpack to begin at the root of directory.