Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Definição de empacotador front-end #22

Closed
edpittol opened this issue Jul 15, 2022 · 6 comments
Closed

Definição de empacotador front-end #22

edpittol opened this issue Jul 15, 2022 · 6 comments

Comments

@edpittol
Copy link
Member

O empacotador é a ferramenta responsável para transpilar e otimizar o código front-end para ser interpretado pelo navegador. O Storybook possui integração com o Vite e o Webpack.

Precisamos definir qual solução vamos acoplar no projeto.
@devartes
Copy link

Vite é maravilhoso, é muito rápido.

@RaisaSampaio
Copy link
Contributor

Ainda pesquisando mas achei bem bacana como o Vite faz a comunicação e por que ele se faz mais ágil que o Webpack.

@devartes
Copy link

Problema que aparece quando tento usar npm run storybook + vite , os dois separados funcionam com React.


C:\Users\anaca\appnew\appvite>npm run storybook

> appvite@0.0.0 storybook
> start-storybook -p 6006

info @storybook/react v6.5.9
info
ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\anaca\appnew\appvite\.storybook\main.js from C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\utils\interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\anaca\appnew\appvite\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
ERR!
ERR!     at interopRequireDefault (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\utils\interpret-require.js:64:16)
ERR!     at serverRequire (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\utils\interpret-require.js:101:10)
ERR!     at getPreviewBuilder (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\utils\get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\build-dev.js:106:71)
ERR!     at async buildDev (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\build-dev.js:174:5)
ERR!  Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\anaca\appnew\appvite\.storybook\main.js from C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\utils\interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\anaca\appnew\appvite\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
ERR!
ERR!     at interopRequireDefault (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\utils\interpret-require.js:64:16)
ERR!     at serverRequire (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\utils\interpret-require.js:101:10)
ERR!     at getPreviewBuilder (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\utils\get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\build-dev.js:106:71)
ERR!     at async buildDev (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\build-dev.js:174:5) {
ERR!   code: 'ERR_REQUIRE_ESM'
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\utils\interpret-require.js:64
  var result = require(filePath);
               ^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\anaca\appnew\appvite\.storybook\main.js from C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\utils\interpret-require.js not supported.
main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\anaca\appnew\appvite\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at interopRequireDefault (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\utils\interpret-require.js:64:16)
    at serverRequire (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\utils\interpret-require.js:101:10)
    at getFrameworkPackage (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\presets.js:326:50)
    at loadAllPresets (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-common\dist\cjs\presets.js:356:26)
    at buildDev (C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\build-dev.js:209:50) {
  code: 'ERR_REQUIRE_ESM'
}

Eu segui o que dizia no cmd: or change "type": "module" to "type": "commonjs".

Então isso aconteceu:

C:\Users\anaca\appnew\appvite>npm run storybook

> appvite@0.0.0 storybook
> start-storybook -p 6006

info @storybook/react v6.5.9
info
info => Loading presets
ERR! Error: Cannot find module '@rollup/pluginutils'
ERR! Require stack:
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\builder-vite\dist\plugins\react-docgen.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\builder-vite\dist\vite-config.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\builder-vite\dist\vite-server.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\builder-vite\dist\index.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\utils\get-preview-builder.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\build-static.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\index.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\core\dist\cjs\server.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\core\server.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\react\dist\cjs\server\index.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\react\bin\index.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (C:\Users\anaca\appnew\appvite\node_modules\@storybook\builder-vite\dist\plugins\react-docgen.js:8:23)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1101:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!  Error: Cannot find module '@rollup/pluginutils'
ERR! Require stack:
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\builder-vite\dist\plugins\react-docgen.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\builder-vite\dist\vite-config.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\builder-vite\dist\vite-server.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\builder-vite\dist\index.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\utils\get-preview-builder.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\build-static.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\core-server\dist\cjs\index.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\core\dist\cjs\server.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\core\server.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\react\dist\cjs\server\index.js
ERR! - C:\Users\anaca\appnew\appvite\node_modules\@storybook\react\bin\index.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (C:\Users\anaca\appnew\appvite\node_modules\@storybook\builder-vite\dist\plugins\react-docgen.js:8:23)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1101:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\builder-vite\\dist\\plugins\\react-docgen.js',
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\builder-vite\\dist\\vite-config.js',
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\builder-vite\\dist\\vite-server.js',
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\builder-vite\\dist\\index.js',
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\core-server\\dist\\cjs\\utils\\get-preview-builder.js',
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\core-server\\dist\\cjs\\build-static.js',
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\core-server\\dist\\cjs\\index.js',
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\core\\dist\\cjs\\server.js',
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\core\\server.js',
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\react\\dist\\cjs\\server\\index.js',
ERR!     'C:\\Users\\anaca\\appnew\\appvite\\node_modules\\@storybook\\react\\bin\\index.js'
ERR!   ]
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Então eu adicionei: npm i -D html-webpack-plugin e npm install @rollup/pluginutils --save-dev e o storybook apareceu no navegador. 😄

@devartes
Copy link

Usando Webpack também dá erro :


info @storybook/react v6.5.9
info
info => Loading presets
WARN   Failed to load preset: "C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\manager-webpack5\\dist\\cjs\\presets\\manager-preset.js"
ERR! Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\ui\noop.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR!     at resolveFileName (C:\Users\anaca\appnew\appwebpack\node_modules\resolve-from\index.js:29:39)
ERR!     at resolveFrom (C:\Users\anaca\appnew\appwebpack\node_modules\resolve-from\index.js:43:9)
ERR!     at module.exports (C:\Users\anaca\appnew\appwebpack\node_modules\resolve-from\index.js:46:47)
ERR!     at Object.<anonymous> (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\ui\paths.js:17:18)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1101:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!  Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\ui\noop.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR!     at resolveFileName (C:\Users\anaca\appnew\appwebpack\node_modules\resolve-from\index.js:29:39)
ERR!     at resolveFrom (C:\Users\anaca\appnew\appwebpack\node_modules\resolve-from\index.js:43:9)
ERR!     at module.exports (C:\Users\anaca\appnew\appwebpack\node_modules\resolve-from\index.js:46:47)
ERR!     at Object.<anonymous> (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\ui\paths.js:17:18)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1101:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     'C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\ui\\noop.js'
ERR!   ]
ERR! }
ERR! Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\builder-webpack5\dist\cjs\preview\iframe-webpack.config.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\builder-webpack5\dist\cjs\presets\preview-preset.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-common\dist\cjs\presets.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-common\dist\cjs\index.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-server\dist\cjs\index.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core\dist\cjs\server.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core\server.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\react\dist\cjs\server\index.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\react\bin\index.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR!     at Function.resolve (node:internal/modules/cjs/helpers:108:19)
ERR!     at _default (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\builder-webpack5\dist\cjs\preview\iframe-webpack.config.js:202:46)
ERR!     at async starterGeneratorFn (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\builder-webpack5\dist\cjs\index.js:116:16)
ERR!     at async Object.start (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\builder-webpack5\dist\cjs\index.js:272:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-server\dist\cjs\dev-server.js:207:28)
ERR!     at async buildDevStandalone (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-server\dist\cjs\build-dev.js:120:31)
ERR!     at async buildDev (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-server\dist\cjs\build-dev.js:174:5)
ERR!  Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\builder-webpack5\dist\cjs\preview\iframe-webpack.config.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\builder-webpack5\dist\cjs\presets\preview-preset.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-common\dist\cjs\presets.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-common\dist\cjs\index.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-server\dist\cjs\index.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core\dist\cjs\server.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core\server.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\react\dist\cjs\server\index.js
ERR! - C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\react\bin\index.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR!     at Function.resolve (node:internal/modules/cjs/helpers:108:19)
ERR!     at _default (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\builder-webpack5\dist\cjs\preview\iframe-webpack.config.js:202:46)
ERR!     at async starterGeneratorFn (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\builder-webpack5\dist\cjs\index.js:116:16)
ERR!     at async Object.start (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\builder-webpack5\dist\cjs\index.js:272:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-server\dist\cjs\dev-server.js:207:28)
ERR!     at async buildDevStandalone (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-server\dist\cjs\build-dev.js:120:31)
ERR!     at async buildDev (C:\Users\anaca\appnew\appwebpack\node_modules\@storybook\core-server\dist\cjs\build-dev.js:174:5) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     'C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\builder-webpack5\\dist\\cjs\\preview\\iframe-webpack.config.js',
ERR!     'C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\builder-webpack5\\dist\\cjs\\presets\\preview-preset.js',
ERR!     'C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\core-common\\dist\\cjs\\presets.js',
ERR!     'C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\core-common\\dist\\cjs\\index.js',
ERR!     'C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\core-server\\dist\\cjs\\index.js',
ERR!     'C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\core\\dist\\cjs\\server.js',
ERR!     'C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\core\\server.js',
ERR!     'C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\react\\dist\\cjs\\server\\index.js',
ERR!     'C:\\Users\\anaca\\appnew\\appwebpack\\node_modules\\@storybook\\react\\bin\\index.js'
ERR!   ]
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Mas isso fez o storybook aparecer no navegador: npm install noop@v1

@mblithium
Copy link
Collaborator

Acho melhor utilizarmos o Vite mesmo, ele não vai pesar tanto na máquina com relação a dependências, das pessoas que venham entrar futuramente no projeto. É possível mudar depois para outro quando quiser, caso tenhamos algum tipo de problema. Integração Vite + Storybook é simples e funciona normalmente, além de ser super rápido! 😄

@RaisaSampaio
Copy link
Contributor

Ficou decidido em reunião que vamos utilizar o Vite como empacotador para o nosso projeto, podendo ser trocado caso haja necessidade no futuro ou por alguma necessidade do projeto.

@RaisaSampaio RaisaSampaio mentioned this issue Aug 12, 2022
Open
@mblithium mblithium mentioned this issue Jun 29, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@edpittol @mblithium @devartes @RaisaSampaio