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.

require instead of import

See original GitHub issue

I’d like to use this babel plugin with require declarations and it doesn’t seem to be working.

require('icon.svg')

I’m getting the usual error SyntaxError: Unexpected token < that is when the plugin is not there

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:7
  • Comments:5

github_iconTop GitHub Comments

1reaction
rubenillodocommented, Aug 4, 2017

I’ve made it (miraculously) work for myself here.

I’m also using Webpack/TypeScript (those guys where the ones changing the import syntax to require in the first place), and they compile the code expecting an ES6 module structure. To match that, I changed how the SVG function is returned, so that it’s within an object’s default property, as you can see below.

var default_avatar_svg_1 = function () {
    function default_avatar_svg_1(props) {
        return React.createElement("svg", (0, _extends3.default)({
            version: "1",
            xmlns: "http://www.w3.org/2000/svg",
            width: "21.333",
            height: "21.333",
            viewBox: "0 0 16.000000 16.000000"
        }, props), React.createElement("path", {
            d: "…"
        }));
    }

    return {
        default: default_avatar_svg_1
    };
}();

Thus, I haven’t created a PR here.

Although it works, I’m not particularly proud of the whole thing. It’s also the first time I fiddle within these three technologies, so I’m sure I might have done something stupid there. If any of you knows anything that could help me there, please do let me know!

0reactions
fernandopasikcommented, Oct 17, 2021

seems to have been fixed by #28

Read more comments on GitHub >

github_iconTop Results From Across the Web

JavaScript Require vs. Import - Bits and Pieces
1. Require statements can be called anywhere in the code · 2. Require can be called conditionally · 3. Import statements are asynchronous...
Read more >
Difference between node.js require and ES6 import and export
Require is Non-lexical, it stays where they have put the file. Import is lexical, it gets sorted to the top of the file....
Read more >
node.js - The difference between "require(x)" and "import x"
require loads anything assigned to module.exports in the package to the variable it's assigned to, or global scope if no left hand is...
Read more >
Require vs Import | Know The 4 Most Amazing Comparisons
Require is more of dynamic analysis, and import is more of static analysis. · Require Throws error at runtime and Import throws error...
Read more >
Compare require() vs import() in JavaScript | by Sumeet Bhalla
require() statements are called synchronously one by one whereas import() are called asynchronously and they are known to perform well compared ...
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