Skip to content

Unable to require/import images when using this plugin #93

Open
@PRossetti

Description

@PRossetti

I use this plugin for ignoring css, scss and svg require / import.

I have this in my src/server/index.js:

require('babel-register')({
  ignore: ['node_modules'],
  plugins: [
    "transform-react-jsx",
    [
      "babel-plugin-transform-require-ignore",
      {
        "extensions": [
          ".css", ".scss", ".svg"
        ]
      }
    ]
  ]
});

The problem is when in one of my isomorphic react components I try something like this:
const logo = require('./logo.svg');

This immediately breaks my server when I run it with node or nodemon (nodemon src/server/index.js) with this error:

/Users/myUser/Projects/courses/react-ssr/node_modules/babel-core/lib/transformation/file/index.js:558
throw err;
^

Error: /Users/myUser/Projects/courses/react-ssr/src/shared/App.js: ./logo.svg should notbe imported using default imports.
at PluginPass.enter (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-plugin-transform-require-ignore/lib/index.js:56:23)
at newFn (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/visitors.js:276:21)
at NodePath._call (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/path/context.js:76:18)
at NodePath.call (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/path/context.js:48:17)
at NodePath.visit (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/path/context.js:105:12)
at TraversalContext.visitQueue (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitMultiple (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/context.js:103:17)
at TraversalContext.visit (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/context.js:190:19)
at Function.traverse.node (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/index.js:114:17)
at NodePath.visit (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/path/context.js:115:19)

I need this plugin for ignoring those requires, otherwise my app breaks worst, and I need to require images because otherwise webpack doesn't find them and doesn't process them :(

Please help!

Some more information: I'm working in a React+Express project with SSR, inspired by this video: https://www.youtube.com/watch?v=tsEHfL-Ul1Y

BUT I don't won't to transpile my server code with webpack into new files. I only transpile my code on-the-fly with babel.

Hope you can help me!
Regards!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions