Post HERE if you need help Getting Started

I know the forum is pretty sparse at present since Bridgetown is so new, but if you’re out there kicking the tires and trying out Bridgetown (and I know people who are doing that RIGHT NOW), feel free to post here if you’re looking for any advice or tips how to get up and running successfully.

3…2…1…GO! :smile:

Hello,

I’m getting start with Bridgetown and the liquid gem appears to be giving me trouble. When I try to run:

bundle exec bridgetown serve

I get the message:

  Liquid Exception: undefined method `split' for nil:NilClass in /home/thomas/grappling/src/_layouts/default.html
                    ------------------------------------------------
 Bridgetown 0.13.0   Please append `--trace` to the `serve` command 
                     for any additional information or backtrace. 
                    ------------------------------------------------

Any ideas? If more information is needed let me know. Thanks!

1 Like

Hey, I appreciate you reaching out about this. I going to guess it has something to do with the Webpack setup (the default layout has Liquid tags in the head via the src/_includes/head.html template to load in the CSS and JS files).

Can you look in your .bridgetown-webpack/manifest.json file and see what it has in there? (If you’re in the terminal, just type cat .bridgetown-webpack/manifest.json.) For example, mine looks like this:

{
  "main.css": "../css/all.fdc0faee433508773142.css",
  "main.js": "all.e5084557b42c9c306239.js",
  "main.css.map": "../css/all.fdc0faee433508773142.css.map",
  "main.js.map": "all.e5084557b42c9c306239.js.map",
  "../fonts/index.scss": "../fonts/f49834a0a6541638179c869ef03d598f.woff2"
}

Or if you don’t want to use Webpack, you can just take out the webpack_path tags that are in src/_includes/head.html.

Let me know how that goes.

{
  "main.js": "all.6ec86012cccb6804f62c.js",
  "main.js.map": "all.6ec86012cccb6804f62c.js.map",
  "../fonts/index.scss": "../fonts/df215a2b43bf700daa3c952e3d363869.woff2"
}

That’s the content of my manifest.json.

Ah, so it looks like it’s not picking up the stylesheet any more. Assuming you want that, you’ll need to double-check that frontend/javascript/index.js has import "../styles/index.scss" at the top of the file. Otherwise Webpack won’t know where to look for the CSS to bundle in.

If that doesn’t work, maybe include the contents of your webpack.config.js file here in case something in there is relevant.

The content of my index.scss is:

@import 'tufte.css';

Is that the right thing to do to let it know about a different css file?

The content of my webpack.config.js is:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");

module.exports = {
  entry: "./frontend/javascript/index.js",
  devtool: "source-map",
  // Set some or all of these to true if you want more verbose logging:
  stats: {
    modules: false,
    builtAt: false,
    timings: false,
    children: false,
  },
  output: {
    path: path.resolve(__dirname, "output", "_bridgetown", "static", "js"),
    filename: "all.[contenthash].js",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "../css/all.[contenthash].css",
    }),
    new ManifestPlugin({
      fileName: path.resolve(__dirname, ".bridgetown-webpack", "manifest.json"),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: [
              "@babel/plugin-proposal-class-properties",
              [
                "@babel/plugin-transform-runtime",
                {
                  helpers: false,
                },
              ],
            ],
          },
        },
      },
      {
        test: /\.(s[ac]|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                includePaths: [
                  path.resolve(__dirname, "src/_components"),
                  path.resolve(__dirname, "src/_includes"),
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
        loader: "file-loader",
        options: {
          outputPath: "../fonts",
          publicPath: "../fonts",
        },
      },
    ],
  },
};

That should be working…I just tried a new project and added tufte.css off of github, and that did build. So if you run yarn webpack-build, does Webpack show a list of a bunch of files including lines like ../css/all.e0d597ee5dfa64966f70.css? Or is it a much shorter list?

After running yarn webpack-build I get:

ERROR in ./frontend/styles/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './etbook/ot-bold-webfont.woff2' in '/home/thomas/grappling/frontend/styles'
    at /home/thomas/grappling/node_modules/webpack/lib/Compilation.js:925:10
    at /home/thomas/grappling/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /home/thomas/grappling/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /home/thomas/grappling/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /home/thomas/grappling/node_modules/neo-async/async.js:2830:7
    at /home/thomas/grappling/node_modules/neo-async/async.js:6877:13
    at /home/thomas/grappling/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/thomas/grappling/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/thomas/grappling/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/thomas/grappling/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/thomas/grappling/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/thomas/grappling/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/thomas/grappling/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/thomas/grappling/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
    at /home/thomas/grappling/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:79:11)
 @ ./frontend/javascript/index.js 1:0-30

OK that’s actually a good sign! Webpack is trying to build the bundle, but it’s just missing some files.

I think if you download a ZIP from https://github.com/edwardtufte/tufte-css and then put the et-book folder in your frontend/styles folder, then it will build.

Right on, I got everything fixed thanks to your help! The issue was that I tried to add the woff2 font files but had gotten rid of the other font files which messed things up.

1 Like

Sweet! Glad you got it sorted out :+1: