[Bug] Build fails due to "babel-plugin-universal-import/universalImport" MODULE_NOT_FOUND

VaidotasSm commented 2 years ago

Issue

I have yarn workspaces project. During react-static build I get following errors:

ERROR in */workspaces/xxx/artifacts/react-static-templates.js
Module not found: Error: Can't resolve 'babel-plugin-universal-import/universalImport' in '*/workspaces/xxx/artifacts'
 @ */workspaces/xxx/artifacts/react-static-templates.js 2:0-78 4:0-78 6:0-78 8:0-78 10:0-78 12:0-77 26:20-36 46:20-37 66:20-37 86:20-37 106:20-37 126:20-37
 @ ../lib/bootstrapTemplates.js
 @ multi ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js ../lib/bootstrapApp.js

                => There were ERRORS during the node build stage! :(
                => Fix them and try again!

...

Trace: {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '*/node_modules/react-static/lib/static/exportRoutes.threaded.js'
  ]
}

...

Error: Cannot find module '*/workspaces/xxx/artifacts/static-app.js'
Require stack:
- */node_modules/react-static/lib/static/exportRoutes.threaded.js

- loader.js:902 Function.Module._resolveFilename

react-static depends on babel-plugin-universal-import and it is resolved to babel-plugin-universal-import@4.0.2.

Workaround

When I go to workspace containing react-static project and do yarn install babel-plugin-universal-import (resolves to babel-plugin-universal-import@3.1.3) - build works fine.

Environment

# npx envinfo --system --npmPackages react* --binaries --npmGlobalPackages react* --browsers
zsh: no matches found: react*        # ran both in root workspace and in `react static` workspace - same reuslt

# npx envinfo --system
System:
  OS: macOS 11.6
  CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Memory: 2.47 GB / 16.00 GB
  Shell: 5.8 - /bin/zsh

# yarn -v
1.19.0

# node -v
v14.18.0

# yarn.lock react-static resolution
react-static@^7.6.2:
  version "7.6.2"
  resolved "https://registry.yarnpkg.com/react-static/-/react-static-7.6.2.tgz#f860473d5934736899231a1a65ae80f5e861ad47"
  integrity sha512-JQACM+3GgF1vkUH6E6w1k0Qut6IbcfXjU37shGUWM9tIs3F9e/33saXK4G/uSl1kc8qjI+RekAQs/qyjMlUKlg==
  dependencies:
    "@babel/cli" "^7.5.5"
    "@babel/core" "^7.5.5"
    "@babel/plugin-proposal-class-properties" "^7.5.5"
    "@babel/plugin-proposal-export-default-from" "^7.5.2"
    "@babel/plugin-proposal-optional-chaining" "^7.2.0"
    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
    "@babel/plugin-transform-destructuring" "^7.5.0"
    "@babel/plugin-transform-modules-commonjs" "^7.5.0"
    "@babel/plugin-transform-runtime" "^7.5.5"
    "@babel/preset-env" "^7.5.5"
    "@babel/preset-react" "^7.0.0"
    "@babel/preset-stage-0" "^7.0.0"
    "@babel/register" "^7.5.5"
    "@babel/runtime" "^7.5.5"
    "@reach/router" "^1.3.1"
    autoprefixer "^9.7.4"
    axios "^0.21.1"
    babel-core "7.0.0-bridge.0"
    babel-loader "^8.0.6"
    babel-plugin-macros "^2.6.1"
    babel-plugin-transform-react-remove-prop-types "^0.4.24"
    babel-plugin-universal-import "^4.0.0"
    case-sensitive-paths-webpack-plugin "^2.2.0"
    chalk "^2.4.2"
    chokidar "^3.0.2"
    circular-dependency-plugin "^5.2.0"
    cors "^2.8.5"
    css-loader "^2.1.1"
    download-git-repo "^2.0.0"
    extract-css-chunks-webpack-plugin "^4.6.0"
    file-loader "3.0.1"
    fs-extra "^7.0.1"
    git-promise "^1.0.0"
    glob "^7.1.4"
    gunzip-maybe "^1.4.1"
    html-webpack-plugin "^3.2.0"
    inquirer "^6.5.1"
    inquirer-autocomplete-prompt "^1.0.1"
    intersection-observer "^0.7.0"
    jsesc "^2.5.2"
    match-sorter "^3.1.1"
    minimist "^1.2.0"
    mutation-observer "^1.0.3"
    optimize-css-assets-webpack-plugin "^5.0.3"
    portfinder "^1.0.21"
    postcss-flexbugs-fixes "^4.1.0"
    postcss-loader "^3.0.0"
    pretty-error "^2.1.1"
    progress "^2.0.3"
    prop-types "^15.7.2"
    raf "^3.4.1"
    raw-loader "^3.1.0"
    react-helmet "^6.1.0"
    react-universal-component "^4.0.0"
    resolve-from "^5.0.0"
    serve "^11.1.0"
    shorthash "^0.0.2"
    slash "^2.0.0"
    socket.io "^2.2.0"
    socket.io-client "^2.2.0"
    style-loader "0.23.1"
    swimmer "^1.4.0"
    tar-fs "^2.0.0"
    terser-webpack-plugin "^1.4.1"
    upath "^1.1.2"
    url-loader "^2.1.0"
    webpack "^4.39.2"
    webpack-bundle-analyzer "^3.4.1"
    webpack-dev-server "^3.8.0"
    webpack-flush-chunks "^2.0.3"
    webpack-node-externals "^1.7.2"

kevinjobs commented 2 years ago

Try add it babel-plugin-universal-import in the package, not in the workspace.

VaidotasSm commented 2 years ago

@kevinjobs yes, I did that and it worked (as described in Workaround section of the bug report). I went to root/workspaces/static-app and installed babel-plugin-universal-import from there.

However although workaround exists it is still confusing and I'm unsure how confident I'm with this.

babel-plugin-universal-import@4.x.x is required by react-static, but has issues in my yarn workspaces setup (even when installed from non-root workspace package.
babel-plugin-universal-import@3.x.x works, but since ^4.0.0 is required, some other issue may arise since v3 does not have something?

react-static / react-static