{"record":{"id":"ffbf9f807a229b69","repo":"emotion-js/emotion","slug":"emotion-babel-plugin-jsx-pragmatic-you-must-spec","errorCode":null,"errorMessage":"@emotion/babel-plugin-jsx-pragmatic: You must specify `module` and `import`","messagePattern":"@emotion/babel-plugin-jsx-pragmatic: You must specify `module` and `import`","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/babel-plugin-jsx-pragmatic/src/index.ts","lineNumber":60,"sourceCode":"      ],\n      t.stringLiteral(state.opts.module)\n    )\n\n    const targetPath = findLast(path.get('body'), p => p.isImportDeclaration())\n\n    if (targetPath) {\n      targetPath.insertAfter([importDeclar])\n    } else {\n      // Apparently it's now safe to do this even if Program begins with directives.\n      path.unshiftContainer('body', importDeclar)\n    }\n  }\n\n  return {\n    inherits: syntaxJsx,\n    pre: function () {\n      if (!(this.opts.module && this.opts.import)) {\n        throw new Error(\n          '@emotion/babel-plugin-jsx-pragmatic: You must specify `module` and `import`'\n        )\n      }\n    },\n    visitor: {\n      Program: {\n        exit: function (path, state) {\n          if (!state.get('jsxDetected')) return\n          addPragmaImport(path, state)\n        }\n      },\n\n      JSXElement: function (path, state) {\n        state.set('jsxDetected', true)\n      },\n      JSXFragment: function (path, state) {\n        state.set('jsxDetected', true)\n      }","sourceCodeStart":42,"sourceCodeEnd":78,"githubUrl":"https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/babel-plugin-jsx-pragmatic/src/index.ts#L42-L78","documentation":"@emotion/babel-plugin-jsx-pragmatic requires both a `module` and an `import` option to know which module to import the JSX pragma from and which binding to use. The plugin's `pre` hook runs before compilation and throws if either option is missing. Without both, the plugin cannot rewrite JSX pragma comments.","triggerScenarios":"Using @emotion/babel-plugin-jsx-pragmatic in a Babel config with only one of `module` or `import` set, or with neither (e.g. `['@emotion/babel-plugin-jsx-pragmatic', { module: '@emotion/react/jsx-runtime' }]` missing `import`).","commonSituations":"Copy-pasting a partial plugin config from docs, migrating Babel configs where options were dropped, or configuring the plugin inside a preset that forwards incomplete options.","solutions":["Add both `module` and `import` options to the plugin config, e.g. { module: '@emotion/react', import: 'jsx,css' }","If you don't need pragma rewriting, remove the plugin from your Babel config entirely","Verify options reach the plugin (a preset wrapper may strip them); log plugin options in a pre step to confirm"],"exampleFix":"// before\n['@emotion/babel-plugin-jsx-pragmatic', { module: '@emotion/react' }]\n// after\n['@emotion/babel-plugin-jsx-pragmatic', { module: '@emotion/react', import: 'jsx,css' }]","handlingStrategy":"validation","validationCode":"const opts = { module: '@emotion/react', import: 'jsx,css' };\nif (!opts.module || !opts.import) throw new Error('jsx-pragmatic needs both module and import');","typeGuard":"const hasPragmaOpts = (o) => typeof o === 'object' && o !== null && typeof o.module === 'string' && o.module.length > 0 && typeof o.import === 'string' && o.import.length > 0;","tryCatchPattern":null,"preventionTips":["Always set both module and import options when adding the plugin","Copy plugin config from official emotion docs, not blog posts","Add a build-time smoke test that runs babel on a fixture file to catch config errors early"],"tags":["babel","configuration","emotion"],"backgroundTag":"missing-required-option","analyzedSha":"b882bcba85132554992e4bd49e94c95939bbf810","analyzedAt":"2026-09-02T22:27:13.739Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}