Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
PRossetti opened this issue Aug 14, 2018 · 0 comments
Open

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

PRossetti opened this issue Aug 14, 2018 · 0 comments

Comments

@PRossetti
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant