0

Webpack compilation was succesful but fails to load in the browser. On checking the web console, I discovered some modules could not be accessed in _webpack_require_. When I changed the es6 import syntax to require in the concerned module, the error thrown in the web console goes away. I don't intend going into every file and changing my import syntax to require. I have my .babelrc configured alongside with babel-loader in my webpack.config.js.

Really confused on what to do next as this is my first use of webpack

My webpack.config.js

 ***test: /\.(js|jsx)$/,
 include: [
   path.join(__dirname, 'client'),
   path.join(__dirname, './template')
 ],
 loader: 'babel-loader',
 exclude: /node_modules/,
 query: { cacheDirectory: true } ***

.babelrc file

{
  "presets": [
    "es2015",
    "react",
    "latest",
    "stage-2"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

flashMessage.js:13 Uncaught TypeError: Cannot read property 'ADD_FLASH_MESSAGE' of undefined at eval (flashMessage.js:13) at Object. (bundle.js:1406) at webpack_require (bundle.js:679) at fn (bundle.js:89) at eval (index.js:9) at Object. (bundle.js:1399) at webpack_require (bundle.js:679) at fn (bundle.js:89) at eval (index.js:9)

João Cunha
  • 9,929
  • 4
  • 40
  • 61
Hephzaron
  • 1
  • 1

2 Answers2

0

I'm personnaly configuring babel-loader like this in webpack :

        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: ['react'],
          },
        },
Dyo
  • 4,429
  • 1
  • 15
  • 30
  • and vinay gosain have tried all of the above but it still persist, I think webpack should throw an error during compilation if babel-loader did not transpile my _import_ syntax, but compilation was successful, no errors or warning – Hephzaron Jan 24 '18 at 15:40
  • It seems the comment space cannot contain all of it , here's the git repo link to the webpack.config file [MyRepoLink](https://github.com/hephzaron/front-end-practise/blob/master/webpack.config.js) – Hephzaron Jan 26 '18 at 15:45
  • Have you tried removing `include : [path.join(__dirname, 'client'), path.join(__dirname, './template')]` ? – Dyo Jan 26 '18 at 16:39
0

The error persist after i changed my webpack.config altogether, I discovered the I did not return the Array.reduce method which was meant to mirror an array of actions, so webpack compiled it so long as the file path is correct but it failed to load due to the function returning void. Find the repo link here- Just a missing return keyword

Hephzaron
  • 1
  • 1