How to use "webpack.DefinePlugin" with React Gatsby and React-Bodymoving?

Question

I am pretty new to React but I want to set

BODYMOVIN_EXPRESSION_SUPPORT in Webpack's Define plugin with Gatsby v1. I followed the links below but I don't get what exactly I suppose to do...

https://github.com/QubitProducts/react-bodymovin

https://www.gatsbyjs.org/docs/environment-variables/

I made the file named .env.development and put it to src folder. the content in this file is below.

plugins: ([
    new webpack.DefinePlugin({
        BODYMOVIN_EXPRESSION_SUPPORT: true
    })
])

The folder structures is

root--
     |
     |- public       //where the build goes
     |
     |- src --       //where I develop site
             |-components
             |-data
             |-pages
             |-style
             |-.env.development

What I noticed is there is a line said

/*global BODYMOVIN_EXPRESSION_SUPPORT*/

in bodymovin library and I think I just need to change that. I could modify in library directly maybe but I don't think that a best way to get around this problem. Does someone know how to set this up right?

Thanks in advance!

Calsal · Answer 1 · 2019-09-02T09:29:17.383

EDIT 2019-09-02

To use environment variables from .env files I recommend using dotenv because it's so simple. Here's an example that creates an object of all the variables in the .env file and makes them accessible on the client side (i.e in React) through DefinePlugin.

// gatsby-node.js

var dotenv = require('dotenv');
const env = dotenv.config().parsed;
// Create an object of all the variables in .env file
const envKeys = Object.keys(env).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(env[next]);
  return prev;
}, {});

exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => {
  actions.setWebpackConfig({
    plugins: [
      // Add the environment variables to webpack.DefinePlugin with define().
      plugins.define(envKeys)
    ]
  });
};

Here's an example of how I get the application name and version from package.json and using it in my service worker, I'm using Gatsby V2 though. Having the version in the service worker makes caching easier to handle. As you wrote, DefinePlugin is the way to go but it's a bit different when we use it in Gatsby.

We need to import the package.json file and add our custom webpack configuration in gatsby-node.js, with plugins.define() we tell webpack to use DefinePlugin:

const packageJson = require('./package');

exports.onCreateWebpackConfig = ({
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    plugins: [
      plugins.define({
        __NAME__: JSON.stringify(packageJson.name),
        __VERSION__: JSON.stringify(packageJson.version),
      }),
    ],
  })
}

The two defined variables __NAME__ and __VERSION__ are now accessible in my service worker sw.js:

self.addEventListener('install', function (e) {
  // eslint-disable-next-line
  console.log(__NAME__, __VERSION__);
  e.waitUntil(
    caches.open(__NAME__ + __VERSION__).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

Gatsby Reference: https://www.gatsbyjs.org/docs/add-custom-webpack-config/

How to use "webpack.DefinePlugin" with React Gatsby and React-Bodymoving?

1 Answers1