Babel configuration ignored in docker container

[timvahlbrock]

Describe the bug In TypeScript, it is really common to use the esm syntax for import and exports, regardless of which module syntax it is compiled to. When using the recommended configuration to use TypeScript files for route definition this is absolutely no problem when running the mocks-server locally. However, if the same configuration is run with the official docker image, the error "Error loading file /input/mocks/routes/common.ts: Unexpected token 'export'" is thrown, which usually indicates that something does not support esm syntax. This does also occur, when the babel plugin for transform is used. When the mocks are used in the official container and the typescript with babel configuration is used, the container ignores if there is a babel configuration file in the mocks folder and therefore is unable to load the typescript. If the babel configuration is imported into the mocks.config.js, startup still fails. This is because the presets cannot be required, as they are also in the /input folder.

To Reproduce

• Checkout https://github.com/timvahlbrock/mocks-server-esm-in-docker
• Run npx mocks-server
• See that the local installation starts up normally, without any (relevant) warnings
• Stop the server (to free the port)
• Run docker run --name mocks-server -p 3100:3100 -p 3110:3110 -v $(pwd)/:/input mocksserver/main
• See that the server throws the mentioned error ~~- Optionally
  • Stop the server
  • Add "@babel/plugin-transform-modules-commonjs" line in the babel.conf.js
  • Repeat the steps above
  • See that this doesn't make any difference~~

Expected behavior Babel configuration is also used correctly in container.

Logs

The logs

15:34:47:65 [info][config] Configuration loaded 15:34:47:72 [info][files] Loading files from folder /input/mocks 15:34:49:03 [error][alerts:load] Error loading file /input/mocks/routes/common.ts: Unexpected token 'export' 15:34:49:14 [warn][alerts:base] Collection with id 'base' is invalid: routeVariant with id 'add-headers:enabled' was not found, use a valid 'routeId:variantId' identifier 15:34:49:16 [warn][alerts:no-headers] Collection with id 'no-headers' is invalid: routeVariant with id 'add-headers:disabled' was not found, use a valid 'routeId:variantId' identifier 15:34:49:17 [warn][alerts:collections] Option 'mock.collections.selected' was not defined. Selecting the first collection found 15:34:49:18 [info][mock] Selected collection: 'base' 15:34:49:28 [info][server] Server started and listening at http://localhost:3100 15:34:49:30 [info][plugins:adminApi:server] Server started and listening at http://localhost:3110

Operating system, Node.js an npm versions, or browser version (please complete the following information):

• OS: MacOs Ventura 13.4.1
• Node.js: 18.16.1
• npm: 9.5.1
• Browser: irrelevant

Additional context None

[timvahlbrock]

This does not seem to be a node version issue. Spun up the base container (node:18.8.0) of the mocks-server container an ran npx mocks-server for the reproduction repo there without any issues.

[timvahlbrock]

I just discovered, that I get another error, if I put the babel options in the mocks.config.js: "Error loading file /input/mocks/routes/common.ts: Cannot find module '@babel/preset-env'". Maybe the problem is, that the location of the mock server script is different from the mocks folder in the container. So probably the babel configuration file isn't loaded, and typescript files are never transpiled.

[timvahlbrock]

Maybe the problem is, that the location of the mock server script is different from the mocks folder in the container. So probably the babel configuration file isn't loaded, and typescript files are never transpiled.

Verified. If I add

const someNumber: number = 5;
console.log(someNumber);

into the common.ts file, another error is thrown at : number. I will modify the title of this issue accordingly.

[timvahlbrock]

Proposal: Using a global installation of mock-server in the container and launching within /input.

[javierbrea]

Hi @timvahlbrock , first of all, sorry for the delay, and thank you for the detailed explanations and the example in your repo. The problem is that the distributed Docker image does not have installed the babel dependencies needed to transform the files. Maybe I can distribute another versions with those dependencies installed too.

[timvahlbrock]

Hi @javierbrea , my approach was that those dependencies should be taken from the local directory. But I guess the point of having a prebuilt docker image is to not have to install dependencies whatsoever. So I guess your approach of including them in the built image is much better.

Btw. we currently work around this by building an image including all the mock data of our own. This is very useful for GitHub Actions, as the mocks-server container can be managed by the workflow by configuring it as a service container.

[javierbrea]

@timvahlbrock , I'm glad you found a way to make it working 😃 . Anyway, I will try to publish more Docker image versions with different dependencies pre-installed, because it would be easier to create your own containers by copying only the mocks folder, as described in https://www.mocks-server.org/docs/integrations/docker/#building-a-self-contained-image.

It is also necessary to give information about this in the Docker docs. So, I will left the issue open until both things are done. Thank you again for notifying it!