Storybook: Error: las exportaciones no están definidas

Recibo export 'MatrixEffect' was not found in '../dist/index' en la terminal. Pero puedo importar el módulo en un tiempo de ejecución de nodo simple (no puedo usarlo ofc, pero al menos sé que se puede importar).

esto podría ayudar ya que aún no tenemos documentos oficiales: https://github.com/storybooks/storybook/issues/3270

Esto sigue sin funcionar...

Acabo de encontrarme con un problema con el mismo mensaje de error en un libro de cuentos después de activar los espacios de trabajo de yarn en un proyecto de lerna. Sospecho que esto se debe a problemas de carga de paquetes. Investigando más.

Parece que tengo el mismo problema.

Si entiendo bien el problema, ¿hay un problema con la resolución de archivos .ts desde .js? (Sin embargo, no entiendo por qué está importando su componente desde dist )

¿Tal vez debería agregar .ts / .tsx a los resolve.extensions en su libro de cuentos extendido webpack.config?

@igor-dv No, uso JS. De todos modos, cambiar el identificador de variable ( variable a Variable ) funciona, de alguna manera.

Recibo este error sin usar TypeScript, solo Vanilla JS

Eliminé el cargador de babel de webpack.config.js en la carpeta .storybook y ahora funciona bien. Sin embargo, no uso Typescript.

Me encuentro con esto, en el navegador obtengo exports is not defined pero en la terminal obtengo `"exportar 'predeterminado' (importado como '[ComponentName]') no se encontró en '@[namespace]/[ Nombre del paquete]'"

• usando lerna
• Libro de cuentos 3.4.7
• Todo está bien para mis componentes sin dependencias internas.
• Si trato de importar un módulo con una dependencia de otro paquete en project/packages aparece el error
• Estoy ejecutando mis scripts de compilación, por lo que está tratando de obtener una versión common-js del paquete.

Si cambio la configuración principal de la dependencia interna package.json a la fuente no construida, todo funciona

Entonces, hay algo mal con la configuración del paquete web del libro de cuentos y la importación de cjs en el código del módulo es, o algo así...

mi arreglo

Así que me di cuenta de que borré accidentalmente el campo "módulo" de mi paquete.json que apuntaba a la versión del módulo ES de mis compilaciones, al agregarlo nuevamente hace que todo vuelva a funcionar. Todavía parece que el libro de cuentos debería poder extraer la versión cjs, pero mi problema está resuelto 🤷🏽‍♂️

Esto todavía me sucede en v4.0.0-alpha.20 con babel 7.0.0

Lo mismo aquí @tony. Sin embargo, estoy usando Flow.

@ryanflorence Tengo exactamente la misma configuración de lerna y el problema de exportación para el libro de cuentos.
Tengo un paquete que expone la versión construida de UI-Elements.
Disculpe, pero ¿podría proporcionar más detalles cuando diga "module" field that pointed to the ES module version of my builds, adding that back in makes everything work again. ?

este problema se puede solucionar agregando el complemento correcto en el archivo .babelrc , dado que el archivo tsconfig está configurado para generar módulos compatibles con commonjs , necesitamos usar el complemento adecuado

{
    "env": {
        "test": {
            "plugins": ["instanbul"]
        }
    },
    "plugins": ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-modules-commonjs"]
}

Esto es lo que tengo en mi archivo .babelrc y todo funciona bien, tengo mi archivo tsconfig con exactamente las mismas opciones y valores.

"@babel/core" "^7.1.0"
"@storybook/react" ^4.0.0-alfa.2"
"react" "^16.4.0"

Nota: esta solución funciona para otro tipo de módulos https://babeljs.io/docs/en/next/plugins#modules

Para mí, el problema se debe a los cambios recientes para incluir babel-loader en 4.0.0.alpha. La configuración predeterminada del paquete web del servidor podría incluir sus compilaciones commonjs (paquetes, espacios de trabajo): https://github.com/storybooks/storybook/blob/b2b73596f9dd97b4ba8c03340bd36f868e836772/lib/core/src/server/config/webpack.config.dev.js# L78
https://github.com/storybooks/storybook/blob/b2b73596f9dd97b4ba8c03340bd36f868e836772/lib/core/src/server/config/utils.js#L3

Para mí, una solución es anular la declaración predeterminada del complemento con un webpack.dev.js personalizado:

https://github.com/psychobolt/react-rollup-boilerplate/blob/d9cb9179cb7c00baab486646c504110bf7e2f50a/.storybook/webpack.config.js#L7

// exclude 'babel-loader' so we can override it later
...defaultConfig.module.rules.filter(rule => !(
    (rule.use && rule.use.length && rule.use.find(({ loader }) => loader === 'babel-loader'))
)),

https://github.com/psychobolt/react-rollup-boilerplate/blob/d9cb9179cb7c00baab486646c504110bf7e2f50a/.storybook/webpack.config.js#L11

{
  test: /\.jsx?$/,
  include: require('path').resolve('./'),
  exclude: /(node_modules|dist)/, // exclude any commonjs files
  loader: 'babel-loader',
},

Omitir include también soluciona el problema y no tiene efectos secundarios para mí.

Creo que entiendo lo que está pasando.

Lo que dice @psychobolt es 100% correcto.

Creo que podríamos hacerlo mejor para los usuarios de monorepo, hacer nuestra configuración predeterminada de paquete web para que no suceda lo anterior.

Creo que eliminar include: includePaths, sería suficiente, pero la pregunta es a qué costo de rendimiento...

¿Quién tiene una buena sugerencia sobre la mejor manera de resolver esto?

También nos topamos con este problema y nos tomó más de medio día luchar contra las configuraciones para descubrir qué podría ser. 😢

@cilice ¿Cómo resolviste esto?

@0nn0 siguiendo https://github.com/storybooks/storybook/issues/3346#issuecomment-425516669 este consejo :)

Tengo el mismo problema con stotybook-4.1.4, proyecto Lerna, React 16.7.0, JS simple. Funciona con storybook-4.0.12

Tuve el mismo error en 4.1.4, volví a 4.0.10 y funciona bien (sin texto mecanografiado) babel-webapck

El uso de una configuración modificada para excluir la salida compilada de babel-loader evitará este problema para los proyectos Lerna o monorepo con el último paquete de libros de cuentos.

@psychobolt ¿Podría proporcionar una configuración de ejemplo? Gracias.

Consulte https://github.com/storybooks/storybook/issues/3346#issuecomment -425516669

No estoy seguro de si esto ayudará a alguien más, pero solucionamos este problema ejecutando lo siguiente:

npm i react-scripts -D

@skeet Me preguntaba por qué el libro de cuentos tenía el mensaje

info => Using base config because react-scripts is not installed.
info => Using default webpack setup based on "create-react-app".
info => Using base config because react-scripts is not installed.

Entonces, después de instalar react-scripts, ahora dice

info => Loading create-react-app config.
info => Using default webpack setup based on "create-react-app".
info => Loading create-react-app config.

También hemos tenido el problema exports is not defined varias veces y anteriormente lo solucionamos anulando la configuración de Babel como lo sugirieron otros.

Pero, recientemente comencé a investigar esto nuevamente y noté que la propiedad de exclusión para la regla JS predeterminada se resolvía en una ruta absoluta (a continuación se muestra un console.log() de la configuración de Webpack generada):

{
  test: /\.(mjs|jsx?)$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: '.cache/storybook',
        presets: [
          [
            '@babel/preset-env',
            { shippedProposals: true, useBuiltIns: 'usage' }
          ],
          '@babel/preset-react',
          '@babel/preset-flow'
        ],
        plugins: [
          'babel-plugin-macros',
          '@babel/plugin-proposal-class-properties',
          [
            'babel-plugin-react-docgen',
            { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' }
          ]
        ]
      }
    }
  ],
  include: ['/Users/matt.hinchliffe/Project/'],
  exclude: ['/Users/matt.hinchliffe/Project/node_modules']
}

Había asumido que la propiedad exclude debería ser una expresión regular, ¡así que pensé que se veía extraño! Me di cuenta de que, debido a la estructura de nuestro proyecto, en realidad tenemos muchas carpetas node_modules así que intenté actualizar esta línea a RegExp ( /node_modules/ ), ¡y lo arreglé!

Esto evita la transpilación de módulos que ya han sido transpilados, y en particular evita que la opción useBuiltins de preset-env inyecte core-js polyfills (eliminando la opción useBuiltins o configurando el entorno para apuntar tiempos de ejecución que no requieren rellenos polivalentes también puede ayudar a evitar este problema).

Entonces, hay algunos problemas diferentes en juego que resultan en este problema:

1. Las dependencias en las carpetas node_modules pueden ser transpiladas involuntariamente por Babel
2. La opción useBuiltins puede inyectar polyfills core-js en su código en el formato incorrecto para el tipo de módulo (consulte https://github.com/babel/babel/issues/7463 y https:// github.com/babel/babel/issues/9187)
3. Si los paquetes se vinculan simbólicamente (como en un monorepo), ¡entonces debe andar con mucho cuidado para evitar el punto 1!

Desafortunadamente, no es muy fácil extender la opción de exclusión existente , ¡pero es posible !

He creado un caso de prueba reducido para este problema con información sobre cómo evitarlo. Presentaré un problema con Babel si es necesario.

https://github.com/i-like-robots/broken-webpack-bundle-test-caso

Estamos usando libros de cuentos + lerna + texto mecanografiado. Lo que nos resolvió fue mezclar @i-like-robots con @psychobolt :

module.exports = (baseConfig, env, config) => {
    config.module.rules = config.module.rules.filter(rule => !(
        (rule.use && rule.use.length && rule.use.find(({ loader }) => loader === 'babel-loader'))
    ));
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        loader: require.resolve('babel-loader'),
        options: {
            sourceType: 'unambiguous',
            presets: [['react-app', { flow: false, typescript: true }]],
        },

    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
};

Tenemos el mismo problema, ¿cuándo vas a solucionarlo?

Obteniendo este error en una instalación nueva. No hay idea de qué está causando esto (¿posiblemente en un conflicto con .babelrc entre la configuración create-react-app y esta?).

Logré solucionar el problema agregando la siguiente línea al archivo .babelrc :

"sourceType": "unambiguous"

Más información sobre esta opción: https://babeljs.io/docs/en/options#sourcetype
Cree que esta opción solo está disponible con Babel 7 y versiones posteriores.

Solo para conducir por este sin comprender completamente cuáles son los problemas de las personas (¡disculpas!) -- aquí hay un fragmento de mi configuración de paquete web que soluciona este problema, tal vez de una manera más simple:

  const babelLoader = storybookBaseConfig.module.rules[0];
  babelLoader.exclude.push(
    path.resolve('./lib/components/node_modules'),
    /* etc */
  );

@tmeasday ¿Puede dar más detalles sobre su sugerencia, es decir, dónde colocar ese código?

Storybook es increíble, pero este error ha sido intermitente y horrible. Parece que no puedo encontrar una rima o razón de por qué este error comenzará a ocurrir. Me ocupo de los componentes y luego boom, todo comienza a funcionar sin que se realicen cambios reales. Pero he estado atascado durante una hora tratando de hacer que esto funcione y simplemente no tengo la menor idea de por qué está roto.

Infórmese sobre este problema que parece estar afectando a muchas personas y es sensacional.

Resolví el problema creando un archivo .storybook/weback.config.js que contenía lo siguiente:

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
    // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    config.module.rules[0].use[0].options.sourceType = "unambiguous";

    return config;
};

Parece que todo se reduce al problema de babel sourceType . Intenté agregar un archivo .babelrc (como lo sugirió @0nn0), pero eso pareció reemplazar toda la configuración de babel en lugar de modificarla, lo que causó más problemas.

@JasonTheAdams , el fragmento de código que escribí anteriormente iría en .storybook/webpack.config.js . Creo que es similar a lo que has hecho.

Esto es lo que creo que está pasando:

El problema es que los archivos en node_modules dentro de los subproyectos (por ejemplo ./lib/components/node_modules ) están siendo compilados por babel. Son archivos que ya se enviaron a NPM y no es necesario compilarlos. En algunos casos, esto causa problemas confusos, tal vez sobre cómo babel analiza los archivos.

Mi enfoque es simplemente decirle a babel-loader que no compile ningún archivo dentro de ninguna carpeta node_modules . De manera predeterminada, ignorará ./node_modules , por lo que compilará las cosas dentro de node_modules del subproyecto. Así que agrego algunas rutas a la lista exclude .

Su enfoque es configurar babel-loader para usar la detección de sourceType de babel para saber cómo analizar un archivo. Básicamente, esto funciona alrededor de archivos de análisis incorrectos de Babel. Sin embargo, babel todavía se ejecuta en archivos que no necesitan ser compilados, así que no sé si es lo que quieres.

No soy un experto, así que tome mis palabras con pinzas, pero eso es lo que entiendo después de haber trabajado en problemas similares.

Después de aplicar la sugerencia de @skeet (https://github.com/storybooks/storybook/issues/3346#issuecomment-459308703), el problema volvió cuando comencé a hacer referencia a un paquete como una dependencia (no par o desarrollador) de algunos otros .

Poner el campo module en el package.json de la dependencia como en la corrección de @ryanflorence (https://github.com/storybooks/storybook/issues/3346#issuecomment-415982589) funcionó.

   main: "dist/index.js",
+  module: "dist/index.js",

@tmeasday Lo tengo. Estoy empezando a envolver mi cabeza alrededor de este tema. Lo complicado es que, en mi situación, en realidad _quiero_ que compile el niño node_modules ya que ahí es donde estoy desarrollando los componentes, tratándolo como un paquete separado.

Creo que la sugerencia de @skeet , como la repite @jcousins-ynap, es probablemente la mejor solución aquí. No queremos que Storybook haga suposiciones sobre cómo se manejan los subpaquetes (es decir, ignorando sus node_modules). Si alguien no quisiera compilar los submódulos node_modules, probablemente no habría instalado las dependencias del paquete para empezar.

Parece que todo se reduce a la capacidad de babel + webpack para reconocer los módulos CommonJS vs ES6, que no parece ser perfecto. Agregar el campo "module": al subpaquete package.json informa explícitamente a babel que el paquete usa módulos ES6, que es la forma más segura de abordar esto.

¡Gracias por su atención!

También quiero sonar aquí. Usando Storybook 5, Babel 7.4 (con core-js 3), TypeScript 3.4 y un monorepo. La mayoría de estas sugerencias no funcionaron al 100%, pero me di cuenta de que sí funcionaba. La naturaleza misma de monorepos es que un paquete importa los archivos "construidos" de otro paquete, no los archivos fuente, lo cual es cierto cuando se encuentra en la capa del módulo de registro/nodo de NPM, pero en el desarrollo es bastante molesto. Para evitar esto, definí alias de Webpack que reenviaban lib/ a src/ y todo funcionó, especialmente porque todo el código ahora es ESNext/ESM.

Aquí está el truco:

glob.sync(path.join(__dirname, '../packages/*/package.json')).forEach(filePath => {
  const { name } = require(filePath);

  config.resolve.alias[`${name}$`] = `${name}/src`;
  config.resolve.alias[`${name}/lib`] = `${name}/src`;
});

Y para que Babel + TS funcione, opté por mutar el cargador de babel existente en lugar de agregar uno nuevo, ya que mi configuración local de Babel no es 100% compatible con la de Storybook, pero su propia configuración sí lo es.

const babelConfig = config.module.rules[0];

// Replace Flow with TypeScript
babelConfig.test = /\.(j|t)sx?$/;
babelConfig.exclude.push(/node_modules/);
babelConfig.use[0].options.sourceType = 'unambiguous';
babelConfig.use[0].options.presets[2] = require.resolve('@babel/preset-typescript');
babelConfig.use.unshift({ loader: require.resolve('react-docgen-typescript-loader') });

config.resolve.extensions.push('.ts', '.tsx');

Tuve el mismo problema, también debido a la eliminación del campo module .
Agregar @babel/plugin-transform-modules-commonjs al complemento babel ayudó, como se describe en este comentario: https://github.com/storybooks/storybook/issues/3346#issuecomment -423719241

@elado trabajo!

totalmente bloqueado por este también. pasé los últimos ~2 días probando sin éxito todas las sugerencias de este hilo, así como algunas de las mías. ninguno tuvo éxito 😢

al final me quedo con:

WARNING in ./packages/one/src/index.jsx 2:289-293
"export 'default' (imported as 'Two') was not found in '@my-monorepo/two'
 @ ./packages/one/src/index.stories.jsx
 @ ./packages sync \.stories\.jsx$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js

...al iniciar el libro de cuentos y...

index.js:49 ReferenceError: exports is not defined
    at react-is.development.js:18
    at Module../packages/one/node_modules/react-is/cjs/react-is.development.js (react-is.development.js:226)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../packages/one/node_modules/react-is/index.js (index.js:6)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../packages/one/node_modules/prop-types/index.js (index.js:9)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)

...al ver la interfaz de usuario del libro de cuentos (http://localhost:9001). mis historias no cargan

fwiw, aquí está mi configuración:

├── .storybook/
│   ├── addons.js
│   ├── config.js
│   └── webpack.config.js
│
├── packages/
│   ├── one
│   │   ├── src/
│   │   │   ├── index.jsx
│   │   │   ├── index.stories.jsx
│   │   │   └── index.test.jsx
│   │   ├── dist/
│   │   │   ├── index.js
│   │   │   ├── index.stories.js
│   │   │   └── index.test.js
│   │   └── package.json
│   │
│   └── two
│       ├── src/
│       │   ├── index.jsx
│       │   ├── index.stories.jsx
│       │   └── index.test.jsx
│       ├── dist/
│       │   ├── index.js
│       │   ├── index.stories.js
│       │   └── index.test.js
│       └── package.json
│
├── .babelrc
├── .eslintrc.js
├── jest.config.js
├── lerna.json
├── npm-shrinkwrap.json
└── package.json

import '@storybook/addon-knobs/register';
import '@storybook/addon-backgrounds/register';
import '@storybook/addon-storysource/register';

import { configure } from '@storybook/react';

const req = require.context('../packages', true, /.stories.jsx$/);

function loadStories(){
    req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

module.exports = {
    module: {
        rules: [
            {
                test: /\.stories\.jsx?$/,
                loaders: [require.resolve('@storybook/addon-storysource/loader')],
                enforce: 'pre'
            }
        ]
    }
};

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-transform-modules-commonjs"
    ]
}

{
  "name": "my-monorepo",
  "description": "monorepo containing POC react ui component library",
  "version": "1.0.0",
  "author": "me",
  "scripts": {
    "postinstall": "npm run bootstrap",
    "bootstrap": "lerna bootstrap",
    "storybook": "npm run build && start-storybook --port 9001 --config-dir .storybook --ci",
    "test": "npm run lint && npm run test:unit",
    "test:unit": "npm run build && NODE_ENV=development BABEL_ENV=test jest --no-watchman",
    "test:unit:watch": "npm run test:unit -- --watch",
    "test:unit:snapshot": "npm run test:unit -- --updateSnapshot",
    "lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
    "lint:fix": "npm run lint -- --fix",
    "build": "npm run clean && lerna run build",
    "clean": "lerna run clean",
    "clean:modules": "lerna clean --yes",
    "release": "npm run build && lerna publish",
    "start": "npm run storybook"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-modules-commonjs": "^7.5.0",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-backgrounds": "^5.1.9",
    "@storybook/addon-knobs": "^5.1.9",
    "@storybook/addon-storysource": "^5.1.9",
    "@storybook/react": "^5.1.9",
    "babel-jest": "^22.4.1",
    "babel-loader": "^8.0.6",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "enzyme-to-json": "^3.3.5",
    "eslint": "^4.18.2",
    "eslint-config-particle": "^2.2.1",
    "eslint-plugin-react": "^7.14.2",
    "jest": "^22.4.2",
    "jest-styled-components": "^6.3.3",
    "lerna": "^3.15.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "styled-components": "^4.3.2"
  }
}

{
  "name": "@my-monorepo/one",
  "description": "react component one",
  "version": "1.1.0",
  "author": "me",
  "main": "dist/index.js",
  "scripts": {
    "test": "cd ../../ && npm test",
    "build": "babel ./src --out-dir ./dist --ignore test.jsx,stories.jsx --config-file ../../.babelrc",
    "clean": "rm -rf ./dist"
  },
  "peerDependencies": {
    "react": ">=15",
    "styled-components": ">=3"
  },
  "dependencies": {
    "@my-monorepo/two": "^1.1.0",
    "create-react-class": "^15.6.3",
    "prop-types": "^15.7.2"
  }
}

{
  "name": "@my-monorepo/two",
  "description": "react component two",
  "version": "1.1.0",
  "author": "me",
  "main": "dist/index.js",
  "scripts": {
    "test": "cd ../../ && npm test",
    "build": "babel ./src --out-dir ./dist --ignore test.jsx,stories.jsx --config-file ../../.babelrc",
    "clean": "rm -rf ./dist"
  },
  "peerDependencies": {
    "react": ">=15"
  },
  "dependencies": {
    "create-react-class": "^15.6.3",
    "prop-types": "^15.7.2"
  }
}

todo dentro del directorio ./src los componentes utiliza importaciones/exportaciones de estilo ESM. el @my-monorepo/one depende de @my-monorepo/two . en el momento de la instalación, lerna _vincula_ la dependencia (a través lerna bootstrap ). todos los paquetes se construyen usando babel - el comando de nivel superior npm run build genera los directorios individuales ./dist y sus contenidos. npm start primero construye los componentes, luego inicia el libro de cuentos.

en v3 todo esto funcionó bien, aunque siempre se sintió un poco incómodo tener que construir los componentes primero. Sin embargo, obtengo _por qué_: package.json incluye "main: "dist/index.js" por lo que sin eso en su lugar, el libro de cuentos informaría que no se pudo encontrar @my-monorepo/two al intentar construir (ya que @my-monorepon/one depende en eso). pero por lo demás, estaba contento con la configuración.

Una cosa que noté: cuando agregué "module": "src/index.jsx" a los archivos package.json $ de los componentes, eliminó la advertencia del paquete web pero el lado del cliente ReferenceError: exports is not defined permaneció. Encontré a alguien informando el mismo error pero sin resolución.

Voy a quedarme con el libro de cuentos v3 por ahora, pero estaré atento a este hilo y felizmente probaré cualquier sugerencia :orar::+1:

@busticated parece que podrías tener un repositorio de reproducción que podrías compartir y que podría echarle un vistazo.

@ndelangen gracias por echar un vistazo :pray: mi repositorio no es un cajero automático desafortunadamente. Traté de compartir los detalles relevantes anteriores, pero mientras tanto puedo intentar construir un ejemplo de trabajo si eso fuera útil. aunque podría tomar un poco. de lo contrario, feliz de probar sugerencias, etc.

@busticated Me encantaría echar un vistazo a un monorepo-repro-repo 🙈

Es probable que:

• algunos archivos se analizan a través de babel dos veces
• algunos archivos se analizan a través de cargadores que no son compatibles entre sí
• algunos archivos se compilan usando la configuración incorrecta de babel/ts
• algunas otras travesuras monorepo

Desafortunadamente ReferenceError: exports is not defined no nos dice nada más que algo que no es como se supone que debe ser.

@ndelangen ok, aquí está el repro repo 😂

https://github.com/busticated/storybook-monorepo-repo

deberías poder simplemente:

1. git clone
2. npm i && npm start

...y vea el intento de carga del libro de cuentos en el navegador. abra la consola de herramientas de desarrollo y verá el error exports .

par de notas:

• ejecute npm run build para probar la compilación previa a la publicación
• debería funcionar en las versiones de nodo / npm +/- algo de ruido de archivo de bloqueo (fwiw, usé node@8 y npm@5 para alinear con el trabajo diario)
• las dos últimas confirmaciones agregan los campos packages/*/packge.json "module": "src/index.jsx" los archivos packages/*/packge.json. si los revierte, verá la advertencia original del paquete web export 'default' (imported as 'Two') was not found .

Intentaré echar un vistazo lo antes posible.

Estoy usando Lerna, los paquetes internos están empaquetados por Webpack con salida libraryTarget: 'commonjs2' . El enfoque basado en el comentario de @JasonTheAdams funciona para mí. También probé la solución @0nn0 con babelrc { "sourceType": "unambiguous" } y también funciona, sin embargo, requiere tener .babelrc en la raíz del paquete.

Alguna configuración básica, tal vez ayude a alguien 😉 (Storybook: 5.1.10, Lerna: 3.16.4, Webpack: 4.39.1, Babel: 7.5.5)

archivo: _lerna_repo/.storybook/webpack.config.js_ - no existe por defecto

module.exports = async ({ config }) => {
  const [ mjsjsx ] = config.module.rules;
  const [ babelLoader ] = mjsjsx.use;

  babelLoader.options.sourceType = 'unambiguous'

  return config;
};

archivo: _lerna_repo/stories/index.stories.js_

import defaultExport, { namedExport } from '../packages/examplePackage' // works locally
// import defaultExport, { namedExport } from '<strong i="17">@examplePackage</strong>' // works installed
...

archivo: _lerna_repo/packages/examplePackage/package.json_

"name": "@examplePackage",
"version": "0.0.1",
"main": "./dist/index.js"
...

archivo: _lerna_repo/packages/examplePackage/dist/index.js_ - generado por Webpack

module.exports=function(e){var n={};function...

@ndelangen ¿ Alguna actualización sobre lo anterior?

Obtuve el error "las exportaciones no están definidas" al intentar "importar" un módulo de estilo CommonJS. Establecer la opción Babel sourceType en "inequívoco" como lo sugirieron otros hizo el truco.

Esto no es realmente un problema con Storybook, sino más bien una consecuencia de estar atrapado en medio de las especificaciones de dos módulos.

Parece estar arreglado en la versión 5.2

Hola chicos, ¿está arreglado realmente?

Estoy usando 5.2.1 y tengo este problema en Lerna monorepo recién creado.

En mi caso, esto sucede: https://github.com/storybookjs/storybook/issues/3346#issuecomment -475437230

Modifiqué Storybook Webpack config para excluir node_modules en "Lerna" packages de la compilación de Babel . Pero el problema sigue ahí, creo.

Cerré en base al comentario de @idbartosz . ¿Crees que todavía está roto @Lighttree ?

Perdón por generar confusión, basé mi respuesta en la configuración de Lerna donde los paquetes requeridos se elevan a la raíz y se instalan allí como dependencias de desarrollo. Así que no experimenté el problema de analizar su node_modules .

Parece que algunos usuarios tienen un caso de uso en el que han instalado paquetes más profundos en el árbol como /lib/components/node_modules https://github.com/storybookjs/storybook/issues/3346#issuecomment -475437230 y babel-loader intenta analizarlos.

Por defecto, el libro de cuentos excluye la raíz node_modules pero tal vez valga la pena excluirlos a todos.

https://github.com/storybookjs/storybook/blob/f7367b18ec7d6e077fba5b99da89233b63c4f280/lib/core/src/server/config/utils.js#L5 -L6

https://github.com/storybookjs/storybook/blob/f7367b18ec7d6e077fba5b99da89233b63c4f280/lib/core/src/server/common/babel-loader.js#L1 -L13

@shilman También me enfrento a este error, con react-motion en el repositorio mono-repo de lerna .
¿La solución de @idbartosz solucionó el problema?

@sayjeyhi sí, debería. Esto no es realmente un problema Storybook . Esto sucede simplemente porque cuando trabaja en monorepo , tiene node_modules no solo en la raíz de su proyecto, sino también en */packages , que no está excluido de forma predeterminada. (En realidad, no estoy seguro de que no debería, porque es específico de la organización monorepo . Si crea su Storybook como package en la carpeta Lerna packages , ganó no tengo este problema)

Entonces, para mi caso, acabo de hacer esto en .storybook/webpack.config.js :

const path = require('path');
const glob = require('glob');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
    // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
    // Make whatever fine-grained changes you need
    const babelLoader = config.module.rules[0];

    /**
     * Exclude pacakge's `node_modules` from Storybook babel processing.
     */
    glob.sync('./packages/*/node_modules').forEach(match => {
        babelLoader.exclude.push(path.resolve(match));
    });

    // Return the altered config
    return config;
};

¿Alguien ha mostrado realmente las soluciones alternativas propuestas para la reproducción de ejemplo que creé?

https://github.com/storybookjs/storybook/issues/3346#issuecomment-514324312

parece que eso respondería la pregunta definitivamente.

Puedo ver que casi todos aquí con un monorepo están usando lerna , tengo un monorepo que usa yarn workspaces en lugar de lerna y todo funciona bien con la última versión de storybook + typescript , y sin configuraciones extrañas webpack , debería funcionar bien también con babel.

Si muestra algún interés, puedo crear un monorepo con un storybook funcionamiento, puedo ver en los archivos de @busticated , es que algunos scripts se ejecutan en el orden incorrecto y algunas dependencias están en el package.json incorrecto, no digo que esté causando problemas, pero podría serlo.

@pixeleate

Puedo ver en los archivos de @busticated , algunos scripts se ejecutan en el orden incorrecto y algunas dependencias están en el paquete incorrecto.json

¿Puedes ser mas específico?

Además, tenga en cuenta que tengo una versión _working_ de mi repositorio de ejemplo que ejecuta el libro de cuentos v3 como se indica aquí https://github.com/storybookjs/storybook/issues/3346#issuecomment -513397002

@pixeleate ¿Te importaría compartir tu repositorio de trabajo?

Puedo ver que casi todos aquí con un monorepo están usando lerna , tengo un monorepo que usa yarn workspaces en lugar de lerna y todo funciona bien con la última versión de storybook + typescript , y sin configuraciones extrañas webpack , debería funcionar bien también con babel.

Si muestra algún interés, puedo crear un monorepo con un storybook funcionamiento, puedo ver en los archivos de @busticated , es que algunos scripts se ejecutan en el orden incorrecto y algunas @ dependencias son en el package.json incorrecto, no digo que esté causando problemas, pero podría serlo.

babelConfig.exclude.push(/node_modules/); me soluciona el problema cuando ejecuto start-storybook , pero recibo el mismo error exports is not defined cuando ejecuto la salida desde build-storybook .

Editar: Resuelto eliminando storybook-addon-jsx .

@busticated Abrí un PR con una solución:
https://github.com/busticated/storybook-monorepo-repo/pull/1

Creo que hubo algunas importaciones incorrectas que fueron el principal problema.

@jacobrask Quiero cambiar eso en el núcleo del libro de cuentos. Pero tengo miedo de que cause estragos si cambiamos eso en un lanzamiento menor.

@shilman , creo que deberíamos cambiarlo, pero debería ser un cambio importante en la versión

@ndelangen

Abrí un PR con una solución

¡Gracias!

Creo que hubo algunas importaciones incorrectas que fueron el principal problema.

mmm Si. me sirve por no configurar eslint 😂🤦‍♂

Dicho todo esto, parece que una vez que toma en cuenta los nombres de variables incorrectos y actualiza el uso @storybook/addon-backgrounds , como lo hice en master ( 1 , 2 , 3 , 4 ), el único cambio sobresaliente es usar hilo.

¿Estoy en lo correcto?

editar: aquí hay una rama limpia con solo los cambios necesarios para yarn 👉 https://github.com/busticated/storybook-monorepo-repo/commit/4fb2cac0f05b65a5983f121b92a7c2d7438d8857

los espacios de trabajo de hilo elevarán todas las dependencias a la raíz, esto resolverá muchos problemas.

En mi PR: https://github.com/storybookjs/storybook/pull/8822 Realizo un cambio en el libro de cuentos para admitir la exclusión de MÚLTIPLES carpetas de node_modules de forma predeterminada.

Como se detalla allí, estoy bastante aterrorizado de implementar ese cambio en un lanzamiento menor, al igual que @shilman. Hemos decidido que es mejor mantener eso hasta 6.0.

los espacios de trabajo de hilo elevarán todas las dependencias a la raíz, esto resolverá muchos problemas.

asumiendo que usas hilo 😉

realice un cambio en el libro de cuentos para admitir la exclusión de MÚLTIPLES carpetas node_modules de forma predeterminada

¿Es esa la causa raíz? aplicar el cambio localmente no parece solucionar mi problema.

Obtengo lo siguiente en la consola de mi navegador:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

... que es un poco diferente, supongo ..? otro error más que ves todo el tiempo pero siempre tiene una solución diferente 🤦‍♂ _/me frunce el ceño en la dirección general de babel y webpack_ 😬

Estoy bastante aterrorizado de implementar ese cambio en un lanzamiento menor, al igual que @shilman. Hemos decidido que es mejor mantener eso hasta 6.0.

oh sí, te escucho, nada de esto es fácil. muchas gracias por todo el trabajo que hace aquí y en otros lugares: el libro de cuentos (incluso v3) es una herramienta increíblemente útil :pray::clap::clap::clap::+1:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Lo más probable es que esto se deba a que Webpack envuelve un módulo CommonJS con su contenedor ESM. Webpack usará un contenedor ESM si ve algún uso de import en el módulo. Por lo general, es causado por:

1. Mezclar y combinar ESM y CJS en su código fuente
2. Babel inyecta ayudantes ESM en un módulo CJS

Para evitar el segundo caso, deberá configurar sourceType de Babel en "unambiguous" para obligarlo a verificar primero el tipo de módulo.

https://github.com/i-like-robots/broken-webpack-bundle-test-caso

Actualización: mi comentario original está oculto arriba, pero esta es la configuración básica que hemos estado usando para resolver estos problemas en múltiples proyectos monorepo:

const excludePaths = [/node_modules/, /dist/]

module.exports = ({ config }) => {
  // Use real file paths for symlinked dependencies do avoid including them multiple times
  config.resolve.symlinks = true

  // HACK: extend existing JS rule to ensure all dependencies are correctly ignored
  // https://github.com/storybooks/storybook/issues/3346#issuecomment-459439438
  const jsRule = config.module.rules.find((rule) => rule.test.test('.jsx'))
  jsRule.exclude = excludePaths

  // HACK: Instruct Babel to check module type before injecting Core JS polyfills
  // https://github.com/i-like-robots/broken-webpack-bundle-test-case
  const babelConfig = jsRule.use.find(({ loader }) => loader === 'babel-loader')
  babelConfig.options.sourceType = 'unambiguous'

  // HACK: Ensure we only bundle one instance of React
  config.resolve.alias.react = require.resolve('react')

  return config
}

@i-like-robots ¿cuál es la desventaja de usar sourceType = 'unambiguous' ?

¡Gracias por publicar la solución!

Voy a usar esto para mejorar la compatibilidad con monorepo: https://github.com/storybookjs/storybook/pull/8822

(función 6.0.0)

Tal vez no esté relacionado, pero estaba teniendo este problema exports is not defined debido a mi babel.config.js personalizado, leyendo https://storybook.js.org/docs/configurations/custom-babel-config/ resolvió mi particular problema.

@qrosmeli Gracias por el consejo. ¡Salvaste mi día! 🚀

¡¡Hurra!! Acabo de publicar https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.0 que contiene PR #8822 que hace referencia a este problema. ¡Actualice hoy para probarlo!

Puede encontrar esta versión preliminar en la etiqueta @next NPM.

Cerrando este tema. Vuelva a abrir si cree que aún hay más por hacer.

[ACTUALIZADO] - Tenemos que excluir node_modules de esta regla, de lo contrario, romperá la compilación

Lo resolví agregando esta regla en el archivo storybook main.js

let rules = [{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: /dist/, //Include dist folder as well to parse using babel loader in order to resolve exports not defined error
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      ["@babel/preset-env", {
        modules: "commonjs"
      }]
    ]
  }
}]

Junto con esto, es posible que también deba deshabilitar las validaciones de eslint para su carpeta dist, por lo que puede usar el siguiente script

  webpackFinal: config => {

    //Find eslint loader rule from webpack config
    let eslintRule = config.module.rules.find(rule => {
      if (rule && rule.use) {
        return rule.use.some(use => use.loader.match('eslint-loader'))
      }
    });

    //Exclude validations of dist folder contents
    eslintRule.exclude = /dist/;

    return {
      ...config,
      module: {
        rules: [
          ...rules,
          eslintRule,
          ...config.module.rules
        ]
      }
    }
  }

Gracias @ ashvin777 , funciona de maravilla :wink:

Hola @aperkaz , actualicé la regla para excluir node_modules , descubrí que el libro de cuentos se estaba iniciando correctamente en el modo de desarrollo, sin embargo, se interrumpió en el modo de producción debido a este cambio. Así que tuve que excluir node_modules para arreglarlo. Puede tomar lo último de mi comentario actualizado arriba.

Tuve exactamente el mismo problema, y ​​para mí la solución fue cambiar de usar transform-es2015-modules-commonjs a @babel/plugin-transform-modules-commonjs en babel.config.js .

antes de

module.exports = {
    presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
    plugins: [
        'transform-es2015-modules-commonjs',
        '@babel/plugin-proposal-class-properties'
    ]
};

después

module.exports = {
    presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
    plugins: [
        '@babel/plugin-transform-modules-commonjs',
        '@babel/plugin-proposal-class-properties'
    ]
};

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Pasé el día en este tema, ya tenía el sourceType: 'unambigous' .

Por mi parte, no estaba vinculado a una carpeta node_modules para ignorar, ya que es un archivo relativo justo al lado.

Una solución alternativa que me funciona es forzar la opción modules: 'cjs' para @babel/preset-env .

También tengo este problema con @storybook/react@next , la solución final para mí fue agregar manualmente el complemento de babel @babel/plugin-transform-modules-commonjs , mientras que con la opción debug: true en el @babel/preset-env Veo que ya está usado... No entiendo pero funciona.

EDITAR: Esta no es una solución porque pierde los beneficios de los módulos ESM con webpack. Necesito forzar la transformación a cjs solo para las compilaciones de libros de cuentos.

:tada: Mis .storybook/.babelrc : :tada:

{
  "extends": "../.babelrc",
  "plugins": [
    "@babel/plugin-transform-modules-commonjs"
  ]
}