DEV Community

Discussion on: React Splide with Gatsby: Top Tip

Collapse
brunnerlivio profile image
Livio Brunner

Ah I think Gatsby does not work well with UMD library output. I've changed the third party library to use CommonJS and now I don't need any workarounds.

Here is my rollup config:

import resolve from '@rollup/plugin-node-resolve';
import sourcemaps from 'rollup-plugin-sourcemaps';

export default {
  input: {
    index: 'dist-transpiled/index',
    // 'routing/index': 'dist-transpiled/routing/index'
  },
  output: [
    {
      dir: 'dist/',
      entryFileNames: '[name].esm.js',
      chunkFileNames: '[name]-[hash].esm.js',
      format: 'es',
      sourcemap: true,
    },
    {
      dir: 'dist/',
      format: 'commonjs',
      preferConst: true,
      sourcemap: true,
    },
  ],
  external: (id) => !/^(\.|\/)/.test(id),
  plugins: [
    resolve(),
    sourcemaps(),
  ],
};
Enter fullscreen mode Exit fullscreen mode

The libraries tsconfig.json:

{
  "compilerOptions": {
    "outDir": "dist-transpiled",
    "module": "es2015",
    "lib": ["dom", "es2015"],
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "declaration": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2015",
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}
Enter fullscreen mode Exit fullscreen mode

and my build command:

tsc -p . && rollup -c

Collapse
jamiebradley profile image
Jamie Bradley Author

Sorry @brunnerlivio I missed your comment. That's a great find, I wasn't sure of the root cause myself but your insight is really useful. Thank you.

Thread Thread
brunnerlivio profile image
Livio Brunner

Worte an article shedding a light on this here:
dev.to/brunnerlivio/use-stencil-wi...