Importing react app into existing Webpack project

Question

I have a Rails app that uses Webpack to bundle its assets. It doesn't currently use React.

In a separate repository, I have created a React app. This React app basically implements a complex custom UI element. The plan is that I can import this react component into my main application.

So far I have added the git repo to my package.json file and can see that the source code of my react app is being downloaded into the /node_modules folder.

I can get Webpack to bundle the app by adding:

To the React app package.json:

"prepare": "npm run build"

And in my main application webpack.config

module.exports = { ... resolve: { ... alias: { MyReactApp: 'my-react-app/dist/bundle.js' } } }

But it seems to be bundling all the libraries that my React app uses inside bundle.js and not adding them to the dependency tree.

It appears that the prepare command is basically bundling my React app into a /dist/bundle.js file and Webpack is simply including this file as-is. I need Webpack to manage the dependencies of my React app, such that I don't have unnecessary libraries duplicated in the final Webpack output.

Is there a better way to achieve what I am trying to achieve?

tunaayberk · Accepted Answer · 2019-06-18 21:37:25Z

It is better to bundle them together. Basically, it is trying to bundle already bundled code. This may work:

resolve: { alias: { MyReactApp: 'my-react-app/index.js' } }

index.js should be main jsx starting point.

Additionally, you need to add compile rules for jsx files, I never bundled Rail apps but React apps you should follow these steps;

Add rule to webpack.config.js

module: { rules: [ { // this is so that we can compile any React, // ES6 and above into normal ES5 syntax test: /\.(js|jsx)$/, // we do not want anything from node_modules to be compiled exclude: /node_modules/, use: ["babel-loader"] }, ... ] }

Install Babel modules:

npm install @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader

create a file called .babelrc and paste the following code

{ "presets": ["@babel/env", "@babel/react"], "plugins": ["@babel/plugin-proposal-class-properties"] }

Run webpack though babel-node like following script

"webpack": "babel-node ./node_modules/webpack/bin/webpack"

This would be my approach to solve this problem. It will still import react to your project. But instead of adding the compiled project, it will add jsx files and will compile them during the bundling process.

Note:

babel/core this is used to compile ES6 and above into ES5
babel/node this is used so that we can import our plugins and packages inside the webpack.config.js rather than require them (it’s just something that I like, and maybe you’ll like it too)
babel/preset-env this will determinate which transformations or plugins to use and polyfills (i.e it provides modern functionality on older browsers that do not natively support it) based on the browser matrix you want to support
babel/preset-react this is going to compile the React code into ES5 code
babel-loader this is a Webpack helper that transforms your JavaScript dependencies with Babel (i.e. will transform the import
statements into require ones)

Collectives™ on Stack Overflow

Importing react app into existing Webpack project

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related