Error Running generate_client_assets

[tylerasselin]

Hello I'm trying to use reactivated in my existing project without nix. The project was bootstrapped from cookiecutter-django and I have been doing a lot of development with everything using Docker Compose and I would like to maintain that.

I have followed all of the steps which are laid out in the Existing Projects section of the docs. I changed the base image in my Dockerfile from 3.9-slim-bullseye to nikolaik/python-nodejs:python3.9-nodejs16-slim to make it easy to have node and python side-by-side.

When I bring everything up I get the following error after starting the Django dev server:

Error: Cannot find module '/app/node_modules/_reactivated/renderer.js'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []

I have determined that is because I don't have the /nodemodules/_reactivated/ directory and after doing some digging in this repository I found that directory is generated via the generate_client_assets management command. Unfortunately, that management command is failing with the following:

[12/Apr/2022 21:13:21,313] Generating interfaces and client side code
/app/node_modules/ts-morph/dist/ts-morph.js:919
                throw new common.errors.NotImplementedError(`Unexpected! Inserting syntax kind of ${common.getSyntaxKindName(expectedKind)}`
                ^

NotImplementedError: Unexpected! Inserting syntax kind of InterfaceDeclaration, but ExpressionStatement was inserted.
    at getRangeWithoutCommentsFromArray (/app/node_modules/ts-morph/dist/ts-morph.js:919:23)
    at insertIntoBracesOrSourceFileWithGetChildren (/app/node_modules/ts-morph/dist/ts-morph.js:2525:12)
    at SourceFile._insertChildren (/app/node_modules/ts-morph/dist/ts-morph.js:11468:20)
    at SourceFile.insertInterfaces (/app/node_modules/ts-morph/dist/ts-morph.js:11280:25)
    at SourceFile.addInterfaces (/app/node_modules/ts-morph/dist/ts-morph.js:11274:25)
    at SourceFile.addInterface (/app/node_modules/ts-morph/dist/ts-morph.js:11271:25)
    at Object.<anonymous> (/app/node_modules/reactivated/generator.js:56:39)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
[12/Apr/2022 21:13:29,747] Finished generating.

I think that I'm probably missing some configuration, but I'm not super experienced with front-end development and its been a few years since I've worked with react at all. So, I'm having trouble troubleshooting this one.

I'm using the current reactivated main branch to try to take advantage of the most recent changes that aren't on pypi yet.

Versions within my Django container:

root@f89f839634db:/app# node -v
v16.14.2
root@f89f839634db:/app# npm -v
8.5.5
root@f89f839634db:/app# python --version
Python 3.9.12

Dockerfile

# https://github.com/nikolaik/docker-python-nodejs
FROM nikolaik/python-nodejs:python3.9-nodejs16-slim as python

# Python build stage
FROM python as python-build-stage

ARG BUILD_ENVIRONMENT=local

# Install apt packages
RUN apt-get update && apt-get install --no-install-recommends -y \
  # dependencies for building Python packages
  build-essential \
  # psycopg2 dependencies
  libpq-dev \
  # django-celery-beat hack
  git

# Requirements are installed here to ensure they will be cached.
COPY ./requirements .

# Create Python Dependency and Sub-Dependency Wheels.
RUN pip wheel --wheel-dir /usr/src/app/wheels  \
  -r ${BUILD_ENVIRONMENT}.txt


# Python 'run' stage
FROM python as python-run-stage

ARG BUILD_ENVIRONMENT=local
ARG APP_HOME=/app

ENV PYTHONUNBUFFERED 1
ENV PYTHONDONTWRITEBYTECODE 1
ENV BUILD_ENV ${BUILD_ENVIRONMENT}

WORKDIR ${APP_HOME}

# Install required system dependencies
RUN apt-get update && apt-get install --no-install-recommends -y \
  # psycopg2 dependencies
  libpq-dev \
  # Translations dependencies
  gettext \
  # cleaning up unused files
  && apt-get purge -y --auto-remove -o APT::AutoRemove::RecommendsImportant=false \
  && rm -rf /var/lib/apt/lists/*

# All absolute dir copies ignore workdir instruction. All relative dir copies are wrt to the workdir instruction
# copy python dependency wheels from python-build-stage
COPY --from=python-build-stage /usr/src/app/wheels  /wheels/

# use wheels to install python dependencies
RUN pip install --no-cache-dir --no-index --find-links=/wheels/ /wheels/* \
	&& rm -rf /wheels/

# nodeJS stuff
ENV NODE_ENV=production

COPY ["package.json", "package-lock.json*", "yarn.lock", "./"]
RUN yarn

COPY ./compose/production/django/entrypoint /entrypoint
RUN sed -i 's/\r$//g' /entrypoint
RUN chmod +x /entrypoint

COPY ./compose/local/django/start /start
RUN sed -i 's/\r$//g' /start
RUN chmod +x /start


COPY ./compose/local/django/celery/worker/start /start-celeryworker
RUN sed -i 's/\r$//g' /start-celeryworker
RUN chmod +x /start-celeryworker

COPY ./compose/local/django/celery/beat/start /start-celerybeat
RUN sed -i 's/\r$//g' /start-celerybeat
RUN chmod +x /start-celerybeat

COPY ./compose/local/django/celery/flower/start /start-flower
RUN sed -i 's/\r$//g' /start-flower
RUN chmod +x /start-flower


# copy application code to WORKDIR
COPY . ${APP_HOME}

ENTRYPOINT ["/entrypoint"]

I'm happy to add more information and appreciate any help that can be provided.

[silviogutierrez]

Hi there,

Thanks for filing this. If you have a repro project, it'll be much easier to debug.

However, looking at the error, it seems to be something related to your project urls. Line 56 of the transpired generator.js handles URLs.

Can you try removing all your project urls? Or try the URL setup in the example project?

Alternatively, you can paste the output of python manage.py print_schema.

[tylerasselin]

That gives me quite a bit to go on. I'll play around with a few things and if I still can't get it working I'll share the print_schema output or open up my repo.

Is reactivated reliant on all of the Django code being in BASE_DIR/server/? I created BASE_DIR/client/ for the UI stuff since that was explicitly called out in the docs, but left all of my exiting Django structure alone.

[silviogutierrez]

It's not, or shouldn't be reliant on BASE_DIR/server. The fact that you're not getting a server startup error in python makes me think this isn't the issue.

Rather, almost certainly it's related to your URLs. And I think it's because you have unnamed urls, see path(name="foo") in the Django docs. So try eliminating or naming most URLs to see.

[tylerasselin]

I was able to pin down the issue. I did have some URL cleanup to do. Namely, I've been ignoring WARNINGS: ?: (urls.W005) URL namespace 'api' isn't unique. You may not be able to reverse all URLs in this namespace for a while. So I did some work to clean all of that up. It turned out that my URLs weren't causing the issue, however. It didn't like these paths (which were from cookiecutter-django):

if settings.DEBUG:
    # This allows the error pages to be debugged during development, just visit
    # these url in browser to see how these error pages look like.
    urlpatterns += [
        path(
            "400/",
            defaults.bad_request,
            kwargs={"exception": Exception("Bad Request!")},
        ),
        path(
            "403/",
            default_views.permission_denied,
            kwargs={"exception": Exception("Permission Denied")},
        ),
        path(
            "404/",
            default_views.page_not_found,
            kwargs={"exception": Exception("Page not Found")},
        ),
        path("500/", default_views.server_error),
    ]

I was able to run generate_client_assets successfully after commenting those out and I've got a simple React page loading when I hit localhost:8000. So I think my issue has been resolved. I appreciate the help!

[silviogutierrez]

Got it! So the main fix here would be to skip path URLs without name.

By the way, if you're wondering what this whole URL system is for, see here: https://www.reactivated.io/documentation/api/#reverse