Js-lingui: Migration problem @lingui/macro missing modules and errors

Created on 3 Dec 2018  ยท  8Comments  ยท  Source: lingui/js-lingui

Describe the bug
After trying to migrate to @lingui/macro I get this error:

WARNING in ./node_modules/babel-plugin-macros/dist/index.js
62:46-53 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/@lingui/macro/index.js
 @ ./shared/modules/main/screens/Home/HowWeWork.js
 @ ./shared/modules/main/screens/Home/index.js
 @ ./shared/router/Routes/index.js
 @ ./shared/router/index.js
 @ ./shared/App/index.js
 @ ./client/index.js
 @ multi regenerator-runtime/runtime ./client/index.js

WARNING in ./node_modules/cosmiconfig/dist/loaders.js
8:17-34 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/cosmiconfig/dist/loaders.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/@lingui/macro/index.js
 @ ./shared/modules/main/screens/Home/HowWeWork.js
 @ ./shared/modules/main/screens/Home/index.js
 @ ./shared/router/Routes/index.js
 @ ./shared/router/index.js
 @ ./shared/App/index.js
 @ ./client/index.js
 @ multi regenerator-runtime/runtime ./client/index.js

ERROR in ./node_modules/cosmiconfig/dist/readFile.js
Module not found: Error: Can't resolve 'fs' in '/Users/project/node_modules/cosmiconfig/dist'
 @ ./node_modules/cosmiconfig/dist/readFile.js 4:11-24
 @ ./node_modules/cosmiconfig/dist/createExplorer.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/@lingui/macro/index.js
 @ ./shared/modules/main/screens/Home/HowWeWork.js
 @ ./shared/modules/main/screens/Home/index.js
 @ ./shared/router/Routes/index.js
 @ ./shared/router/index.js
 @ ./shared/App/index.js
 @ ./client/index.js
 @ multi regenerator-runtime/runtime ./client/index.js

ERROR in ./node_modules/is-directory/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/project/node_modules/is-directory'
 @ ./node_modules/is-directory/index.js 10:9-22
 @ ./node_modules/cosmiconfig/dist/getDirectory.js
 @ ./node_modules/cosmiconfig/dist/createExplorer.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/@lingui/macro/index.js
 @ ./shared/modules/main/screens/Home/HowWeWork.js
 @ ./shared/modules/main/screens/Home/index.js
 @ ./shared/router/Routes/index.js
 @ ./shared/router/index.js
 @ ./shared/App/index.js
 @ ./client/index.js
 @ multi regenerator-runtime/runtime ./client/index.js

ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in '/Users/project/node_modules/resolve/lib'
 @ ./node_modules/resolve/lib/sync.js 2:9-22
 @ ./node_modules/resolve/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/@lingui/macro/index.js
 @ ./shared/modules/main/screens/Home/HowWeWork.js
 @ ./shared/modules/main/screens/Home/index.js
 @ ./shared/router/Routes/index.js
 @ ./shared/router/index.js
 @ ./shared/App/index.js
 @ ./client/index.js
 @ multi regenerator-runtime/runtime ./client/index.js

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in '/Users/project/node_modules/resolve/lib'
 @ ./node_modules/resolve/lib/async.js 2:9-22
 @ ./node_modules/resolve/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/@lingui/macro/index.js
 @ ./shared/modules/main/screens/Home/HowWeWork.js
 @ ./shared/modules/main/screens/Home/index.js
 @ ./shared/router/Routes/index.js
 @ ./shared/router/index.js
 @ ./shared/App/index.js
 @ ./client/index.js
 @ multi regenerator-runtime/runtime ./client/index.js

ERROR in ./node_modules/resolve/lib/node-modules-paths.js
Module not found: Error: Can't resolve 'fs' in '/Users/project/node_modules/resolve/lib'
 @ ./node_modules/resolve/lib/node-modules-paths.js 2:9-22
 @ ./node_modules/resolve/lib/sync.js
 @ ./node_modules/resolve/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/@lingui/macro/index.js
 @ ./shared/modules/main/screens/Home/HowWeWork.js
 @ ./shared/modules/main/screens/Home/index.js
 @ ./shared/router/Routes/index.js
 @ ./shared/router/index.js
 @ ./shared/App/index.js
 @ ./client/index.js
 @ multi regenerator-runtime/runtime ./client/index.js

The code that triggers the issue:
`import { t, Trans } from '@lingui/macro';``
It also has a warning associated because the import is a developer dependency

packages.json

"dependencies": {
                 "@lingui/core": "2.7.2",
        "@lingui/react": "2.7.2",
},
"devDependencies":{
"@babel/cli": "7.1.5",
        "@babel/core": "7.1.6",
        "@babel/node": "7.0.0",
        "@babel/plugin-proposal-class-properties": "7.1.0",
        "@babel/plugin-proposal-decorators": "7.1.6",
        "@babel/plugin-proposal-do-expressions": "7.0.0",
        "@babel/plugin-proposal-export-default-from": "7.0.0",
        "@babel/plugin-proposal-export-namespace-from": "7.0.0",
        "@babel/plugin-proposal-function-bind": "7.0.0",
        "@babel/plugin-proposal-function-sent": "7.1.0",
        "@babel/plugin-proposal-json-strings": "7.0.0",
        "@babel/plugin-proposal-logical-assignment-operators": "7.0.0",
        "@babel/plugin-proposal-nullish-coalescing-operator": "7.0.0",
        "@babel/plugin-proposal-numeric-separator": "7.0.0",
        "@babel/plugin-proposal-optional-chaining": "7.0.0",
        "@babel/plugin-proposal-pipeline-operator": "7.0.0",
        "@babel/plugin-proposal-throw-expressions": "7.0.0",
        "@babel/plugin-syntax-decorators": "7.1.0",
        "@babel/plugin-syntax-dynamic-import": "7.0.0",
        "@babel/plugin-syntax-import-meta": "7.0.0",
        "@babel/plugin-transform-react-constant-elements": "7.0.0",
        "@babel/plugin-transform-react-inline-elements": "7.0.0",
        "@babel/plugin-transform-react-jsx-self": "7.0.0",
        "@babel/plugin-transform-react-jsx-source": "7.0.0",
        "@babel/polyfill": "7.0.0",
        "@babel/preset-env": "7.1.6",
        "@babel/preset-flow": "7.0.0",
        "@babel/preset-react": "7.0.0",
        "@babel/register": "7.0.0",
        "@babel/template": "7.1.2",
        "@lingui/babel-preset-react": "2.7.2",
        "@lingui/cli": "2.7.2",
        "@lingui/macro": "2.7.2",
        "assets-webpack-plugin": "3.5.1",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "10.0.1",
        "babel-jest": "23.6.0",
        "babel-loader": "8.0.2",
        "babel-plugin-dynamic-import-node": "2.1.0",
        "babel-plugin-macros": "2.4.2",
        "babel-plugin-module-resolver": "3.1.1",
        "babel-plugin-transform-react-pure-class-to-function": "1.0.1",
        "babel-plugin-transform-react-remove-prop-types": "0.4.15",
}

To Reproduce

import { t, Trans } from "@lingui/macro"

const App = () => {
   return <div><Trans id="ui.services">Services</Trans><SomeComponent title={i18n._(t`ui.title`)}/></div>
}

export default withI18n(App)

Expected behavior
Shouldn't error out

Additional context
Add any other context about the problem here.

  • jsLingui version lingui --version
    1.10.1
  • Babel version npm list babel-core
[email protected]
โ”œโ”€ [email protected]
โ”‚  โ””โ”€ [email protected]
โ”œโ”€ [email protected]
โ”‚  โ””โ”€ [email protected]
โ”œโ”€ [email protected]
โ”‚  โ””โ”€ [email protected]
โ”œโ”€ [email protected]
โ”‚  โ””โ”€ [email protected]
โ”œโ”€ [email protected]
โ”‚  โ””โ”€ [email protected]
โ””โ”€ [email protected]
   โ””โ”€ [email protected]
  • Your Babel config (e.g. .babelrc) or framework you use (Create React App, Meteor, etc.)
{
    "env": {
        "development": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "targets": {
                            "node": "current"
                        }
                    }
                ],
                "@babel/preset-flow",
                "@babel/preset-react",
                "@lingui/babel-preset-react"
            ],
            "plugins": [
                "macros",
                [
                    "module-resolver",
                    {
                        "root": ["./", "./shared"]
                    }
                ],
                "@babel/plugin-proposal-class-properties",
                [
                    "@babel/plugin-syntax-decorators",
                    {
                        "legacy": true
                    }
                ],
                "dynamic-import-node",
                "@babel/plugin-syntax-dynamic-import",
                "@babel/plugin-proposal-export-default-from",
                "@babel/plugin-transform-react-jsx-self",
                "@babel/plugin-transform-react-jsx-source",
                "react-hot-loader/babel",
                "@babel/plugin-syntax-import-meta",
                "@babel/plugin-proposal-json-strings",
                [
                    "@babel/plugin-proposal-decorators",
                    {
                        "legacy": true
                    }
                ],
                "@babel/plugin-proposal-function-sent",
                "@babel/plugin-proposal-export-namespace-from",
                "@babel/plugin-proposal-numeric-separator",
                "@babel/plugin-proposal-throw-expressions",
                "@babel/plugin-proposal-logical-assignment-operators",
                "@babel/plugin-proposal-optional-chaining",
                [
                    "@babel/plugin-proposal-pipeline-operator",
                    {
                        "proposal": "minimal"
                    }
                ],
                "@babel/plugin-proposal-nullish-coalescing-operator",
                "@babel/plugin-proposal-do-expressions",
                "@babel/plugin-proposal-function-bind"
            ]
        },
        "production": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "modules": false,
                        "targets": {
                            "node": "current"
                        }
                    }
                ],
                "@babel/preset-flow",
                "@babel/preset-react",
                "@lingui/babel-preset-react"
            ],
            "plugins": [
                "@babel/plugin-proposal-class-properties",
                [
                    "@babel/plugin-syntax-decorators",
                    {
                        "legacy": true
                    }
                ],
                "dynamic-import-node",
                "@babel/plugin-syntax-dynamic-import",
                "@babel/plugin-proposal-export-default-from",
                "@babel/plugin-transform-react-constant-elements",
                "@babel/plugin-transform-react-inline-elements",
                "@babel/plugin-syntax-import-meta",
                "@babel/plugin-proposal-json-strings",
                [
                    "@babel/plugin-proposal-decorators",
                    {
                        "legacy": true
                    }
                ],
                "@babel/plugin-proposal-function-sent",
                "@babel/plugin-proposal-export-namespace-from",
                "@babel/plugin-proposal-numeric-separator",
                "@babel/plugin-proposal-throw-expressions",
                "@babel/plugin-proposal-logical-assignment-operators",
                "@babel/plugin-proposal-optional-chaining",
                [
                    "@babel/plugin-proposal-pipeline-operator",
                    {
                        "proposal": "minimal"
                    }
                ],
                "@babel/plugin-proposal-nullish-coalescing-operator",
                "@babel/plugin-proposal-do-expressions",
                "@babel/plugin-proposal-function-bind",
                "transform-react-remove-prop-types",
                "transform-react-pure-class-to-function"
            ]
        },
        "test": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "targets": {
                            "node": "current"
                        }
                    }
                ],
                "@babel/preset-flow",
                "@babel/preset-react",
                "@lingui/babel-preset-react"
            ],
            "plugins": [
                [
                    "module-resolver",
                    {
                        "root": ["./", "./shared"]
                    }
                ],
                "@babel/plugin-proposal-class-properties",
                [
                    "@babel/plugin-syntax-decorators",
                    {
                        "legacy": true
                    }
                ],
                "dynamic-import-node",
                "@babel/plugin-syntax-dynamic-import",
                "@babel/plugin-proposal-export-default-from",
                "@babel/plugin-transform-modules-commonjs",
                "@babel/plugin-proposal-object-rest-spread",
                "@babel/plugin-syntax-import-meta",
                "@babel/plugin-proposal-json-strings",
                [
                    "@babel/plugin-proposal-decorators",
                    {
                        "legacy": true
                    }
                ],
                "@babel/plugin-proposal-function-sent",
                "@babel/plugin-proposal-export-namespace-from",
                "@babel/plugin-proposal-numeric-separator",
                "@babel/plugin-proposal-throw-expressions",
                "@babel/plugin-proposal-logical-assignment-operators",
                "@babel/plugin-proposal-optional-chaining",
                [
                    "@babel/plugin-proposal-pipeline-operator",
                    {
                        "proposal": "minimal"
                    }
                ],
                "@babel/plugin-proposal-nullish-coalescing-operator",
                "@babel/plugin-proposal-do-expressions",
                "@babel/plugin-proposal-function-bind"
            ]
        }
    }
}
picture mschipperheyn
👍1

Most helpful comment

Setting node.fs = 'empty' doesn't help me with webpack 4.
After a bit of research it seems like I've found the solution: just put "babel-plugin-macros" into the "plugins" section of your .babelrc file.

picture lexkrstn on 10 Feb 2019
👍4 🎉1 👎1

All 8 comments

Adding 

node: {
   fs: 'empty',
}

to the webpack config seems to do the trick

mschipperheyn picture mschipperheyn on 3 Dec 2018

Exact same errors. We also fixed using the fs empty trick but it seems odd additional webpack config is needed to get the project working. Something in the dependencies seems to think its in a node environment.

adamscybot picture adamscybot on 10 Dec 2018

Setting node.fs = 'empty' doesn't help me with webpack 4.
After a bit of research it seems like I've found the solution: just put "babel-plugin-macros" into the "plugins" section of your .babelrc file.

lexkrstn picture lexkrstn on 10 Feb 2019
👍4 🎉1 👎1

Setting node.fs = 'empty' doesn't help me with webpack 4.
After a bit of research it seems like I've found the solution: just put "babel-plugin-macros" into the "plugins" section of your .babelrc file.

@lexkrstn Did you add it as node module dev dependency too?

GargantulaKon picture GargantulaKon on 11 Feb 2019

@GargantulaKon No, I didn't. It's a dependency of @lingui/macro, not the dependency of my project. Also if at some point the library quit relying on it, I'll be warned and just remove it from the .babelrc.

lexkrstn picture lexkrstn on 12 Feb 2019
👍1

It should be just peerDependency and yes, @lingui/macro package requires babel-plugin-macros in Babel config.

Updated dependencies will be published in next version version. Meanwhile please add babel-plugin-macros as a dev dependency to your project.

tricoder42 picture tricoder42 on 22 May 2019

The installation steps are documented but probably in an unexpected place. Any suggestions where it should be mentioned?

tricoder42 picture tricoder42 on 22 May 2019

Hi !

Any updates on this ?
I have kind of the same problem, but only have the two first warnings:

WARNING in ./node_modules/babel-plugin-macros/dist/index.js 78:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/@lingui/macro/index.js
 @ ./app/components/new/forms/fields/SearchLocation.tsx
 @ ./app/components/pages/Account/Profile/LocationForm.js
 @ ./app/components/pages/Account/Profile/index.js
 @ ./app/routes.js
 @ ./app/components/AppRoutes.js
 @ ./app/components/App.js
 @ ./app/components/index.js
 @ multi ./node_modules/@sentry/webpack-plugin/src/sentry-webpack.module.js babel-polyfill ./app/components

WARNING in ./node_modules/import-fresh/index.js 31:31-48
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/loaders.js
 @ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/@lingui/macro/index.js
 @ ./app/components/new/forms/fields/SearchLocation.tsx
 @ ./app/components/pages/Account/Profile/LocationForm.js
 @ ./app/components/pages/Account/Profile/index.js
 @ ./app/routes.js
 @ ./app/components/AppRoutes.js
 @ ./app/components/App.js
 @ ./app/components/index.js
 @ multi ./node_modules/@sentry/webpack-plugin/src/sentry-webpack.module.js babel-polyfill ./app/components
โ„น ๏ฝขwdm๏ฝฃ: Compiled with warnings.

At first glance, doesn't look to be a problem for lingui to work, but I'm not completely confident with that x)
I got this error by adding typescript to my project, I already had the babel-plugin-macros installed.

Here's my .babelrc:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false
            }
        ],
        "@babel/preset-react"
    ],
    "plugins": [
        "macros",
        "@babel/plugin-proposal-class-properties",
        [
            "babel-plugin-styled-components",
            {
                "ssr": true
            }
        ],
        [
            "import",
            {
                "libraryName": "antd",
                "style": true
            }
        ],
        "lodash"
    ],
    "ignore": [
        "node_modules",
        "public/dist"
    ]
}

Thanks !

pybuche picture pybuche on 2 Mar 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ppozniak picture ppozniak  ยท  4Comments
mojtabast picture mojtabast  ยท  4Comments
smeevil picture smeevil  ยท  3Comments
vitexikora picture vitexikora  ยท  6Comments
tkvw picture tkvw  ยท  6Comments