Untuk memperjelas, apakah Anda menggunakan dua konfigurasi webpack? Apakah Anda menambahkan loader ke keduanya?

Ya, saya memiliki file webpack.config asli di ./config/webpack.config.dev.js yang saya require() dari dalam ./config/.storybook/webpack.config.dev.js dan kemudian mengekspor webpack.config lain hanya untuk buku cerita.

Beri tahu saya jika saya tidak menjelaskannya

@dsiaudvytis Ini adalah file konfigurasi webpack lain hanya untuk buku cerita

var path = require('path');
var webpack = require('webpack');

var config = require('../webpack.config.dev.js'); // Getting the original webpack.config
var Loaders = require('../webpack.loaders.js'); // Getting the same loaders that I use for the original config file

module.exports = {
    plugins: [
        new webpack.NoErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        loaders: Loaders.concat([
            {
                test: /\.scss$/,
                loader: 'style!css!sass!resolve-url!sass?sourceMap&sourceComments'
            },
            {
                test: /\.css$/,
                loader: 'style!css?importLoaders=1'
            }
        ])
    }
};

Saya pikir Anda mungkin perlu menambahkan /\.(js|jsx)$/ loader ke dalam konfigurasi webpack buku cerita itu juga.

Saya menduga baris var config = require('../webpack.config.dev.js'); tidak benar-benar berguna.

Permasalahan yang sama. Saya memiliki CRA 1.3.3 dan getstorybook 3.2.3. Tidak mengutak-atik konfigurasi webpack sama sekali. Anehnya, ini menunjukkan React app bukannya Create React App ketika getstorybook dijalankan (karena getstorybook terlihat di bawah devDependencies , bukan di dependencies untuk react-scripts , yang dipasang CRA react-scripts bawah dependencies sekarang).

Saya mencoba:

1. Membuat konfigurasi webpack di .storybook dan hanya membutuhkan konfigurasi dev webpack CRA
2. Menyalin seluruh konfigurasi dev webpack CRA dan memodifikasinya agar tidak menggunakan require() di pemuat
3. Membuat file .babelrc di dalam .storybook
4. Membuat file .babelrc di root proyek

Tidak ada yang berhasil. Mungkin getstorybook terprogram untuk menggunakan loader konfigurasi webpack kustomnya?

+1, saya punya masalah yang sama

@ Temoto-kun bagaimana tepatnya tampilan kesalahan dalam kasus Anda?
@dbrtt pertanyaan yang sama untuk Anda

@ Hypnosphi itu persis kesalahan yang sama dengan OP. Rupanya, webpack buku cerita tidak dapat mentranspilasi JSX karena entah bagaimana konfigurasinya tidak berfungsi.

Bisakah Anda membuat repo GitHub dengan sedikit mereproduksi masalah Anda?

@Hypnosphi Saya mereplikasi contoh dari penggunaan buku cerita dengan Webpack, jadi webpack.config.js lain dan itu berhasil (dan masih berfungsi)

@Hypnosphi ini dia: https://github.com/Temoto-kun/create-react-app-storybook-repro

Apa yang saya lakukan adalah saya hanya menjalankan create-react-app dan getstorybook untuk menginisialisasi. Versi kedua generator sama dari laporan saya.

@ Temoto-kun

Itu aneh. Saya mengkloning repo Anda dan saya dapat memulai buku cerita tanpa kesalahan. Saya mencobanya dengan benang:

yarn
yarn storybook

Dan dengan npm 3 dan 5:

npm install
npm run storybook

start skrip tampaknya tidak berfungsi, karena Anda kehilangan direktori public CRA:

$ npm start

> [email protected] start /Users/jetbrains/IdeaProjects/create-react-app-storybook-repro
> react-scripts start

Could not find a required file.
  Name: index.html
  Searched in: ~/create-react-app-storybook-repro/public

Mungkin karena Node? Saya memiliki 7.7.1.

Dan BTW saya juga menjalankan Windows 10.

Ada info lain yang bisa saya berikan?

Berfungsi untuk saya dengan node v7.7.1 di mac. Akan menguji pada Windows.

Node yang node 7 telah mencapai akhir dukungan Juni ini

UPD: berfungsi untuk saya di Win10 dengan node v7.7.1 juga

Mencoba memperbarui Node saya ke 8.4.0. Masih tidak berhasil.

@ Temoto-kun Apakah pesan kesalahan Anda masih sama?

@ Temoto-kun, masih belum mencoba demo Anda, tapi karena @Hypnosphi berhasil menjalankannya tanpa masalah, saya mungkin menganggap ini terkait dengan lingkungan yang bersih. Apakah Anda mencoba menghapus semua file lock dan node_modules dan menginstalnya lagi?

cara termudah untuk melakukannya adalah git clean -fdx (menghapus semua yang tidak ada di git)

@ igor-dv @Hypnosphi Saya mencoba:

1. git clean -fdx
2. Hapus package-lock.json karena (1) tidak menghapusnya
3. npm install
4. npm run storybook

Nggak. Masih error yang sama.

@ Temoto-kun Jalankan saja buku cerita pada proyek Anda tanpa masalah (MacOS Sierra 10.12, node 5.3.0 jadi versi lama). Sudahkah Anda mengakses mesin Linux?

Saya mengalami masalah yang sama, tampaknya itu terjadi ketika saya menginstal addon storyshots dan menggunakan pemuatan modul dinamis. Pada dasarnya ini menemukan contoh cerita dinamis di node_modules dan gagal ketika mencoba memasukkannya bersama dengan kode saya.

Saya dapat mengatasi ini hanya dengan memasukkan folder yang ingin saya evaluasi di 'config.js':

const req = require.context('../', true, /.*\/src\/*\.stories\.js$/)
function loadStories() {
  req.keys().forEach(filename => req(filename))
}

Saya belum beruntung mendapatkannya untuk mengecualikan node_modules (sepertinya const req = require.context('../', true, /^((?!node_modules).)*\.stories\.js$/) seharusnya berfungsi, tetapi saya mendapatkan kesalahan yang sama)

@dbrrt Maaf, saya tidak memiliki mesin Linux. Hanya menggunakan macOS 10.12.6 (Node 8.1.4) dan Windows 10.

@ Temoto-kun Saya menggunakan konfigurasi yang hampir sama untuk macOS (10.12.6) dan Node 8.2.1 seperti Anda, dan saya dapat menjalankan buku cerita dengan benar. Versi buku cerita mana yang Anda gunakan? Sudahkah Anda mencoba memperbarui @storybook/cli ?

Saya memperbaiki masalah ini dengan melihat beberapa file webpack.config.js dari contoh yang dibagikan oleh buku cerita. Dalam proyek yang sedang saya kerjakan, mereka memutuskan untuk pindah ke generator styleguide lain tetapi saya berhasil membuatnya berfungsi sebelum memindahkannya jadi jika seseorang ingin melihatnya, ini file kerja saya webpack.config :

var path = require('path');

module.exports = {
    module: {
        rules: [
            // Transform all ES6 files to plain old ES5.
            {
                test: /\.(js|jsx)$/,
                exclude: [/bower_components/, /node_modules/, /styles/],
                loader: 'babel-loader',
                include: path.resolve(__dirname, '../../src')
            },
            // Load images.
            {
                test: /\.(gif|jpe?g|png)$/,
                loader: 'url-loader?limit=25000',
                query: {
                    limit: 10000,
                    name: 'static/media/images/[name].[hash:8].[ext]'
                }
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader', 'resolve-url-loader?sourceMap', 'sass-loader?sourceMap'],
                include: path.resolve(__dirname, '../../')
            },
            {
                test: /\.css$/,
                loader: 'style!css?importLoaders=1'
            },
            // Fonts
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff',
                query: {
                    name: 'static/media/files/[name].[hash:8].[ext]'
                }
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'babel-loader',
                        query: {
                            presets: ['airbnb'],
                        },
                    },
                    {
                        loader: 'react-svg-loader',
                        query: {
                            jsx: true,
                        },
                    },
                ],
            },
        ],
    },
    /**
     * Resolve import paths from global.SRCDIR
     * <strong i="8">@see</strong>  http://moduscreate.com/es6-es2015-import-no-relative-path-webpack/
     */
    resolve: {
        modules: [
            path.resolve(__dirname, '../../src'),
            path.resolve(__dirname, '../../node_modules'),
        ],
        extensions: ['.js', '.jsx']
    }
};

Hai kawan,

Jika saya memiliki repositori dengan komponen bersama di berbagai proyek dan saya melakukan npm install dengan perpustakaan komponen-bersama-pribadi saya, komponen dan buku cerita saya yang dibagikan ada di dalam node_modules ... Saya tidak dapat menjalankan buku cerita dari proyek induk Saya mendapatkan ini :

Anda mungkin memerlukan loader yang sesuai untuk menangani jenis file ini.

Apa solusinya?

Terima kasih,
Lucas

@unutoiul mungkin membuat file webpack kustom untuk buku cerita. Itu melakukan pekerjaan untuk saya.

terima kasih banyak, apakah kamu punya contoh?

Tentu ! Ada satu di halaman Buku Cerita, https://storybook.js.org/configurations/custom-webpack-config/
Beri tahu saya jika Anda bisa mengatasi masalah ini. Saya mengadaptasi contoh di atas dan berfungsi seperti pesona pada konfigurasi saya dengan scss.

Terima kasih telah membantu @dbrrt !

ya solusi saya adalah:

webpack.config.js

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }, {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"],
                include: path.resolve(__dirname, '../')
            }
        ]
    }
}

Apakah ada cara untuk menginstal paket tertentu di luar node_modules menggunakan npm install?

@unutoiul Hum ya, tapi itu sudah tidak ada hubungannya dengan topik ini lagi :)
Apakah Anda memikirkan paket pribadi atau sesuatu yang bersifat publik?

pribadi saya akan mengatakan ... saya menemukan solusi git submodule menambahkan repositori

Saya menghadapi kesalahan serupa. Masih belum bisa memperbaikinya

Kesalahan:

ERROR in ./src/index.js
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type.
|     render() {
|         return (
|             <div>
|                 <h1>Welcome to React Boilerplate</h1>
|             </div>

Konfigurasi Webpack:

'use strict';

const webpack = require('webpack');
const htmlWebpack = require('html-webpack-plugin');

const commonPaths = require('./common-paths');
console.log(commonPaths.srcPath);
module.exports = {
    // Entry: First file webpack starts(your dependency graph)
    entry: {
        app: commonPaths.inputPath,
    },
    // Output: How and where to put bundles and format them
    output: {
        filename: 'bundle.js',
        path: commonPaths.outputPath,
    },
    // Loaders:  How to treat files before adding to dependency graphs
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                include: [commonPaths.inputPath],
                loader: ['babel-loader'],
                query: {
                    presets: ['es2015', 'react'],
                    plugins: ['transform-runtime'],
                },
                options: {
                    cacheDirectory: true,
                },
            },
        ],
        rules: [
            {
                test: /\.png$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1000,
                        },
                    },
                ],
            },
        ],
    },
    // Plugins: Extremely Customisable
    plugins: [new webpack.ProgressPlugin(), new htmlWebpack()],
};

Seluruh proyek tersedia di React-Redux-BoilerPlate

permasalahan yang sama

permasalahan yang sama

@helloncanella @pouyajabbarisani Bisakah Anda menjelaskan sedikit? Apakah Anda membuat file konfigurasi webpack kustom untuk buku cerita?

Saya mengalami masalah yang sama persis dan saya hanya perlu menghapus file webpack.config.js di folder .storybook. Setelah itu mengambil build webpack create-react-app.

Ini disebabkan karena memiliki file JSX di node_modules. Perhatikan bahwa dalam konfigurasi webpack di atas (dan saya mengalami masalah yang sama) yang memiliki masalah tidak termasuk node_modules atau hanya menyertakan direktori sumber untuk proyek tersebut. Salah satu solusinya adalah mengeluarkan npm run eject dan kemudian menambahkan direktori node_modules ke konfigurasi webpack.

Saya tidak yakin apakah ada solusi yang tidak perlu dikeluarkan - cari sekarang.

@badave Saya tidak berpikir itu terkait dengan JSX secara langsung, tetapi untuk format apa pun yang tidak ditangani oleh webpack, jika Anda ingin memiliki penurunan harga pemuatan webpack, maka instal parser yang tepat, dan restart, sama untuk JSX atau SCSS :)

@helloncanella @pouyajabbarisani Saya telah menetapkan titik src/index.js alih-alih src/ yang memperbaiki masalah saya.

Jalur Umum

/* Location of all Paths used */

const path = require('path');

module.exports = {
    srcPath:path.resolve(__dirname, '../src/'),
    inputPath: path.resolve(__dirname, '../src/index.js'),
    outputPath: path.resolve(__dirname, '../public')
}

Webpack.config.js

'use strict';

const webpack = require('webpack');
const htmlWebpack = require('html-webpack-plugin');

const commonPaths = require('./common-paths');

module.exports = {
    // Entry: First file webpack starts(your dependency graph)
    entry: {
        app: commonPaths.inputPath,
    },
    // Output: How and where to put bundles and format them
    output: {
        filename: 'bundle.js',
        path: commonPaths.outputPath,
        publicPath: '/',
    },
    // Loaders:  How to treat files before adding to dependency graphs
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                include: [commonPaths.srcPath],
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['es2015', {
                                modules: false
                            }], 'react', 'airbnb'
                        ],
                        plugins: ['transform-runtime'],
                        cacheDirectory: true,
                    },
                },
            },
            {
                test: /\.png$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1000,
                    },
                }, ],
            },
        ],
    },
    // Plugins: Extremely Customizable
    plugins: [
        new webpack.ProgressPlugin(),
        new htmlWebpack({
            template: `${commonPaths.outputPath}/index.html`,
        }),
    ],
};

Saya mengalami masalah ini di modul apa pun dengan JSX di dalamnya dengan @storybook/[email protected] . Saya berasumsi bahwa sudah ada penanganan untuk BEJ di luar kotak - tetapi ternyata tidak.

Saya membuatnya berfungsi dengan konfigurasi ini:

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['react'],
                        },
                    },
                ],
            },
        ],
    },
};

Halo, saya mengalami masalah yang sama. Saya rasa saya memiliki kedua loader dan saya mengimpor css di file jsx utama saya. Ini adalah konfigurasi webpack saya. Tolong bantu!

`const path = require('path');

module.exports = {
  entry: './client/src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'client/dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react', 'env'],
          },
        },
      },
      {
        test: [/\.css$/],
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
        ],
      },
    ],
  },
  devtool: 'source-map',
};`

@monsooness apakah itu webpack.config.js dalam folder .storybook? Sepertinya itu akan menjadi konfigurasi untuk aplikasi Anda.

Untuk mengonfigurasi konfigurasi webpack buku cerita, Anda memerlukan webpack.config.js di folder .storybook.

https://storybook.js.org/configurations/custom-webpack-config/

@ndelangen Anda dapat memiliki webpack.config.js di folder .storybook , ini tidak wajib, tetapi dalam banyak kasus Anda memerlukan modul / parser / aturan khusus untuk memulai aplikasi buku cerita Anda, lalu ada di file ini Anda harus menambahkan ini.

Sepertinya proyek yang terhubung dengan npm tidak didukung atau semacamnya? Saya mendapatkan kesalahan ini saat menautkan proyek React, membuatnya agak sulit untuk menggunakan paket pribadi. Parcel mendukung paket dengan "source": true di package.json untuk mengkompilasinya juga, mungkin yang serupa dapat didukung?

@tj Saya pikir masalahnya adalah bahwa path file tersebut cocok dengan ignore regex untuk babel loader atau tidak cocok dengan include regex.

Dapatkah Anda mencoba menggunakan konfigurasi webpack khusus yang mengubah regex tersebut sehingga file Anda akan melewati babel loader?

Saya sama sekali tidak familiar dengan webpack, saya berusaha keras untuk menghindarinya: D. Akan luar biasa jika apa pun defaultnya mendukung hal-hal yang ditautkan npm tetapi saya akan mencoba

@ndelangen contoh repositori untuk mereproduksi masalah:

https://github.com/Luchanso/storybook-typescript-problem

Output log:

• Webpack
• Kesalahan

Mungkin nanti saya akan mencoba bermain dengan webpack.config.js

@Luchanso apakah Anda berhasil membuatnya bekerja?

@AssisrMatheus Saya akan mengelolanya pada akhir pekan

@AssisrMatheus , @ d-spiridonov, @ lucasavila00 Saya membuat contoh repo dengan solusi masalah storybook-typescript-problem .

@Luchanso Contoh Anda bekerja! Ini menyelamatkan hariku, terima kasih.

@Luchanso Contoh Anda bekerja! Ini menghemat tahun saya, terima kasih.

Saya menghadapi masalah yang sama di sini

Project Package.json

{
   "dependencies": {
       "@babel/preset-react": "^7.9.4",
      "babel-plugin-root-import": "^6.5.0",
    "material-icons-react": "^1.0.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "styled-components": "^5.1.0"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "storybook": "start-storybook"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@storybook/react": "^5.3.18",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

Proyek webpack.config.js

module.exports = {
    entry: './src/app',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    }
};

.storybook / main.js

module.exports = {
    stories: ['../src/components/**/*.stories.js', '../src/styles/*.stories.js'],
    webpackFinal: (config) => console.dir(config, { depth: null }) || config,
};

Cerita

import React from 'react';
import { Button } from '@storybook/react/demo';

export default { title: 'Button' };

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
    <Button>
        <span role="img" aria-label="so cool">
            😀 😎 👍 💯
    </span>
    </Button>
);

keluaran dari webpackFinal

{ mode: 'development',
  bail: false,
  devtool: '#cheap-module-source-map',
  entry:
   [ '/Users/macbook/repo/node_modules/@storybook/core/dist/server/common/polyfills.js',
     '/Users/macbook/repo/node_modules/@storybook/core/dist/server/preview/globals.js',
     '/Users/macbook/repo/.storybook/generated-entry.js',
     '/Users/macbook/repo/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true' ],
  output:
   { path:
      '/Users/macbook/repo/node_modules/@storybook/core/dist/public',
     filename: '[name].[hash].bundle.js',
     publicPath: '' },
  plugins:
   [ VirtualModulesPlugin {
       _staticModules:
        { '/Users/macbook/repo/.storybook/generated-entry.js':
           '\n              import { configure } from \'@storybook/react\';\n              module._StorybookPreserveDecorators = true;\n\n              configure([require.context(\'../src/components\', true, /^\\.\\/(?:(?:(?!\\.)(?:(?:(?!(?:|\\/)\\.).)*?)\\/)?(?!\\.)(?=.)[^\\/]*?\\.stories\\.js\\/?)$/),require.context(\'../src/styles\', false, /^\\.\\/(?:(?!\\.)(?=.)[^\\/]*?\\.stories\\.js\\/?)$/)\n              ], module);\n            ' } },
     HtmlWebpackPlugin {
       options:
        { template:
           '/Users/macbook/repo/node_modules/@storybook/core/dist/server/templates/index.ejs',
          templateContent: false,
          templateParameters: [Function: templateParameters],
          filename: 'iframe.html',
          hash: false,
          inject: false,
          scriptLoading: 'blocking',
          compile: true,
          favicon: false,
          minify:
           { collapseWhitespace: true,
             removeComments: true,
             removeRedundantAttributes: true,
             removeScriptTypeAttributes: false,
             removeStyleLinkTypeAttributes: true,
             useShortDoctype: true },
          cache: true,
          showErrors: true,
          chunks: 'all',
          excludeChunks: [],
          chunksSortMode: 'none',
          meta: {},
          base: false,
          title: 'Webpack App',
          xhtml: false,
          alwaysWriteToDisk: true },
       childCompilerHash: undefined,
       assetJson: undefined,
       hash: undefined,
       version: 4 },
     DefinePlugin {
       definitions:
        { 'process.env':
           { NODE_ENV: '"development"', NODE_PATH: '""', PUBLIC_URL: '"."' },
          NODE_ENV: '"development"' } },
     WatchMissingNodeModulesPlugin { nodeModulesPath: '/Users/macbook/repo/node_modules' },
     HotModuleReplacementPlugin {
       options: {},
       multiStep: undefined,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     CaseSensitivePathsPlugin {
       options: {},
       logger:
        Console {
          log: [Function: bound consoleCall],
          debug: [Function: bound consoleCall],
          info: [Function: bound consoleCall],
          dirxml: [Function: bound consoleCall],
          warn: [Function: bound consoleCall],
          error: [Function: bound consoleCall],
          dir: [Function: bound consoleCall],
          time: [Function: bound consoleCall],
          timeEnd: [Function: bound consoleCall],
          timeLog: [Function: bound timeLog],
          trace: [Function: bound consoleCall],
          assert: [Function: bound consoleCall],
          clear: [Function: bound consoleCall],
          count: [Function: bound consoleCall],
          countReset: [Function: bound consoleCall],
          group: [Function: bound consoleCall],
          groupCollapsed: [Function: bound consoleCall],
          groupEnd: [Function: bound consoleCall],
          table: [Function: bound consoleCall],
          Console: [Function: Console],
          markTimeline: [Function: markTimeline],
          profile: [Function: profile],
          profileEnd: [Function: profileEnd],
          timeline: [Function: timeline],
          timelineEnd: [Function: timelineEnd],
          timeStamp: [Function: timeStamp],
          context: [Function: context],
          [Symbol(counts)]: Map {},
          [Symbol(kColorMode)]: 'auto' },
       pathCache: {},
       fsOperations: 0,
       primed: false },
     ProgressPlugin {
       profile: false,
       handler: undefined,
       modulesCount: 500,
       showEntries: false,
       showModules: true,
       showActiveModules: true },
     DefinePlugin { definitions: {} },
     NormalModuleReplacementPlugin { resourceRegExp: /core-js/, newResource: [Function] } ],
  module:
   { rules:
      [ { test: /\.(mjs|jsx?)$/,
          use:
           [ { loader: 'babel-loader',
               options:
                { cacheDirectory: '/Users/macbook/repo/node_modules/.cache/storybook',
                  presets:
                   [ [ '/Users/macbook/repo/node_modules/@babel/preset-env/lib/index.js',
                       { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' } ],
                     '/Users/macbook/repo/node_modules/@babel/preset-react/lib/index.js',
                     '/Users/macbook/repo/node_modules/@babel/preset-flow/lib/index.js' ],
                  plugins:
                   [ '/Users/macbook/repo/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                     '/Users/macbook/repo/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                     '/Users/macbook/repo/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                     [ '/Users/macbook/repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
                       { sourceMap: true, autoLabel: true } ],
                     '/Users/macbook/repo/node_modules/babel-plugin-macros/dist/index.js',
                     '/Users/macbook/repo/node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
                     '/Users/macbook/repo/node_modules/babel-plugin-add-react-displayname/index.js',
                     [ '/Users/macbook/repo/node_modules/babel-plugin-react-docgen/lib/index.js',
                       { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' } ] ] } } ],
          include: [ '/Users/macbook/repo' ],
          exclude: [ '/Users/macbook/repo/node_modules' ] },
        { test: /\.md$/,
          use:
           [ { loader: '/Users/macbook/repo/node_modules/raw-loader/dist/cjs.js' } ] },
        { test: /\.css$/,
          sideEffects: true,
          use:
           [ '/Users/macbook/repo/node_modules/style-loader/dist/cjs.js',
             { loader: '/Users/macbook/repo/node_modules/css-loader/dist/cjs.js',
               options: { importLoaders: 1 } },
             { loader:
                '/Users/macbook/repo/node_modules/postcss-loader/src/index.js',
               options:
                { ident: 'postcss', postcss: {}, plugins: [Function: plugins] } } ] },
        { test:
           /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
          loader: '/Users/macbook/repo/node_modules/file-loader/dist/cjs.js',
          query: { name: 'static/media/[name].[hash:8].[ext]' } },
        { test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
          loader: '/Users/macbook/repo/node_modules/url-loader/dist/cjs.js',
          query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } } ] },
  resolve:
   { extensions: [ '.mjs', '.js', '.jsx', '.json' ],
     modules: [ 'node_modules' ],
     alias:
      { 'babel-runtime/core-js/object/assign':
         '/Users/macbook/repo/node_modules/core-js/es/object/assign.js',
        react: '/Users/macbook/repo/node_modules/react',
        'react-dom': '/Users/macbook/repo/node_modules/react-dom' } },
  optimization:
   { splitChunks: { chunks: 'all' },
     runtimeChunk: true,
     minimizer:
      [ TerserPlugin {
          options:
           { test: /\.m?js(\?.*)?$/i,
             chunkFilter: [Function: chunkFilter],
             warningsFilter: [Function: warningsFilter],
             extractComments: true,
             sourceMap: true,
             cache: true,
             cacheKeys: [Function: cacheKeys],
             parallel: true,
             include: undefined,
             exclude: undefined,
             minify: undefined,
             terserOptions: { mangle: false, keep_fnames: true } } } ] },
  performance: { hints: false } }

Akhirnya saya tidak yakin mengapa tidak menjorok ke dalam

Terima kasih

Silakan tempel kesalahan terminal lengkap di sini @ pfmartins4 jika tidak saya tidak tahu apa yang salah.