Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Migration problem @lingui/macro missing modules and errors

See original GitHub issue

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
babel-core@7.0.0-bridge.0
├─ babel-register@6.26.0
│  └─ babel-core@6.26.0
├─ fbjs-scripts@0.7.1
│  └─ babel-core@6.26.0
├─ jest-config@23.6.0
│  └─ babel-core@6.26.0
├─ jest-runtime@23.6.0
│  └─ babel-core@6.26.0
├─ jscodeshift@0.3.32
│  └─ babel-core@5.8.38
└─ react-codemod@4.0.0
   └─ babel-core@6.26.0
  • 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"
			]
		}
	}
}

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

12reactions
lexkrstncommented, Feb 10, 2019

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.

1reaction
lexkrstncommented, Feb 12, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Migration problem @lingui/macro missing modules and errors -
Describe the bug. After trying to migrate to @lingui/macro I get this error: ; To Reproduce ; Expected behavior. Shouldn't error out ;...
Read more >
lingui/js-lingui - Gitter
Hi all, I'm trying to get Lingui working in a new project again, but keep running into @lingui/macro: Cannot read property 'attributes' of...
Read more >
Setup with React project — LinguiJS documentation
This setup guide is for any project which uses React. Install¶. Install @lingui/cli , @lingui/macro , babel-plugin-macros and Babel core packages as a ......
Read more >
How to set up internationalization in React using Lingui.js
js. Essentially, the developers of Lingui.js have divided the whole library into different modules. For now, we are interested in CLI, macro, ...
Read more >
Tutorial - Internationalization of React apps - LinguiJS
import { Trans } from '@lingui/macro'; <h1><Trans>Message Inbox</Trans></h1> ... Some expressions are valid and won't throw any error, yet it doesn't make ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[Documentation] prevent @lingui/macro should be listed in the project's dependencies

Next page

Jest testing with Lingui and TypeScript