Tutorial feedback and issues

[Josh-McFarlin]

Docusaurus tutorial

The Docusaurus tutorial is very important: it is the very first thing a Docusaurus user sees (init template or CodeSandbox)

Please report here if anything does not work or is unclear.

[intsanerarity]

cant install remix-image on remix 2.8.1

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: authapp@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/remix
npm ERR! remix@"^2.8.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer remix@"^1.0.0" from [email protected]
npm ERR! node_modules/remix-image
npm ERR! remix-image@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[madsgodvinjensen]

On the step "Use component" in the tutorial there's a little problem. The code example is:

import Image from "remix-image";

<Image
  loaderUrl="/api/image"
  src="..."
  responsive={[
    {
      size: {
        width: 100,
        height: 100,
      },
      maxWidth: 200,
    },
  ]}
  dprVariants={[1, 3]}
/>

The import should however be:

import { Image } from "remix-image";

[constancerice]

I haven't been able to get this package to install on Node versions above 18. I just created a new remix project and it came out of the box with >=20, downgrading to 18 seemed to get it to work, but I got the following errors:

npm install -S remix-image @next-boost/hybrid-disk-cache
npm error code 1
npm error path /Users/oldicloud/git/bloomscroller/remix/node_modules/better-sqlite3
npm error command failed
npm error command sh -c prebuild-install || npm run build-release
npm error > [email protected] build-release
npm error > node-gyp rebuild --release
npm error
npm error
npm error TOUCH ba23eeee118cd63e16015df367567cb043fed872.intermediate
npm error ACTION deps_sqlite3_gyp_locate_sqlite3_target_copy_builtin_sqlite3 ba23eeee118cd63e16015df367567cb043fed872.intermediate
npm error TOUCH Release/obj.target/deps/locate_sqlite3.stamp
npm error CC(target) Release/obj.target/sqlite3/gen/sqlite3/sqlite3.o
npm error LIBTOOL-STATIC Release/sqlite3.a
npm error CXX(target) Release/obj.target/better_sqlite3/src/better_sqlite3.o
npm error rm ba23eeee118cd63e16015df367567cb043fed872.intermediate
npm error prebuild-install warn install No prebuilt binaries found (target=20.18.1 runtime=node arch=arm64 libc= platform=darwin)
npm error gyp info it worked if it ends with ok
npm error gyp info using [email protected]
npm error gyp info using [email protected] | darwin | arm64
npm error gyp info find Python using Python version 3.12.7 found at "/Library/Frameworks/Python.framework/Versions/3.12/bin/python3"
npm error gyp http GET https://nodejs.org/download/release/v20.18.1/node-v20.18.1-headers.tar.gz
npm error gyp http 200 https://nodejs.org/download/release/v20.18.1/node-v20.18.1-headers.tar.gz
npm error gyp http GET https://nodejs.org/download/release/v20.18.1/SHASUMS256.txt
npm error gyp http 200 https://nodejs.org/download/release/v20.18.1/SHASUMS256.txt
npm error gyp info spawn /Library/Frameworks/Python.framework/Versions/3.12/bin/python3
npm error gyp info spawn args [
npm error gyp info spawn args '/Users/oldicloud/.nvm/versions/node/v20.18.1/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm error gyp info spawn args 'binding.gyp',
npm error gyp info spawn args '-f',
npm error gyp info spawn args 'make',
npm error gyp info spawn args '-I',
npm error gyp info spawn args '/Users/oldicloud/git/bloomscroller/remix/node_modules/better-sqlite3/build/config.gypi',
npm error gyp info spawn args '-I',
npm error gyp info spawn args '/Users/oldicloud/.nvm/versions/node/v20.18.1/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm error gyp info spawn args '-I',
npm error gyp info spawn args '/Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/common.gypi',
npm error gyp info spawn args '-Dlibrary=shared_library',
npm error gyp info spawn args '-Dvisibility=default',
npm error gyp info spawn args '-Dnode_root_dir=/Users/oldicloud/Library/Caches/node-gyp/20.18.1',
npm error gyp info spawn args '-Dnode_gyp_dir=/Users/oldicloud/.nvm/versions/node/v20.18.1/lib/node_modules/npm/node_modules/node-gyp',
npm error gyp info spawn args '-Dnode_lib_file=/Users/oldicloud/Library/Caches/node-gyp/20.18.1/<(target_arch)/node.lib',
npm error gyp info spawn args '-Dmodule_root_dir=/Users/oldicloud/git/bloomscroller/remix/node_modules/better-sqlite3',
npm error gyp info spawn args '-Dnode_engine=v8',
npm error gyp info spawn args '--depth=.',
npm error gyp info spawn args '--no-parallel',
npm error gyp info spawn args '--generator-output',
npm error gyp info spawn args 'build',
npm error gyp info spawn args '-Goutput_dir=.'
npm error gyp info spawn args ]
npm error gyp info spawn make
npm error gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm error In file included from ../src/better_sqlite3.cpp:4:
npm error In file included from ./src/better_sqlite3.lzz:11:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/node.h:73:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8.h:24:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-array-buffer.h:12:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-local-handle.h:12:
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:465:30: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error SHARED_EXTERNAL_POINTER_TAGS(CHECK_SHARED_EXTERNAL_POINTER_TAGS)
npm error ^
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:465:30: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:465:30: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:465:30: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:465:30: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error PER_ISOLATE_EXTERNAL_POINTER_TAGS(CHECK_NON_SHARED_EXTERNAL_POINTER_TAGS)
npm error ^
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:466:35: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:693:61: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error static_assert(kJSObjectType + 1 == kFirstJSApiObjectType);
npm error ^
npm error , ""
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:694:55: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error static_assert(kJSObjectType < kLastJSApiObjectType);
npm error ^
npm error , ""
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-internal.h:695:63: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error static_assert(kFirstJSApiObjectType < kLastJSApiObjectType);
npm error ^
npm error , ""
npm error In file included from ../src/better_sqlite3.cpp:4:
npm error In file included from ./src/better_sqlite3.lzz:11:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/node.h:73:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8.h:24:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-array-buffer.h:13:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-object.h:9:
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-maybe.h:106:45: error: no template named 'is_lvalue_reference_v' in namespace 'std'; did you mean 'is_lvalue_reference'?
npm error template <class U, std::enable_if_t<!std::is_lvalue_reference_v>>
npm error ~~~~~^~~~~~~~~~~~~~~~~~~~~
npm error is_lvalue_reference
npm error /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include/c++/v1/__type_traits/is_reference.h:24:29: note: 'is_lvalue_reference' declared here
npm error struct _LIBCPP_TEMPLATE_VIS is_lvalue_reference : _BoolConstant<__is_lvalue_reference(_Tp)> {};
npm error ^
npm error In file included from ../src/better_sqlite3.cpp:4:
npm error In file included from ./src/better_sqlite3.lzz:11:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/node.h:73:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8.h:24:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-array-buffer.h:13:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-object.h:9:
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-maybe.h:106:69: error: expected '(' for function-style cast or type construction
npm error template <class U, std::enable_if_t<!std::is_lvalue_reference_v>>
npm error ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-maybe.h:123:43: error: no template named 'is_lvalue_reference_v' in namespace 'std'; did you mean 'is_lvalue_reference'?
npm error template <class T, std::enable_if_t<!std::is_lvalue_reference_v>* = nullptr>
npm error ~~~~~^~~~~~~~~~~~~~~~~~~~~
npm error is_lvalue_reference
npm error /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include/c++/v1/__type_traits/is_reference.h:24:29: note: 'is_lvalue_reference' declared here
npm error struct _LIBCPP_TEMPLATE_VIS is_lvalue_reference : _BoolConstant<__is_lvalue_reference(_Tp)> {};
npm error ^
npm error In file included from ../src/better_sqlite3.cpp:4:
npm error In file included from ./src/better_sqlite3.lzz:11:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/node.h:73:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8.h:24:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-array-buffer.h:13:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-object.h:9:
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-maybe.h:123:67: error: expected '(' for function-style cast or type construction
npm error template <class T, std::enable_if_t<!std::is_lvalue_reference_v>* = nullptr>
npm error ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^
npm error In file included from ../src/better_sqlite3.cpp:4:
npm error In file included from ./src/better_sqlite3.lzz:11:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/node.h:73:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8.h:33:
npm error In file included from /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-function.h:11:
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-function-callback.h:151:66: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error kReturnValueDefaultValueIndex - kReturnValueIndex);
npm error ^
npm error , ""
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/v8-function-callback.h:153:50: warning: 'static_assert' with no message is a C++17 extension [-Wc++17-extensions]
npm error kIsolateIndex - kReturnValueIndex);
npm error ^
npm error , ""
npm error In file included from ../src/better_sqlite3.cpp:4:
npm error In file included from ./src/better_sqlite3.lzz:11:
npm error /Users/oldicloud/Library/Caches/node-gyp/20.18.1/include/node/node.h:696:8: error: no template named 'optional' in namespace 'std'
npm error std::optionalstd::string builder_script_path;
npm error ~~~~~^
npm error ./src/util/macros.lzz:157:21: error: no member named 'AccessorSignature' in namespace 'v8'
npm error v8::AccessorSignature::New(isolate, recv)
npm error ~~~~^
npm error ./src/objects/database.lzz:180:21: warning: variable 'status' set but not used [-Wunused-but-set-variable]
npm error int status = sqlite3_db_config(db_handle, SQLITE_DBCONFIG_ENABLE_LOAD_EXTENSION, 1, NULL);
npm error ^
npm error ./src/util/binder.lzz:37:51: error: no member named 'CreationContext' in 'v8::Object'
npm error v8::Localv8::Context ctx = obj->CreationContext();
npm error ~~~~~^
npm error 23 warnings and 7 errors generated.
npm error make: *** [Release/obj.target/better_sqlite3/src/better_sqlite3.o] Error 1
npm error gyp ERR! build error
npm error gyp ERR! stack Error: make failed with exit code: 2
npm error gyp ERR! stack at ChildProcess. (/Users/oldicloud/.nvm/versions/node/v20.18.1/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:209:23)
npm error gyp ERR! System Darwin 23.5.0
npm error gyp ERR! command "/Users/oldicloud/.nvm/versions/node/v20.18.1/bin/node" "/Users/oldicloud/.nvm/versions/node/v20.18.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--release"
npm error gyp ERR! cwd /Users/oldicloud/git/bloomscroller/remix/node_modules/better-sqlite3
npm error gyp ERR! node -v v20.18.1
npm error gyp ERR! node-gyp -v v10.1.0
npm error gyp ERR! not ok

I got similar results with Node 22.