Search code examples
reactjswebpackrequirebabeljsbabel-register

Webpack + Babel require fails in global scope but works inside functions


I'm using webpack 1.12.14 and cannot require image to a global const e.g.

const icon = require("icon.svg");
class TestClass {

It fails with [Error: Cannot find module 'icon.svg'] code: 'MODULE_NOT_FOUND' }

Error: Cannot find module 'icon.svg'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (Test.js:15:19)
at Module._compile (module.js:409:26)
at loader (PATH/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (PATH/node_modules/babel-register/lib/node.js:136:7)

From my webpack.config:

resolve: {
    modulesDirectories: ["web_modules", "node_modules", "images"]
},

and the loaders:

 {
    test: /\.js(x?)$/,
    loader: "babel",
    exclude: /node_modules/,
    query: babelOptions
 },
 {
        test: /\.svg$/,
        loaders: [
            "file?name=[hash].[ext]"
        ]
    }

My babelOptions.js

exports.babelOptions = {
    presets: ["es2015", "react"]
 }

I can require in functions or in the constructor for example:

class TestClass {
    constructor() {
       const icon = require("icon.svg");
    }
}

Solution

  • Upgrade to webpack 3.4 solved it