Develop Reference

How to configure Relay.JS in Vite?

I'm trying to migrate my React project from CRA to Vite, this is my vite.config.js:
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
import envCompatible from 'vite-plugin-env-compatible'
import relay from "vite-plugin-relay"
import macrosPlugin from "vite-plugin-babel-macros"
import path from 'path';
import fs from 'fs/promises';
export default defineConfig({
resolve: {
alias: {
'~': path.resolve(__dirname, 'src'),
'#material-ui/core': path.resolve(__dirname, 'node_modules/#material-ui/core')
}
},
esbuild: {
loader: "tsx",
include: /src\/.*\.[tj]sx?$/,
exclude: [],
},
optimizeDeps: {
esbuildOptions: {
plugins: [
{
name: "load-js-files-as-jsx",
setup(build) {
build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
loader: "tsx",
contents: await fs.readFile(args.path, "utf8"),
}));
},
},
],
},
},
define: {
global: {},
},
plugins: [
envCompatible(),
react(),
relay,
//macrosPlugin(),
],
})
My GraphQL query files are like this:
import graphql from 'babel-plugin-relay/macro'
const getQuery = () => graphql`
query UserQuery($id: ID!) {
user(id: $id) {
id
fullName
}
}
`
export default getQuery
When I tried to run the project in dev mode (command $ vite), I got this error:
So I did some search and replaced vite-plugin-relay to vite-plugin-babel-macros like this:
// others import
import relay from "vite-plugin-relay"
import macrosPlugin from "vite-plugin-babel-macros"
export default defineConfig({
// configs like bellow
plugins: [
envCompatible(),
react(),
//relay,
macrosPlugin(),
],
})
So I started to get a new error:
How can I configure Relay to work on Vite.JS?

Might be a bit late, but the issue has been fixed in Relay#13 and you can find some workarounds in this thread for older versions of Relay :
https://github.com/facebook/relay/issues/3354
You can also try adding the option eagerEsModules: true to your relay babel plugin configuration.

Unless you have some specific usecase that requires the use of babel-plugin-relay, your issue should be resolved if you change your imports from
import graphql from 'babel-plugin-relay/macro'
to
import { graphql } from "react-relay";
You should only need the relay vite plugin at that point, and can remove vite-plugin-babel-macros

There's a few things wrong with your setup.
1. Don't use vite-plugin-babel-macros:
Use #vitejs/plugin-react instead.
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import relay from "vite-plugin-relay";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [relay, react({
babel: {
plugins: ['babel-plugin-macros']
},
})],
});
You can probably get it to work with vite-plugin-babel-macros, but the later is an official plugin.
2. Don't use 'babel-plugin-relay/macro':
Use the following instead:
import { graphql } from "react-relay";
It's unclear to me why the official docs suggest using babel-plugin-relay/macro, but that just doesn't work.
3. Configure relay.config.js correctly:
{
"src": "./src",
"language": "typescript",
// Change this to the location of your graphql schema
"schema": "./src/graphql/schema.graphql",
"exclude": [
"**/node_modules/**",
"**/__mocks__/**",
"**/__generated__/**"
],
"eagerEsModules": true
}
In particular, make sure you use language: typescript and eagerEsModules.
4. Sample repository
I wrote a sample repository showing how to properly configure React Relay with Vite.js and TypeScript, you can find it here.

Rollup + React 17 with new JSX Transform - "React is not defined"

I'm trying to prototype a microfrontend architecture with Rollup and a couple of create-react-app applications. However when I locally yarn link my external app with the container app, I run into the following error:
ReferenceError: React is not defined
23500 | return /#PURE/React.createElement("div", {
| ^ 23501 | id: "container",
23502 | className: "flex flex-col h-screen"
23503 | }, /#PURE/React.createElement(BrowserRouter, null, /#PURE/React.createElement(Header, {
I think it's because we're not importing React at the top of every component/file because of React 17's new JSX Transform allowing you to not have to do that. I'd really like to be able to build our micro frontend package without having to import React in every file, is there a way to do this?
Here is the rollup.config.js:
import babel from 'rollup-plugin-babel';
import commonjs from '#rollup/plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import resolve from '#rollup/plugin-node-resolve';
import image from '#rollup/plugin-image';
import visualizer from 'rollup-plugin-visualizer';
import includePaths from 'rollup-plugin-includepaths';
import replace from '#rollup/plugin-replace';
import pkg from './package.json';
const extensions = ['.js', '.jsx', '.ts', '.tsx'];
export default {
input: './src/App.jsx',
output: [
{
file: pkg.main,
format: 'cjs',
},
{
file: pkg.module,
format: 'esm',
},
],
plugins: [
external(),
postcss(),
resolve({
mainFields: ['module', 'main', 'jsnext:main', 'browser'],
extensions,
}),
image(),
visualizer(),
includePaths({ paths: ['./'] }),
replace({
'process.env.NODE_ENV': JSON.stringify('development'),
}),
babel({
exclude: 'node_modules/**',
plugins: [
[
'module-resolver',
{
root: ['src'],
},
],
],
presets: ['#babel/preset-react'],
}),
commonjs(),
],
};

In tsconfig.json, add the following code
{
"compilerOptions": {
"jsx": "react-jsx",
}
}

Fixed this by adding { runtime: "automatic" } to the #babel/preset-react preset.
From the preset-react runtime docs:
automatic auto imports the functions that JSX transpiles to. classic does not automatic import anything.
Also mentioned in the React post about the new JSX transform:
Currently, the old transform {"runtime": "classic"} is the default option. To enable the new transform, you can pass {"runtime": "automatic"} as an option to #babel/plugin-transform-react-jsx or #babel/preset-react
Here's a sample:
{
// ...
plugins: [
// ...
babel({
// ...
presets: [
// ...
["#babel/preset-react", { runtime: "automatic" }],
]
})
]
}

Using rollup.js with es6

This is a follow-up question to How to set up rollup.js with a d3 plugin?.
I have little dummy module foo.js:
//.src/foo.js
import * as d3 from "d3";
export default function() {
return d3.select("body").append("div").text(42);
};
and an index.js:
export {default as foo} from "./src/foo";
for which I can apply rollup with the following rollup.config.js:
// rollup.config.js
import babel from "rollup-plugin-babel";
import * as meta from "./package.json";
export default {
input: "index.js",
external: ["d3"],
output: {
file: `build/${meta.name}.js`,
name: "d3",
format: "umd",
indent: false,
extend: true,
// banner: `// ${meta.homepage} v${meta.version} Copyright ${(new Date).getFullYear()} ${meta.author}`,
globals: {d3: "d3"},
plugins: [
babel({
exclude: "node_modules/**"})
]
},
};
This works fine.
However, if I add a es6 command like "const" to foo.js:
import * as d3 from "d3";
export default function() {
const num = 42;
return d3.select("body").append("div").text(num);
};
I get an
ERROR: Unexpected token: keyword «const»
at JS_Parse_Error.get (eval at ...)
How do I have to update my rollup.config.js to make it work?

The error that came up is unrelated to rollup.js. I missed that I run uglify-js which caused that problem...

Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)

I'm using a single template with vue and scss in rollupjs, but I can't use #import. .. I get an error. Why is this. Put the config file on it
import { terser } from "rollup-plugin-terser";
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
// wild card
import multi from '#rollup/plugin-multi-entry';
import VuePlugin from 'rollup-plugin-vue'
import babel from '#rollup/plugin-babel';
export default {
input: './src/javascripts/**/*.js',
output: {
dir: 'output',
format: 'cjs'
},
plugins: [
VuePlugin({
preprocessOptions: {
scss: {
includePaths: ['./src/style', 'node_modules'],
},
}
}),
terser(),
resolve(),
commonjs(),
babel({ babelHelpers: 'bundled' }),
multi()
]
};
This is the .vue file I'm using.
<template>
〜abridgement〜
</template>
<script>
〜abridgement〜
</script>
<style lang="scss" scoped>
#import "./src/style/foundation/xxx";
#import "./src/style/foundation/xxx";

Rollup Error: 'default' is not exported by node_modules/react/index.js

I have a project where I use webpack and want to switch to rollup.js but I have trouble regarding the plugin #rollup/plugin-commonjs.
My rollup.conf.js
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import nodePolyfills from 'rollup-plugin-node-polyfills';
const config = {
input: 'site/templates/scripts/master.js',
output: [
{
file: 'site/templates/scripts/master.min.js',
format: 'cjs'
}
],
plugins: [
nodePolyfills(),
resolve({
browser: true
}),
commonjs({
include: /node_modules/,
namedExports: {
'react': ["useState", "useEffect"],
'#apollo/client': ['ApolloProvider', 'ApolloClient', 'HttpLink', 'InMemoryCache', 'useQuery', 'gql'],
'styled-components': [ 'styled', 'css', 'ThemeProvider' ]
}
}),
babel({
babelrc: true,
exclude: 'node_modules/**'
}),
terser()
]
};
export default config;
The Error I'm getting and don't know to solve
site/templates/scripts/master.js → site/templates/scripts/master.min.js...
[!] Error: 'default' is not exported by node_modules/react/index.js, imported by site/templates/scripts/src/BgProductRecommendations/FredhopperProduct.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
site/templates/scripts/src/BgProductRecommendations/FredhopperProduct.js (3:7)
1: 'use strict';
2:
3: import React from "react";
^
4:
5: const FredhopperProduct = ({
Error: 'default' is not exported by node_modules/react/index.js, imported by site/templates/scripts/src/BgProductRecommendations/FredhopperProduct.js
at error (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:10152:30)
at Module.error (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14487:16)
at handleMissingExport (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14388:28)
at Module.traceVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14871:24)
at ModuleScope.findVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:13448:39)
at FunctionScope.findVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:8661:38)
at ChildScope.findVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:8661:38)
at MemberExpression.bind (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:11285:49)
at CallExpression$1.bind (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:8746:23)
at CallExpression$1.bind (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:11473:15)
The https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module page does not really help, since I have all named exports which I use in my config.

Finally I found what was wrong. I needed the #rollup/plugin-replaceplugin to replace process.env.NODE_ENV
Here's the working code
It needed also some more namedExports.
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import nodePolyfills from 'rollup-plugin-node-polyfills';
import replace from '#rollup/plugin-replace';
import React from 'react';
import ReactIs from 'react-is';
import ReactDOM from 'react-dom';
const config = {
input: 'site/templates/scripts/master.js',
output: [
{
file: 'site/templates/scripts/master.min.js',
format: 'cjs'
}
],
plugins: [
replace({
"process.env.NODE_ENV": JSON.stringify("development")
}),
nodePolyfills(),
resolve({
browser: true
}),
commonjs({
include: /node_modules/,
namedExports: {
'react-is': Object.keys(ReactIs),
'react': Object.keys(React),
'react-dom': Object.keys(ReactDOM),
'#apollo/client': ['ApolloProvider', 'ApolloClient', 'HttpLink', 'InMemoryCache', 'useQuery', 'gql'],
'styled-components': [ 'styled', 'css', 'ThemeProvider' ]
}
}),
babel({
babelrc: true,
exclude: 'node_modules/**'
}),
terser()
]
};
export default config;

As of the latest #rollup/plugin-commonjs version, namedExports are handled by default.
Also try using this rollup babel config, requires the #babel/preset-react module to be installed
babel({
exclude: "node_modules/**",
presets: ["#babel/preset-react"],
babelHelpers: "bundled",
}),
And since the date of the issue most rollup plugins have been namespaced so try to reinstall #rollup/plugin-babel

The solution for this problem is to update commonjs option to make it as below
import commonjs from '#rollup/plugin-commonjs';
// rollup.config.js
export default {
input: 'src/app.ts',
output: [
{
...
commonjs({
include: /node_modules/,
requireReturnsDefault: 'auto', // <---- this solves default issue
}),
documentation link:
https://www.npmjs.com/package/#rollup/plugin-commonjs
search for requireReturnsDefault