Um erro será exibido no livro de histórias ao criar os seguintes componentes.
# src/components/organisms/ParentComponent/index.tsx
import * as React from 'react';
import ChildrenComponent from 'src/components/molecules/ChildrenComponent/index';
const ParentComponent: React.SFC<{}> = ({ ...props }) => (
<ChildrenComponent />
);
Erro
Module not found: Error: Can't resolve 'src/components/molecules/ChildrenComponent/index' in '/AppRoot/src/components/organisms/ParentComponent'
Isso parece ser causado pelo carregamento com um caminho absoluto, portanto, se você fizer o seguinte, funcionará bem.
import ChildrenComponent from '../../molecules/ChildrenComponent/index';
No entanto, gostaria de evitar esse método tanto quanto possível. Não há maneira de iniciar o livro de histórias sem erros além de especificar pelo caminho relativo?
A aplicação do caminho absoluto é baseada na seguinte descrição de tsconfig.json
.
"compilerOptions": {
"outDir": "build/dist",
"rootDir": "src",
"baseUrl": "."
}
Além disso, desta vez, estamos importando um arquivo stories
escrito na extensão tsx no diretório src
compilado ao invés do diretório build/dist
compilado no livro de histórias desta vez.
Isso é definido em ./storybook/config
, mas defini-lo como build/dist
produzirá resultados semelhantes.
Como este projeto usa design atômico, ele tem aproximadamente a seguinte estrutura de diretório.
src
├── components
│ ├── molecules
│ │ ├── ChildrenComponent
│ │ │ ├── index.tsx
│ │ │ └── index.stories.tsx
│ ├── organisms
│ │ ├── ParentComponent
│ │ │ ├── index.tsx
│ │ │ └── index.stories.tsx
Parecia haver algo parecido com a questão relevante.
No entanto, não chegou a uma solução.
À parte, acredito que existem duas maneiras de resolver esse problema.
A primeira coisa que eu gostaria de perguntar aqui é "Importar componente de caminho absoluto com livro de histórias", o segundo é compilar em um arquivo js
que importa o arquivo tsx
importado com um caminho absoluto como um caminho relativo. Depois disso, aplique o arquivo js
importado com o caminho relativo para o livro de histórias.
Em relação a este último, acho que não é apropriado ouvir esse problema aqui, mas se você conhece, eu gostaria de perguntar sobre esse método também.
Obrigado pelo seu tempo.
Eu não sei como isso funciona para você em seu aplicativo normal (como qual é a sua configuração?), Mas se você colocar seu cwd (assumindo -> cwd/src/components/....
) para resolve.modules
no webpack.config
estendido, provavelmente deve resolver seu problema (no entanto, eu verifiquei com um aplicativo Angular, mas isso realmente não importa)
Meu arquivo .storybook/webpack.config.js
é descrito a seguir.
há um problema aqui?
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
module.exports = (baseConfig, env) => {
const config = genDefaultConfig(baseConfig, env);
config.module.rules.push({
test: /\.(ts|tsx)?$/,
exclude: /node_modules/,
include: [/stories/, /src/],
loader: 'ts-loader'
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
Experimente adicionar algo assim:
const path = require('path');
// blah blah code
module.exports = (baseConfig, env) => {
// blah blah code
config.resolve.modules = [
...(config.resolve.modules || []),
path.resolve('./'),
];
}
Funcionou corretamente !!
Não posso agradecer o suficiente !!!!!!!
@ igor-dv Estou tendo um problema semelhante e tentei sua sugestão (acima), bem como o NormalModuleReplacementPlugin que modifica o caminho resource.request. Nenhum funcionou
Você tem alguma outra sugestão?
Você pode compartilhar seus exemplos de código / webpack.config.js?
.storybook / webpack.config.js
const path =
require ('path'); `
// const webpack = require ('webpack');
const genDefaultConfig = require ('@ storybook / react / dist / server / config / defaults / webpack.config.js');
module.exports = (baseConfig, env) => {
const config = genDefaultConfig (baseConfig, env);
config.module = {
regras: [
{
teste: /.tsx$/,
carregadores: ["ts-loader"],
incluem: path.resolve (__ dirname, '../app/xv/')
},
{
teste: /.scss$/,
carregadores: [
'style-loader',
'css-loader',
'sass-loader? includePaths [] =' + encodeURIComponent (path.resolve (__ dirname, '../app/'))
]
},
{
teste: /.css$/,
loader: 'style-loader! css-loader'
},
{
teste: /.less$/,
loader: 'style-loader! css-loader! less-loader'
},
{
teste: /.js|.ts$/,
excluir: [path.join (__ dirname, 'app / components'), / node_modules /],
loader: 'ng-annotate-loader'
},
{
teste: /.js$/,
excluir: [path.join (__ dirname, 'app / components'), / node_modules /],
loader: 'babel-loader? presets [] = es2015 & presets [] = stage-1 & presets [] = react & cacheDirectory'
}
]
};
config.resolve.modules = [
...(config.resolve.modules || []),
path.resolve('./'),
];
return config;
// ,
// plugins: [
// new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) {
// resource.request = resource.request.includes('xv/') ? '../../app/' + resource.request : resource.request;
// })
// ]
} `
// código
`import * as React from 'react';
import {autobind} de 'xv / util / decorators';
import '../ styles / ActionIcon.scss'; `
// erro
`ERRO em ./app/xv/ui/components/ActionIcon.tsx
Módulo não encontrado: Erro: Não é possível resolver 'xv / util / decorators' em '/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components'
@ ./app/xv/ui/components/ActionIcon.tsx 31: 0-46
@ ./.storybook/stories/actionIcons.js
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack) -hot-middleware / client.js? reload = true ./. storybook / config.js`
com / xv / sendo mapeado para a base do projeto (root / app / xv / *) na construção usual do webpack dev (não storybook)
desculpe pela formatação
Eu tentei diferentes variações da substituição de regex com NormalModuleReplacementPlugin, algumas encontradas em tópicos / questões semelhantes sobre o storybook que não lida com caminhos absolutos
exemplo:
plugins: [
new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) {
resource.request = resource.request.replace(/xv/, '../../app/');
})
]
me dá este erro:
`ERROR in ./.storybook/stories/actionIcons.js
Módulo não encontrado: Erro: Não é possível resolver '../../app//ui/components/Tooltip' in '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories'
@ ./.storybook/stories/actionIcons.js 5: 0-47
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack) -hot-middleware / client.js? reload = true ./.storybook/config.js
`
e esta mudança (adicionando / xv / à string de substituição)
plugins: [
new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) {
resource.request = resource.request.replace(/xv/, '../../app/xv/');
})
]
dá
`ERROR in ./.storybook/stories/actionIcons.js
Módulo não encontrado: Erro: Não é possível resolver '../../app/xv//ui/components/Tooltip' in '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories'
@ ./.storybook/stories/actionIcons.js 5: 0-47
`
quando eu tenho a substituição de caminho correta para caminhos absolutos, não apenas os caminhos relativos são bagunçados, mas o caminho está 'correto' e um erro persiste:
ERROR in ./.storybook/stories/actionIcons.js
Module not found: Error: Can't resolve '../../app/xv/ui/components/Tooltip' in '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories'
Qual é o seu diretório de trabalho (cwd)?
raiz/
Eu começo o livro de histórias do NeXgen-UI (também conhecido como raiz do projeto)
Portanto, tendo este import { autobind } from 'xv/util/decorators';
você provavelmente deve adicionar path.resolve('./app')
a resolve.modules
tudo bem, então agora eu tenho isso
`
config.resolve = {
modules: [
...(config.resolve.modules || []),
path.resolve('./app'),
path.resolve('./')
]
};
return config;
`
e estou recebendo o mesmo:
`ERRO em ./app/xv/ui/components/ActionIcon.tsx
Módulo não encontrado: Erro: Não é possível resolver 'xv / util / decorators' em '/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components'
`
Parece que você precisa adicionar config.resolve.extensions.push('.ts', '.tsx');
também
@ igor-dv Também tentei, mesmo erro. Obrigado pela ajuda sobre este assunto
🤔 Acho que preciso ver a reprodução, então. Você tem um repo público?
Para mim, funcionou adicionando __dirname
a path.resolve
na configuração do meu webpack, assim: (Estou trabalhando em uma configuração de criar-react-app + TypeScript):
config.resolve.modules = [
...(config.resolve.modules || []),
path.resolve(__dirname, "../"),
path.resolve(__dirname, "../src")
];
Minha estrutura de arquivos, ajuste a sua de acordo:
`` `
/raiz
/.storybook
webpack.config.js
/ src
A coisa estúpida que não percebi é que esqueci de adicionar um ../
à minha configuração de resolve.modules
.
Aqui está o que funciona para mim:
// .storybook/webpack.config.js
module.exports = {
...,
resolve: {
modules: [path.resolve(__dirname, "../src"), "node_modules"],
}
}
Isso ocorre porque a configuração do webpack de meu livro de histórias está localizada 1 diretório mais abaixo no dir padrão .storybook
.
Caso alguém esteja olhando para este livro de histórias 5,
const path = require('path');
module.exports = ({ config }) => {
config.resolve.modules.push(path.resolve(__dirname, "../src"));
return config;
};
Sua linda pessoa @ kexinlu1121. Funcionou perfeitamente, obrigado.
A solução da @glocore foi a dica de que eu precisava para que funcionasse. Obrigado!
Eu tive um problema semelhante onde minha importação absoluta funciona em start-storybook
mas não quando eu construo. Vou apenas colocá-lo aqui para referência, se alguém quiser alguma referência.
Estou usando @src
para importação absoluta e fiz funcionar adicionando esta linha:
# /root/.storybook/webpack.config.js
const path = require("path");
module.exports = ({ config }) => {
// ...
// Add absolute path.resolve so storybook can handle absolute import (eg. @src/resources/...)
config.resolve.alias = {
...config.resolve.alias,
"@src": path.resolve(__dirname, "../src"),
};
return config;
};
Para contexto, meu diretório de projeto se parece com este:
/root
.storybook/
webpack.config.js
src/
components/
Espero que ajude :)
@wzulfikar Obrigado pela solução!
Tive esse problema depois de usar a CLI e consegui resolvê-lo modificando meu .storybook / main.js para:
const path = require('path');
module.exports = {
...other settings....,
webpackFinal: async (config) => {
config.resolve.modules = [
...(config.resolve.modules || []),
path.resolve(__dirname, "../src"),
];
return config;
},
}
Olá
Estou usando React / TS
Tive o mesmo problema com meu .storybook / main.js:
const path = require('path');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app",
"@storybook/addon-knobs",
],
webpackFinal: async (config) => {
config.resolve.alias = {
...config.resolve.alias,
'fs': path.resolve(__dirname, 'fsMock.js'),
'child_process': path.resolve(__dirname, 'fsMock.js'),
'net': path.resolve(__dirname, 'fsMock.js'),
'tls': path.resolve(__dirname, 'fsMock.js'),
// "src/types": path.resolve(__dirname, "../src/types"),
// "src/components": path.resolve(__dirname, "../src/components"),
};
config.resolve.modules = [
...(config.resolve.modules || []),
path.resolve(__dirname, "../src"),
];
// config.resolve.extensions.push('.ts', '.tsx');
return config;
},
}
minha estrutura
.storybook
src
├── components
| index.ts
│ ├── ChildrenComponent
│ │ ├── index.tsx
│ │ └── index.stories.tsx
│ ├── ParentComponent
│ │ ├── index.tsx
│ │ └── index.stories.tsx
├── stories
Um componente ParentComponent
import React from "react";
import { ChildrenComponent } from "src/components";
import { ItemType } from "src/types";
export default ({ item }: { item: ItemType }) => {
return (
<p className="hello">
<ChildrenComponent type={item.type} />
<span className="ellipsis">{item.title}</span>
</p>
);
};
O problema vem de src/components
porque eu faço src/components/ChildrenComponent
e funciona.
Não entendi, tentei de tudo aqui e # 333 # 3291 e muitos outros
Uma captura de tela do erro
Alguém pode ajudar?
Comentários muito úteis
Caso alguém esteja olhando para este livro de histórias 5,