Storybook: Saya tidak dapat mengimpor dengan jalur absolut di Buku Cerita

Dibuat pada 24 Jul 2018 · 25Komentar · Sumber: storybookjs/storybook

Versi: kapan

@ buku cerita / addon-tindakan: 3.4.8
@ buku cerita / addon-links: 3.4.8
@ buku cerita / addon-storyshots: 3.4.8
@ buku cerita / addons: 3.4.8
@ buku cerita / bereaksi: 3.4.8
Bereaksi: 16.4.2
TypeScript: 2.9.2

Tingkah laku

Kesalahan akan ditampilkan di buku cerita saat membuat komponen berikut.

# 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 />
);

Kesalahan
Module not found: Error: Can't resolve 'src/components/molecules/ChildrenComponent/index' in '/AppRoot/src/components/organisms/ParentComponent'

Hal ini tampaknya disebabkan oleh pemuatan dengan jalur absolut, jadi jika Anda melakukan hal berikut ini berfungsi dengan baik.
import ChildrenComponent from '../../molecules/ChildrenComponent/index';

Namun, saya ingin menghindari metode ini sebisa mungkin. Apakah tidak ada cara untuk memulai buku cerita tanpa kesalahan selain menentukan berdasarkan jalur relatif?

Penerapan jalur absolut didasarkan pada deskripsi tsconfig.json .

"compilerOptions": {
  "outDir": "build/dist",
  "rootDir": "src",
  "baseUrl": "."
}

Juga, kali ini kita mengimpor file stories ditulis dalam ekstensi tsx dalam direktori src dikompilasi daripada menyusun direktori build/dist pada buku cerita kali ini.

Ini disetel di ./storybook/config , tetapi menyetelnya ke build/dist akan menghasilkan hasil yang serupa.

Karena proyek ini menggunakan desain atom, kira-kira memiliki struktur direktori berikut.

src
├── components
│    ├── molecules
│    │   ├── ChildrenComponent
│    │   │   ├── index.tsx
│    │   │   └── index.stories.tsx
│    ├── organisms
│    │   ├── ParentComponent
│    │   │   ├── index.tsx
│    │   │   └── index.stories.tsx

Masalah terkait

Sepertinya ada sesuatu seperti masalah yang relevan.
Namun, itu tidak mencapai solusi.

333, # 3438

Penyimpangan

Selain itu, saya yakin ada dua cara untuk mengatasi masalah ini.

Hal pertama yang saya ingin bertanya di sini adalah untuk "komponen path absolut Impor dengan buku cerita", yang kedua adalah untuk mengkompilasi ke js berkas yang impor mengimpor tsx berkas dengan path absolut sebagai jalur relatif. Setelah itu, terapkan file js diimpor dengan jalur relatif ke buku cerita.

Mengenai yang terakhir, menurut saya tidak tepat untuk mendengarkan masalah ini di sini, tetapi jika Anda mengetahuinya, saya ingin bertanya tentang metode itu juga.

Terima kasih atas waktunya.

react question / support typescript

Sumber

mrsekut

👍2

Komentar yang paling membantu

Jika ada yang melihat ini untuk buku cerita 5,

const path = require('path');

module.exports = ({ config }) => {
  config.resolve.modules.push(path.resolve(__dirname, "../src"));
  return config;
};

kexinlu1121 pada 8 Mei 2019

👍36 ❤34 🎉12 🚀8

Semua 25 komentar

Saya tidak tahu bagaimana cara kerjanya untuk Anda di aplikasi reguler Anda (seperti apa pengaturan Anda?), Tetapi jika Anda akan meletakkan cwd Anda (dengan asumsi -> cwd/src/components/.... ) ke resolve.modules dalam perpanjangan webpack.config , itu mungkin akan menyelesaikan masalah Anda (saya telah memeriksanya dengan aplikasi Angular, tetapi itu tidak terlalu penting)

igor-dv pada 25 Jul 2018

File .storybook/webpack.config.js dijelaskan sebagai berikut.
Apakah ada masalah disini?

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;
};

mrsekut pada 25 Jul 2018

Coba tambahkan sesuatu seperti ini:

const path = require('path');

// blah blah code

module.exports = (baseConfig, env) => {

  // blah blah code

  config.resolve.modules = [
    ...(config.resolve.modules || []),
    path.resolve('./'),
  ];
}

igor-dv pada 25 Jul 2018

👍22 🎉12 ❤9 😄5

Ini bekerja dengan baik !!
Saya tidak bisa cukup berterima kasih !!!!!!!

mrsekut pada 25 Jul 2018

u-r-welcome

igor-dv pada 25 Jul 2018

😄10 🚀5 🎉3 👀1

@ igor-dv Saya mengalami masalah serupa, dan telah mencoba saran Anda (di atas), serta NormalModuleReplacementPlugin yang mengubah jalur resource.request. Tidak ada yang berhasil

Apakah Anda punya saran lain?

lukeAnderson2015 pada 1 Agu 2018

Bisakah Anda membagikan contoh kode / webpack.config.js Anda?

igor-dv pada 1 Agu 2018

.storybook / webpack.config.js

const path = membutuhkan ('path']; `
// const webpack = membutuhkan ('webpack');
const genDefaultConfig = membutuhkan ('@ buku cerita / react / dist / server / config / defaults / webpack.config.js');

module.exports = (baseConfig, env) => {
const config = genDefaultConfig (baseConfig, env);
config.module = {
aturan: [
{
tes: /.tsx$/,
pemuat: ["ts-loader"],
termasuk: path.resolve (__ dirname, '../app/xv/')
},
{
test: /.scss$/,
pemuat: [
'style-loader',
'css-loader',
'sass-loader? includePaths [] =' + encodeURIComponent (path.resolve (__ dirname, '../app/'))
]
},
{
test: /.css$/,
loader: 'style-loader! css-loader'
},
{
tes: /.less$/,
loader: 'style-loader! css-loader! less-loader'
},
{
tes: /.jsi>.ts$/,
kecualikan: [path.join (__ dirname, 'app / components'), / node_modules /],
loader: 'ng-annotate-loader'
},
{
tes: /.js$/,
kecualikan: [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;
//     })
// ]

} `

// kode

`import * as React from 'react';

impor {autobind} dari 'xv / util / decorators';

import '../ styles / ActionIcon.scss'; `

// kesalahan

`ERROR di ./app/xv/ui/components/ActionIcon.tsx

Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan 'xv / util / decorators' di '/ 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`

dengan / xv / dipetakan ke dasar proyek (root / app / xv / *) di build dev webpack biasa (bukan buku cerita)

maaf untuk formatnya

Saya telah mencoba berbagai variasi penggantian regex dengan NormalModuleReplacementPlugin, beberapa ditemukan di utas / masalah serupa tentang buku cerita yang tidak menangani jalur absolut

contoh:

plugins: [ new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) { resource.request = resource.request.replace(/xv/, '../../app/'); }) ]

beri saya kesalahan ini:

`ERROR di ./.storybook/stories/actionIcons.js

Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '../../app//ui/components/Tooltip' di '/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
`

dan perubahan ini (menambahkan / xv / ke string pengganti)

plugins: [ new webpack.NormalModuleReplacementPlugin(/xv/, function(resource) { resource.request = resource.request.replace(/xv/, '../../app/xv/'); }) ]

memberi

`ERROR di ./.storybook/stories/actionIcons.js

Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '../../app/xv//ui/components/Tooltip' in '/Users/lukasanderson/workspace/NeXgen-UI/.storybook/stories'

@ ./.storybook/stories/actionIcons.js 5: 0-47
`

ketika saya memiliki pengganti jalur yang benar untuk jalur absolut, tidak hanya jalur relatifnya yang kacau, tetapi juga jalurnya 'benar' dan kesalahan terus berlanjut:

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'

lukeAnderson2015 pada 1 Agu 2018

Apa direktori kerja Anda (cwd)?

igor-dv pada 1 Agu 2018

akar/

.storybook
aplikasi
- xv
--- ui
---- komponen
--- utils

lukeAnderson2015 pada 1 Agu 2018

Saya memulai buku cerita dari NeXgen-UI (alias root proyek)

lukeAnderson2015 pada 1 Agu 2018

Jadi memiliki import { autobind } from 'xv/util/decorators'; Anda mungkin harus menambahkan path.resolve('./app') ke resolve.modules

igor-dv pada 1 Agu 2018

👍1

baiklah, jadi sekarang saya punya ini

`
config.resolve = {

    modules: [

        ...(config.resolve.modules || []),

        path.resolve('./app'),

        path.resolve('./')

    ]
};

return config;

dan saya mendapatkan yang sama:

`ERROR di ./app/xv/ui/components/ActionIcon.tsx

Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan 'xv / util / decorators' di '/ Users / lukasanderson / workspace / NeXgen-UI / app / xv / ui / components'
`

lukeAnderson2015 pada 1 Agu 2018

Sepertinya Anda juga perlu menambahkan config.resolve.extensions.push('.ts', '.tsx');

igor-dv pada 2 Agu 2018

👍1

@ igor-dv Saya mencobanya juga, kesalahan yang sama. Terima kasih atas bantuannya

lukeAnderson2015 pada 2 Agu 2018

🤔 Kalau begitu, saya pikir saya perlu melihat reproduksinya. Apakah Anda memiliki repo publik?

igor-dv pada 2 Agu 2018

Bagi saya, ini bekerja dengan menambahkan __dirname ke path.resolve di konfigurasi webpack saya, seperti ini: (Saya sedang mengerjakan pengaturan create-react-app + TypeScript):

config.resolve.modules = [
  ...(config.resolve.modules || []),
  path.resolve(__dirname, "../"),
  path.resolve(__dirname, "../src")
];

Struktur file saya, sesuaikan milik Anda:

``
/akar
/.storybook
webpack.config.js
/ src

glocore pada 26 Mar 2019

👍10 🚀4 ❤3

Hal bodoh yang gagal saya sadari adalah saya lupa menambahkan ../ ke konfigurasi resolve.modules .

Inilah yang berhasil untuk saya:

// .storybook/webpack.config.js
module.exports = {
  ...,
  resolve: {
    modules: [path.resolve(__dirname, "../src"), "node_modules"],
  }
}

Ini karena konfigurasi webpack buku cerita saya terletak 1 direktori lebih dalam di default .storybook dir.

gerrytan pada 11 Apr 2019

👍3

Jika ada yang melihat ini untuk buku cerita 5,

const path = require('path');

module.exports = ({ config }) => {
  config.resolve.modules.push(path.resolve(__dirname, "../src"));
  return config;
};

kexinlu1121 pada 8 Mei 2019

👍36 ❤34 🎉12 🚀8

Anda orang cantik @ kexinlu1121. Ini bekerja dengan sempurna, terima kasih.

titchimoto pada 18 Jul 2019

😄2

Solusi @glocore adalah petunjuk yang saya butuhkan agar berfungsi. Terima kasih!

kumarashwin pada 18 Sep 2019

🎉1

Saya memiliki masalah serupa di mana impor absolut saya berfungsi dalam start-storybook tetapi tidak saat saya membuatnya. Saya hanya akan menaruhnya di sini untuk referensi jika seseorang menginginkan referensi.

Saya menggunakan @src untuk impor absolut dan membuatnya berfungsi dengan menambahkan baris ini:

# /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;
};

Untuk konteksnya, direktori proyek saya terlihat seperti ini:

/root
  .storybook/
    webpack.config.js
  src/
    components/

Semoga membantu :)

wzulfikar pada 27 Jul 2020

❤3 🎉3 👍3 🚀2

@wzulfikar Terima kasih atas solusinya!

klikstermkd pada 31 Jul 2020

👍1

Saya mendapatkan masalah ini setelah menggunakan CLI dan saya dapat mengatasinya dengan memodifikasi .storybook / main.js saya menjadi:

const path = require('path');

module.exports = {
  ...other settings....,

  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../src"),
    ];

    return config;
  },

}

chidioguejiofor pada 1 Okt 2020

🎉1 👍1

Halo
Saya menggunakan React / TS
Saya mendapat masalah yang sama .storybook / main.js saya:

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;
  },
}

struktur saya

.storybook
src
├── components
|     index.ts
│   ├── ChildrenComponent
│    │  ├── index.tsx
│    │  └── index.stories.tsx
│   ├── ParentComponent
│    │    ├── index.tsx
│    │    └── index.stories.tsx
├── stories

Komponen 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>
  );
};

Masalahnya datang dari src/components karena saya melakukan src/components/ChildrenComponent itu berhasil.

Saya tidak mengerti, saya mencoba semuanya di sini dan # 333 # 3291 dan banyak lainnya

Tangkapan layar kesalahan