Merge pull request #195 from relay-tools/issue-193-ems-webpack5

Support webpack 5 & relay-hooks 5.x (ESM)

examples/relay-hook-example/cra/package.json

@@ -12,7 +12,7 @@
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
     "relay-compiler": "^11.0.2",
-    "relay-hooks": "5.0.0",
+    "relay-hooks": "5.0.1",
     "relay-runtime": "11.0.2"
   }, 
   "devDependencies": {

examples/relay-hook-example/pagination-nextjs-ssr/package.json

@@ -26,7 +26,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "relay-hooks": "5.0.0",
+    "relay-hooks": "5.0.1",
     "relay-runtime": "11.0.2",
     "whatwg-fetch": "3.0.0",
     "react-infinite-scroller": "1.2.4"

examples/relay-hook-example/todo/package.json

@@ -48,7 +48,7 @@
     "flow-typed": "^2.5.1",
     "prettier": "^1.16.4",
     "relay-compiler": "11.0.2",
-    "webpack": "^4.29.6",
+    "webpack": "^5.56.1",
     "webpack-dev-server": "^3.2.1"
   },
   "prettier": {

examples/relay-hook-example/todo/server.js

@@ -17,65 +17,68 @@ import graphQLHTTP from 'express-graphql';
 import path from 'path';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
-import {schema} from './data/schema';
+import { schema } from './data/schema';
 import { renderToString } from 'react-dom/server';
-import App from './js/app'
-import html from './html'
+import App from './js/app';
+import html from './html';
 
 const APP_PORT: number = 3000;
 
 // Serve the Relay app
 // Calling webpack() without a callback as 2nd property returns a Compiler object.
 // The libdefs don't like it, but it's fine.  $FlowFixMe https://webpack.js.org/api/node/
 const compiler: webpack.Compiler = webpack({
-  mode: 'development',
-  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'index.js')],
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-    ],
-  },
-  output: {
-    filename: 'app.js',
-    path: '/',
-  },
+    mode: 'development',
+    entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'index.js')],
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                },
+            },
+        ],
+    },
+    output: {
+        filename: 'app.js',
+        path: '/',
+    },
+    resolve: {
+        preferRelative: true,
+    },
 });
 
 const app: WebpackDevServer = new WebpackDevServer(compiler, {
-  contentBase: '/public/',
-  publicPath: '/js/',
-  stats: {colors: true},
+    contentBase: '/public/',
+    publicPath: '/js/',
+    stats: { colors: true },
 });
 
 // Serve static resources
 app.use('/public', express.static(path.resolve(__dirname, 'public')));
 
 // Setup GraphQL endpoint
 app.use(
-  '/graphql',
-  graphQLHTTP({
-    schema: schema,
-    pretty: true,
-  }),
+    '/graphql',
+    graphQLHTTP({
+        schema: schema,
+        pretty: true,
+    }),
 );
 
 app.use('/', async (req, res) => {
-  const appString = renderToString( App );
+    const appString = renderToString(App);
 
-  res.send(html({
-    body: appString,
-    title: 'Relay • TodoMVC SSR'
-  }));
+    res.send(
+        html({
+            body: appString,
+            title: 'Relay • TodoMVC SSR',
+        }),
+    );
 });
 
-
-
 app.listen(APP_PORT, () => {
-  console.log(`App is now running on http://localhost:${APP_PORT}`);
+    console.log(`App is now running on http://localhost:${APP_PORT}`);
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-hooks",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "keywords": [
     "graphql",
     "relay",
@@ -23,15 +23,16 @@
   },
   "scripts": {
     "clean": "rimraf lib",
-    "compile": "npm run clean && tsc && tsc --project tsconfig.esm.json && npm run build:js && npm run rollup",
+    "compile": "npm run clean && tsc && tsc --project tsconfig.esm.json && npm run build:js && npm run build:replace && npm run rollup",
     "rollup": "rollup -c",
     "build": "npm run compile && npm run test",
     "test": "cross-env NODE_ENV=test jest --coverage",
     "format": "prettier --write \"src/**/*.{j,t}s*\"",
     "format:ci": "prettier --list-different \"src/**/*.{j,t}s*\"",
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
     "prepublishOnly": "npm run build",
-    "build:js": "babel lib --out-dir lib --extensions \".js,.jsx\" && babel lib/es --out-dir lib/es --extensions \".js,.jsx\""
+    "build:js": "babel lib --out-dir lib --extensions \".js,.jsx\" && babel lib/es --out-dir lib/es --extensions \".js,.jsx\"",
+    "build:replace": "replace-in-file --configFile=replace.config.js"
   },
   "dependencies": {
     "@restart/hooks": "^0.3.1",
@@ -58,6 +59,7 @@
     "@types/relay-runtime": "10.1.2",
     "@typescript-eslint/eslint-plugin": "2.25.0",
     "@typescript-eslint/parser": "2.25.0",
+    "replace-in-file": "6.2.0",
     "cross-env": "^7.0.2",
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.10.1",

replace.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    files: 'lib/**/*.*',
+    from: /import \* as /g,
+    to: 'import ',
+};