Skip to content

Instantly share code, notes, and snippets.

@matsubo
Created May 19, 2021 01:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matsubo/d27b5b1755d629fd90783f94a5a0c69f to your computer and use it in GitHub Desktop.
Save matsubo/d27b5b1755d629fd90783f94a5a0c69f to your computer and use it in GitHub Desktop.
yarn 2 + webpacker test
gem i rails
curl -sL https://deb.nodesource.com/setup_lts.x | bash -
apt-get install -y nodejs
npm install -g yarn
rails new myapp --webpack
cd myapp/
yarn set version berry
yarn install
bin/webpack-dev-server
docker run -it ruby:3 bash
@matsubo
Copy link
Author

matsubo commented May 19, 2021

  • エラーが出る
  • .yarnrc.ymlにdependencyを書いていけばエラーが無くなるのかなぁと思うが。
root@0e47d1bd392b:/myapp# bin/webpack-dev-server
ℹ 「wds」: Project is running at http://localhost:3035/
ℹ 「wds」: webpack output is served from /packs/
ℹ 「wds」: Content not from webpack is served from /myapp/public/packs
ℹ 「wds」: 404s will fallback to /index.html
✖ 「wdm」: Hash: 4cd6dfe2bc228ad85847
Version: webpack 4.46.0
Time: 391ms
Built at: 05/19/2021 1:16:32 AM
                                     Asset       Size       Chunks                         Chunk Names
    js/application-c66227090f63741b44e1.js   11.6 KiB  application  [emitted] [immutable]  application
js/application-c66227090f63741b44e1.js.map   3.51 KiB  application  [emitted] [dev]        application
                             manifest.json  364 bytes               [emitted]

ERROR in ./.yarn/$$virtual/webpack-dev-server-virtual-5629100f45/0/cache/webpack-dev-server-npm-3.11.2-02bc129ea9-6bf6803810.zip/node_modules/webpack-dev-server/client?http://localhost:3035
Module build failed (from ./.yarn/$$virtual/babel-loader-virtual-53538ff754/0/cache/babel-loader-npm-8.2.2-b4e600c2c5-362bb71573.zip/node_modules/babel-loader/lib/index.js):
Error: Your application tried to access @babel/preset-env, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: @babel/preset-env (via "@babel/preset-env")
Required by: /myapp/

Require stack:
- /myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/config/files/plugins.js
- /myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/config/files/index.js
- /myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/index.js
- /myapp/.yarn/$$virtual/babel-loader-virtual-53538ff754/0/cache/babel-loader-npm-8.2.2-b4e600c2c5-362bb71573.zip/node_modules/babel-loader/lib/index.js
- /myapp/.yarn/cache/loader-runner-npm-2.4.0-c414104c2f-9173b602e8.zip/node_modules/loader-runner/lib/loadLoader.js
- /myapp/.yarn/cache/loader-runner-npm-2.4.0-c414104c2f-9173b602e8.zip/node_modules/loader-runner/lib/LoaderRunner.js
- /myapp/.yarn/$$virtual/webpack-virtual-6ee8f3df0b/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/NormalModule.js
- /myapp/.yarn/$$virtual/webpack-virtual-6ee8f3df0b/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/NormalModuleFactory.js
- /myapp/.yarn/$$virtual/webpack-virtual-6ee8f3df0b/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/Compiler.js
- /myapp/.yarn/$$virtual/webpack-virtual-6ee8f3df0b/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/webpack.js
- /myapp/.yarn/$$virtual/webpack-dev-server-virtual-5629100f45/0/cache/webpack-dev-server-npm-3.11.2-02bc129ea9-6bf6803810.zip/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at internalTools_makeError (/myapp/.pnp.js:16364:34)
    at resolveToUnqualified (/myapp/.pnp.js:17323:23)
    at resolveRequest (/myapp/.pnp.js:17421:29)
    at Object.resolveRequest (/myapp/.pnp.js:17499:26)
    at Function.external_module_.Module._resolveFilename (/myapp/.pnp.js:16597:34)
    at resolve (internal/modules/cjs/helpers.js:94:19)
    at resolveStandardizedName (/myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/config/files/plugins.js:111:7)
    at resolvePreset (/myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/config/files/plugins.js:59:10)
    at loadPreset (/myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/config/files/plugins.js:78:20)
    at loadPreset.next (<anonymous>)

ERROR in ./app/javascript/packs/application.js
Module build failed (from ./.yarn/$$virtual/babel-loader-virtual-53538ff754/0/cache/babel-loader-npm-8.2.2-b4e600c2c5-362bb71573.zip/node_modules/babel-loader/lib/index.js):
Error: Your application tried to access babel-plugin-macros, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: babel-plugin-macros (via "babel-plugin-macros")
Required by: /myapp/

Require stack:
- /myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/config/files/plugins.js
- /myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/config/files/index.js
- /myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/index.js
- /myapp/.yarn/$$virtual/babel-loader-virtual-53538ff754/0/cache/babel-loader-npm-8.2.2-b4e600c2c5-362bb71573.zip/node_modules/babel-loader/lib/index.js
- /myapp/.yarn/cache/loader-runner-npm-2.4.0-c414104c2f-9173b602e8.zip/node_modules/loader-runner/lib/loadLoader.js
- /myapp/.yarn/cache/loader-runner-npm-2.4.0-c414104c2f-9173b602e8.zip/node_modules/loader-runner/lib/LoaderRunner.js
- /myapp/.yarn/$$virtual/webpack-virtual-6ee8f3df0b/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/NormalModule.js
- /myapp/.yarn/$$virtual/webpack-virtual-6ee8f3df0b/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/NormalModuleFactory.js
- /myapp/.yarn/$$virtual/webpack-virtual-6ee8f3df0b/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/Compiler.js
- /myapp/.yarn/$$virtual/webpack-virtual-6ee8f3df0b/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/webpack.js
- /myapp/.yarn/$$virtual/webpack-dev-server-virtual-5629100f45/0/cache/webpack-dev-server-npm-3.11.2-02bc129ea9-6bf6803810.zip/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at internalTools_makeError (/myapp/.pnp.js:16364:34)
    at resolveToUnqualified (/myapp/.pnp.js:17323:23)
    at resolveRequest (/myapp/.pnp.js:17421:29)
    at Object.resolveRequest (/myapp/.pnp.js:17499:26)
    at Function.external_module_.Module._resolveFilename (/myapp/.pnp.js:16597:34)
    at resolve (internal/modules/cjs/helpers.js:94:19)
    at resolveStandardizedName (/myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/config/files/plugins.js:111:7)
    at resolvePlugin (/myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/config/files/plugins.js:55:10)
    at loadPlugin (/myapp/.yarn/cache/@babel-core-npm-7.14.3-9181aae4d9-4bc2d1abf5.zip/node_modules/@babel/core/lib/config/files/plugins.js:63:20)
    at loadPlugin.next (<anonymous>)
ℹ 「wdm」: Failed to compile.

^Croot@0e47d1bd392b:/myapp# yarn up
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 557ms
➤ YN0000: ┌ Link step
➤ YN0062: │ fsevents@patch:fsevents@npm%3A1.2.13#builtin<compat/fsevents>::version=1.2.13&hash=11e9ea The platform linux is incompatible with this module, build skipped.
➤ YN0000: └ Completed in 1s 544ms
➤ YN0000: Done with warnings in 2s 458ms
root@0e47d1bd392b:/myapp# g grep babel/preset-env
bash: g: command not found
root@0e47d1bd392b:/myapp# grep -r -n babel/preset-env *
babel.config.js:21:        '@babel/preset-env',
babel.config.js:29:        '@babel/preset-env',
yarn.lock:1080:"@babel/preset-env@npm:^7.14.2":
yarn.lock:1082:  resolution: "@babel/preset-env@npm:7.14.2"
yarn.lock:1275:    "@babel/preset-env": ^7.14.2
root@0e47d1bd392b:/myapp# vi babel.config.js
bash: vi: command not found
root@0e47d1bd392b:/myapp# cat  babel.config.js
module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ]
    ].filter(Boolean)
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment