Jump to content


Photo

General JavaScript


  • Please log in to reply
404 replies to this topic

#401 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,042 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 11 May 2017 - 01:51 PM

Does anyone know how to get a .jsx extension working with webpack and babel? I keep switching between projects, and it drives me nuts having to manually change my syntax highlighting each time.
 
I've tried the below and it still doesn't compile.

{ test: /\.(js|jsx)$/, use: 'babel-loader' }


#402 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 3,858 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 11 May 2017 - 04:57 PM

 

Does anyone know how to get a .jsx extension working with webpack and babel? I keep switching between projects, and it drives me nuts having to manually change my syntax highlighting each time.
 
I've tried the below and it still doesn't compile.

{ test: /\.(js|jsx)$/, use: 'babel-loader' }

The regex below should cover .js and .jsx although your regex above should also match. I can't see why the config above is not compiling though Babel.  Do you have your babelrc configured correctly with the presets you require?

/\.jsx?$/


#403 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,042 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 11 May 2017 - 09:35 PM

The regex below should cover .js and .jsx although your regex above should also match. I can't see why the config above is not compiling though Babel.  Do you have your babelrc configured correctly with the presets you require?

/\.jsx?$/

 
As well as the regex above, I had to add the following to my webpack config to get it to work:

resolve: {
  extensions: ['.js', '.jsx']
}

It looks like the alternative is to explicitly add the file extension to any require or import statement, otherwise webpack has no idea what to do.



#404 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 3,858 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 12 May 2017 - 07:20 AM

That makes sense, I think with Webpack questions we should post our entire config as there are many moving parts that can break things that might be seemingly unrelated :)

 

With the extensions as I am sure you know now that you can add anything like .scss, .jpg etc then we don't need to specify them in our imports.  It ties you into Webpack but I don't think that's a bad thing considering how well established and maintained Webpack is now.


Edited by rbrtsmith, 12 May 2017 - 07:22 AM.


#405 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 3,858 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 12 May 2017 - 09:58 AM

resolve: {
    modules: ['src', 'node_modules'],
    extensions: ['.js', '.jsx', '.scss'],
  },

One neat thing with the resolve config that you can pass is `modules`.  This will allow you to import directly from a path within your modules.

So say you were in my-project/src/components/header/title.jsx...
 

// to import a utility we could do
import myUtility from '../../utils/myUtility


// OR
import myUtility from 'utils/myUtility'

It's pretty handy, especially as a project grows and a component might have to be moved elsewhere - it means you then wont have to go updating all the paths for relative imports.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users