Comments (14)
Is there current a way that docz can handle aliases afforded by the paths
option in a given tsconfig.json
file? I have alias @/path/to/component
that resolves to the src
directory and it currently won't work :/
from docz.
@dfee confirmed, I'm getting them as well
from docz.
With the latest version of Docz v2 I was able to utilize TypeScript paths using the following.
// gatsby-node.js
const TSPathsPlugin = require('tsconfig-paths-webpack-plugin');
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
plugins: [new TSPathsPlugin({ configFile: '../tsconfig.json' })]
}
});
};
I hope this helps someone who runs into this. I am utilizing it in my NX repo.
from docz.
@pedronauck , I also need to use modifyBabelRc
, because my aliases are also used in my project's .babelrc
. It looks like this can only be done using a plugin - maybe this should be something that can be used on the config object?
Also, it might be helpful to throw a warning if there are unexpected or incompatible properties found on config or plugin objects - for instance, if I named my plugin function modifyBabelRC
instead of modifyBabelRc
, it would be helpful to know that this isn't recognized and won't be used.
from docz.
I think that change the resolve.modules
directly is not a good option, because we have some paths that docz need to find, so If you change it, probably you'll get an error...
Use .push
or .concat
to add new modules to existent one!
from docz.
@maxguzenski I got it working by creating a simple plugin, it looks like this:
import { createPlugin } from 'docz-core'
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.config')()
/**
* Add support for custom resolvers
*/
const includeResolvers = () =>
createPlugin({
modifyBundlerConfig: (bundler) => {
const merged = merge(bundler, { resolve: baseWebpackConfig.resolve })
return merged
},
})
module.exports = {
source: './src',
plugins: [includeResolvers()],
}
I'm still having some odd issues with it, though - some components work, and some don't. Trying to figure out the cause, I'll follow up here or with another issue.
from docz.
you can use modifyBundlerConfig
directly without a plugin @good-idea
// doczrc.js
export default {
modifyBundlerConfig: (config) => /* ... */
}
from docz.
Release v0.2.7 turns possible to pass modifyBabelRc
option directly without plugins
from docz.
Hi, same question here... I'm developing a component that should be used inside an mdx file, so I'm adding inside tsconfig.json a path that maps the name of the library to the index of the project, but docz doesn't seem to find it :(
from docz.
This works for me:
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
export default {
modifyBundlerConfig: config => {
/*
* use tsconfig paths, e.g.: `import Button from components/Button`
*/
config.resolve.plugins = [
new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })
];
/*
* allow proptype generation with tsconfig.
* https://github.com/pedronauck/docz/issues/240#issuecomment-415689181
*/
const jsxPluginIndex = config.plugins.findIndex(
plugin => plugin.config.id === "jsx"
);
const { loaders } = config.plugins[jsxPluginIndex].config;
const docGenLoaderIndex = loaders.findIndex(loader =>
/react-docgen-typescript-loader/.test(loader.loader)
);
const docGenLoader = loaders[docGenLoaderIndex];
docGenLoader.options = {
tsconfigPath: "./tsconfig.json"
};
return config;
},
typescript: true
};
I still get errors like this at startup:
Could not find dependency version for components/content
But those don't seem to actually affect anything.
from docz.
@dfee Is this still working for you? I have tried your config above but i get the following error
TypeError: Cannot read property 'id' of undefined
at id (D:\Documents\Atto-Byte\Projects\react-component-lib/doczrc.js:47:31)
at Array.findIndex (<anonymous>)
at Object.findIndex [as modifyBundlerConfig] (D:\Documents\Atto-Byte\Projects\react-component-lib/doczrc.js:46:50)
at Bundler.mountConfig (D:\Documents\Atto-Byte\Projects\react-component-lib\node_modules\docz-core\dist\index.js:776:22)
at process._tickCallback (internal/process/next_tick.js:68:7)
from docz.
That's work for me. 👍
from docz.
@stramel I tried to make a gatsby-node.js file at the root of my typescript file like what you have there, but this doesn't seem to work for me. My I should be putting the gatsby-node.js file elsewhere. In my tsconfig file, I have these relative imports:
"paths": {
"@components/*": ["components/*"],
"@env": ["../env.ts"],
"@pages/*": ["pages/*"],
"@styles/*": ["styles/*"],
"@utilities/*": ["utilities/*"],
},
Does anyone know how to get docz to use these relative imports?
from docz.
After a lot of trial and error I got this working similar to @stramel's solution, but also ran into the issue here about the file not being used due to an error. In my case it was a stupid mistake - I was using an import
instead of a require
.
To ensure your gatsby-node.js
file is being used, add a console.error('Error')
to the gatsby-node.js
file, this way you know when you fire up Docz the file is being correctly loaded and used. If you don't see the error in your console the file isn't being loaded.
from docz.
Related Issues (20)
- gh repo clone github/docs HOT 1
- Port not used from custom gatsby-config.js file
- Can't resolve '@emotion/core' HOT 9
- Error on first install. nError handler for invocation 'building-schema', error was 'TypeError: (0 , _buildASTSchema.getDescription) HOT 2
- Test out possibly breaking changes on security updates made from dependabot pull-requests HOT 3
- pnpm bare installs broken HOT 2
- What font is used in Docz image? HOT 3
- Error in setting up development environment HOT 4
- Release notes for 2.4.0 are missing HOT 1
- Multiple errors after installing docz HOT 11
- Error while initializing babel in docz HOT 3
- Can't resolve '@babel/runtime/helpers/esm/regeneratorRuntime'
- Error: Cannot find module 'typescript' docz HOT 2
- Add a visible notice on the documentation on why docz will not work
- Can we say that the project is Dead now? What are the alternatives? HOT 1
- how to use in react 18 HOT 4
- Error docz build
- When I try to run the project in the development environment, I get the following error: HOT 1
- An error occurred while accessing the file after local packaging.
- Would it be possible in a react native project with Typescript to read the tsx components inside node_modules ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docz.