mongkuen / gatsby-plugin-root-import Goto Github PK
View Code? Open in Web Editor NEWGatsby plugin to set Webpack to resolve import root
License: MIT License
Gatsby plugin to set Webpack to resolve import root
License: MIT License
Issue: When using the plugin in conjunction with redux-toolkit and gatsby v3 I get the following error:
ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'redux' in '[file path]\gatsby-starter-hello-world\node_modules\react-redux\es\connect'
If you're trying to use a package make sure that 'redux' is installed. If you're
trying to use a local file make sure that the path is correct.
File: node_modules\react-redux\es\connect\mapDispatchToProps.js:1:0
failed Building development bundle - 11.424s
ERROR in ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js 3:0-79
Module not found: Error: Can't resolve 'redux' in '[file-path]\gatsby-starter-hello-world\node_modules\@reduxjs\toolkit\dist'
@ ./src/redux/store.ts 4:0-50 6:15-29
@ ./src/pages/index.tsx 7:0-32 11:11-16
@ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 16:11-18:5
@ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
ERROR in ./node_modules/react-redux/es/connect/mapDispatchToProps.js 1:0-43
Module not found: Error: Can't resolve 'redux' in '[file-path]\gatsby-starter-hello-world\node_modules\react-redux\es\connect'
@ ./node_modules/react-redux/es/connect/connect.js 5:0-70 50:71-105
@ ./node_modules/react-redux/es/index.js 4:0-40 12:0-179
@ ./src/pages/index.tsx 6:0-39 10:42-50
@ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 16:11-18:5
@ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
webpack compiled with 2 errors
For some extra context, my current config has worked with the plugin in a Gatsby v2 environment.
I have been using this plugin for a while and it works great.
Today, I wanted to see if I could use it for an npm package that I installed. As such, I added the following to the options object:
FontAwesome: path.join(__dirname, '@fortawesome/react-fontawesome'),
However, it does not seem to work.
Is it possible to create an alias for an npm package? If so, how?
Thanks.
Using npm 7.20.5:
╰─ npm audit fix
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/gatsby
npm ERR! gatsby@"^3.1.2" from the root project
npm ERR! peer gatsby@">=2.0.0" from [email protected]
npm ERR! node_modules/gatsby-awesome-pagination
npm ERR! gatsby-awesome-pagination@"^0.3.8" from the root project
npm ERR! 18 more (gatsby-plugin-feed, gatsby-plugin-image, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@">=1" from [email protected]
npm ERR! node_modules/gatsby-plugin-root-import
npm ERR! gatsby-plugin-root-import@"^2.0.6" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/gatsby
npm ERR! peer gatsby@">=1" from [email protected]
npm ERR! node_modules/gatsby-plugin-root-import
npm ERR! gatsby-plugin-root-import@"^2.0.6" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I'm not to sure why that definition is not correct.
// gatsby-config.js
const path = require('path')
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-root-import',
options: {
"~": path.join(__dirname, 'src/')
}
}
]
}
This means you should be able to import modules like such:
// To import gatsbyProject/src/yourFolder/YourComponent.js
import YourComponent from '~/yourFolder/YourComponent' // working example
import YourComponent from '~yourFolder/YourComponent' // wanted but not work
If I manually specify paths like this, absolute imports work:
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-root-import',
options: {
components: path.join(__dirname, 'src/components'),
utilities: path.join(__dirname, 'src/utilities'),
},
},
],
];
But using root
doesn't work:
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-root-import',
options: {
root: path.join(__dirname, 'src'),
},
},
],
];
Nor does specifying the plugin without options:
module.exports = {
plugins: [
'gatsby-plugin-root-import',
],
];
gatsby
: 2.16.4
gatsby-plugin-root-import
: 2.0.5
Other than this it works great. Thanks in advance 👍
warn Plugin gatsby-plugin-root-import is not compatible with your gatsby version 4.0.1 - It requires gatsby@^2 || ^3
I cannot seem to get this to work with Gatsby v2:
gatsby version = 2.0.0-beta.16
node version = v6.14.2
npm version = 3.10.10
gatsby-plugin-root-import = ^1.0.0
gatsby-config.js
var config = require("./config") module.exports = { siteMetadata: { title: config.siteName, }, plugins: [ /* other plugins */ 'gatsby-plugin-root-import' ] }
myComponent.js
import React from 'react' import config from '~/config' const myComponent= () => ( /* my component code, uses config.api.url */ ) export default myComponent
When I do a gatsby develop
ERROR Failed to compile with 1 errors This dependency was not found: * ~/config in ./src/components/common/myComponent.js To install it, you can run: npm install --save ~/config ✖ 「wdm」: ERROR in ./src/components/common/myComponent.js Module not found: Error: Can't resolve '~/config' in '/src/components/common'
Hi there,
I am a gatsby beginner and added the plugin with following settings to my gatsby-config.js in order to allow root imports:
{
resolve: 'gatsby-plugin-root-import',
options: {
src: path.join(__dirname, 'src'),
components: path.join(__dirname, 'src/components'),
graphql: path.join(__dirname, 'src/graphql'),
images: path.join(__dirname, 'src/images'),
layouts: path.join(__dirname, 'src/layouts'),
pages: path.join(__dirname, 'src/pages'),
services: path.join(__dirname, 'src/services'),
utils: path.join(__dirname, 'src/utils'),
},
}
The root import itself is working but I have errors regarding eslint. I am using vscode btw.
I tried adding alias settings to my .eslintrc like described here.
So I added the following settings to my .eslintrc
"settings": {
"import/resolver": {
"node": {
"paths": ["src", "node_modules"]
},
"alias": {
"map": [
["src", "./src"],
["components", "./src/components"],
["graphql", "./src/graphql"],
["images", "./src/images"],
["layouts", "./src/layouts"],
["pages", "./src/pages"],
["services", "./src/services"],
["utils", "./src/utils"]
]
}
}
}
Also tried it without the "node" settings.
I am probably not the first trying to run gatsby root imports with eslint and vscode. Is it possible for someone who is running a similar setup to share his experience and/or settings?
Best regards
When running my app, everything is running fine as expected. However, if I run a test using jest, the test can't make the connection of the path in my gatsby config file. Below is a hiearchy of what I am running into.
gatsby-config:
...
{
resolve: "gatsby-plugin-root-import",
options: {
reducers: path.join(__dirname, "src/reducers"),
sagas: path.join(__dirname, "src/sagas"),
web: path.join(__dirname, "src/web"),
test: path.join(__dirname, "src/web"), <-------- test cases don't live on the root
},
},
....
Test Error:
● Test suite failed to run
Cannot find module 'web/components/graphs/line-graph' from 'src/web/components/card/index.js'
Require stack:
src/web/components/card/index.js
src/web/components/card/test/index.test.js
1 | import React from "react"
2 | import { string, array } from "prop-types"
> 3 | import LineGraph from "web/components/graphs/line-graph"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.