webpack config that excludes all node_modules except one

Question

I am working on a react app that uses skpm and react-sketchapp. I am importing a node module that uses ES.Next syntax, so I need to use babel to parse that modules directory (node_modules/react-native-calendars ).

skpm acts as the packager for the app, and uses webpack with babel-loader. The webpack config file in skpm is set to exclude the node_modules directory. As such, I am getting a build error in the node_modules/react-native-calendars directory.

I think I can provide a webpack.config.js file in the root of my project that overrides the node_modules exlcude for node_modules/react-native-calendars.

In modules / rules I originally had:

include: (/node_modules\/react-native-calendars/), exclude: (/node_modules/),

but I think I need something like:

exclude: new RegExp (/node_modules\/(?!(react-native-calendars))/),

Here is the entire webpack.config.js:

module.exports = { module: { rules: [ { test: /\.jsx?$/, exclude: new RegExp (/node_modules\/(?!(react-native-calendars))/), use: { loader: 'babel-loader', options: { presets: ['react', 'es2015', 'stage-0'], plugins: ['transform-runtime', 'transform-class-properties'] } } } ] } };

And here is a link to the repo (only two short files in /src and a webpack config) : https://github.com/pcooney10/rn-calendar.

EDIT
I have changed the test from /\.jsx$/ to /\.jsx?$/, which is a step in the right direction, but now it seems that none of the imports in /node_modules/react-native-calendars are working. I am getting pages of logs that say Module not found: Error: Can't resolve 'SomeModule' and Field 'browser' doesn't contain a valid alias configuration.

EDIT 2: Do I need some sort of path.resolve(__dirname,..) statement?

Your test is explicitly for .jsx files, but you say you want to process .js. Is that your issue? — loganfsmyth
– loganfsmyth, Commented Jul 19, 2017 at 3:01
@loganfsmyth I was working off of this example, which uses .jsx instead of .js. When I switch it to .js, I get a whole slew of errors that say my modules can't be found. — 0xPingo
– 0xPingo, Commented Jul 19, 2017 at 3:09
Here is a discussion of the issue on github, it may provide some context is helpful. @loganfsmyth — 0xPingo
– 0xPingo, Commented Jul 19, 2017 at 3:10
Are your files .js or .jsx? /\.jsx?$/ would cover both. I don't really think there is enough info in the question to answer this. — loganfsmyth
– loganfsmyth, Commented Jul 19, 2017 at 3:20
They are .js. Here is a link to a repo where you can reproduce the issue, I have also updated my original question to be a bit more descriptive. — 0xPingo
– 0xPingo, Commented Jul 19, 2017 at 4:49

Shafqat · Accepted Answer · 2017-10-17 19:43:13Z

2

You can simply do that:

{ test: /\.jsx?$/, exclude: /node_modules\/(?!THIS_MODULE|ANOTHER_MODULE)\/).*/ }

answered Oct 17, 2017 at 19:43

Shafqat

1,1761 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MartianMartian Over a year ago

exclude: /(node_modules|bower_components)/,

Collectives™ on Stack Overflow

webpack config that excludes all node_modules except one

1 Answer 1

1 Comment

Hot Network Questions