When using Turborepo's wildcard imports (snippet from package.json)
dependencies: {
"branding": "*"
}
inside of a React app created with create-react-app, I get the error:
ERROR in ./src/App.js 5:0-37
Module not found: Error: Can't resolve 'branding' in 'C:\Users\****\Projects\Development\monorepo\apps\share\src'
I think I'm doing something very wrong, but I can't work it out through Turborepo's documentation.
I am unsure how people are compiling scss files to css files in Github Actions' CI build time . Here is my way of doing it. Please let me know if it's the wrong way to approach it.
Here is my github repo:
https://github.com/mattfrancis888/gh_actions_heroku
Here is my project directory
.github
-> workflows
-> main.yml
src
pages
->app.ts
scss
-> main.scss
-> main.css (untracked in git & not pushed to remote repoistory, it is used locally
; github actions should compile the main.scss file and create a main.css file at CI build time)
package.json
Here is my main.yml, I am following Sass Build Action as the template to convert .scss to. css at CI build time. (SASS Build Action seems to have very little activity & support on it)
build:
runs-on: ubuntu-latest
steps:
- name: Checkout source Git branch
uses: actions/checkout#v2
with:
ref: main
fetch-depth: 10
submodules: true
- name: Compile CSS from SCSS files
uses: gha-utilities/sass-build#v0.4.7
with:
source: /src/scss/main.scss #I have removed the / in /src and it is still failing
destination: /src/scss/main.css
#deploys to heroku (unrelated to SASS Build Action)
- uses: actions/checkout#v2
- uses: akhileshns/heroku-deploy#v3.12.12 # This is the action
with:
heroku_api_key: ${{secrets.HEROKU_API_KEY}}
heroku_app_name: "ga" #Must be unique in Heroku
heroku_email: "a88#gmail.com"
When I use SASS to try to compile .scss files to .csss files, I am receiving this error in github action's step at "Compile CSS from SCSS files" :
Error: /src/scss/main.scss: no such file or directory
at Object._newRenderError (/home/runner/work/_actions/gha(internal/modules/cjs/loader.js:995:10) {
formatted: 'Error: /src/scss/main.scss: no such file or directory',
status: 3
}
Update
This is fixed by #'Matthias' answer by changing the main.yml to
with:
source: ./src/scss/main.scss
destination: ./src/scss/main.css
However, I am met with the following error now:
Here is the output that is working in step: Compile SCSS files to CSS:
Run gha-utilities/sass-build#v0.4.7
Warning: ENOENT: no such file or directory, stat './src/scss/main.css'
Attempting to write to file path -> ./src/scss/main.css
Wrote file -> ./src/scss/main.css
This is the error in the next step when trying to deploy it to heroku.
remote: Failed to compile.
remote: remote: ./pages/_app.tsxremote:
Module not found: Can't resolve '../src/scss/main.css' in '/tmp/build_9673181c/pages'
It looks like main.csss is not created in src/scss at the CI build time. Why is that?
Did you try to put an . before the /?
As a dot means from right here go there. ;-)
So it would be:
./src/scss/main.scss
I build my Next.js app with Bazel.
It works fine, but there is one problem:
When I import styles/globals.css into pages/_app.tsx, Next.js throws this error:
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: pages/_app.tsx
Which obviously doesn't make sense.
Reproduction
yarn install
yarn start:bazel (http://localhost:3000, works just fine)
Now uncomment this line
yarn start:bazel (Error while buildling)
Edit 1
After a suggestion by Ulrich Thomas Gabor, it turns out that ctx.customAppFile is null, which might be the root of the problem.
Here is a log output of ctx when building with Bazel:
{
ctx: {
rootDirectory: '/home/flo/.cache/bazel/_bazel_flo/e959037946bf226f3b911fa40ec62d93/sandbox/linux-sandbox/85/execroot/nextjs-bazel/bazel-out/k8-fastbuild/bin',
customAppFile: null,
// ...
}
}
Edit 2
After some more debugging, I found the problem:
This if statement fails because of this error
Error: EACCES: permission denied, access '/home/flo/.cache/bazel/_bazel_flo/e959037946bf226f3b911fa40ec62d93/sandbox/linux-sandbox/186/execroot/nextjs-bazel/bazel-out/k8-fastbuild/bin/pages/_app.tsx'
If I patch Next.js to ignore this error, everything works fine!
But how to prevent the EACCES error?
I'm currently trying to build a shared component library that I can use across my different projects.
This is my index.js file:
import Avatar from "./components/Avatar";
import Heading1 from "./components/Heading1";
import styles from "./global.css";
export { Avatar, Heading1 };
The reason I am loading global.css is because I want to use a custom font.
When I run babel src -d build, it seems to skip my CSS file:
myapp-ui edmund/theming % npm run build
> #myapp/ui#0.1.0 build /Users/edmundmai/Documents/src/myapp/myapp-ui
> babel src -d build
src/components/Avatar.js -> build/components/Avatar.js
src/components/Heading1.js -> build/components/Heading1.js
src/index.js -> build/index.js
src/stories/Avatar.stories.js -> build/stories/Avatar.stories.js
src/stories/Headling1.stories.js -> build/stories/Headling1.stories.js
src/theme.js -> build/theme.js
When I go into one of my apps and try to load this shared component library, it also throws an error about a missing CSS file:
Failed to compile.
../myapp-ui/build/index.js
Module not found: Can't resolve './global.css' in '/Users/edmundmai/Documents/src/myapp/myapp-ui/build'
How would I load a CSS or custom font for a shared component library?
I am following this blog:
http://maplekeycompany.blogspot.se/2012/03/very-basic-cowboy-setup.html
In short, I am trying to compile an application with rebar just as the person in the blog.
Everything goes smoothly until I want to run the command:
./rebar get-deps compile generate
This then give me the following errors and warnings,
> User#user-:~/simple_server/rebar$ ./rebar get-deps compile generate
> ==> rebar (get-deps)
> ==> rebar (compile) Compiled src/simple_server.erl Compiled src/simple_server_http.erl src/simple_server_http_static.erl:5:
> Warning: behaviour cowboy_http_handler undefined Compiled
> src/simple_server_http_static.erl
> src/simple_server_http_catchall.erl:2: Warning: behaviour
> cowboy_http_handler undefined Compiled
> src/simple_server_http_catchall.erl WARN: 'generate' command does not
> apply to directory /home/harri/simple_server/rebar Command 'generate'
> not understood or not applicable
I have found a similar post with the same error:
Command 'generate' not understood or not applicable
I think the problem is in the reltool.config but do not know how to proceed, I changed the path to the following: {lib_dirs, ["home/user/simple_server/rebar"]}
Is there a problem with the path? How can rebar get access to all the src files and also the necessary rebar file to compile and build the application?
You need to make sure your directory structure and its contents are arranged so that rebar knows how to build everything in your system and generate a release for it. Your directory structure should look like this:
project
|
-- rel
|
-- deps
|
-- apps
|
-- myapp
| |
| -- src
| -- priv
|
-- another_app
The rel directory holds all the information needed to generate a release, and the apps directory is where the applications that make up your project live. Application dependencies live in the deps directory. Each app such as myapp and another_app under the apps directory can have their own rebar.config files. While two or more such applications are possible here, normally you'd have just one and all others would be dependencies.
In the top-level project directory there's also a rebar.config file with contents that look like this:
{sub_dirs, ["rel", "apps/myapp", "apps/another_app"]}.
{lib_dirs, ["apps"]}.
If necessary, you can use rebar to generate your apps from application skeletons:
cd apps
mkdir myapp another_app
( cd myapp && rebar create-app appid=myapp )
( cd another_app && rebar create-app appid=another_app )
If an application has dependencies, you'll have to add a rebar.config to its directory and declare each dependency there. For example, if myapp depends on application foo version 1.2, create apps/myapp/rebar.config with these contents:
{deps,
[{foo, "1.*", {git, "git://github.com/user/foo.git", {tag, "foo-1.2"}}}]
}.
When you run rebar get-deps, rebar will populate the top-level deps directory to hold all dependencies, creating deps if necessary. The top-level rebar.config can also declare dependencies if necessary.
You also need to generate a node, necessary for your releases:
cd ../rel
rebar create-node nodeid=project
You then need to modify the reltool.config file generated by the previous step. You need to change
{lib_dirs, []},
to
{lib_dirs, ["../apps", "../deps"]},
and just after the line {incl_cond, derived}, add {mod_cond, derived}, so that releases contain only the applications needed for correct execution.
Next, wherever the atom 'project' appears, you need to replace it with the applications under the apps directory. For our example, we'd change this part:
{rel, "project", "1",
[
kernel,
stdlib,
sasl,
project
]},
to this:
{rel, "project", "1",
[
kernel,
stdlib,
sasl,
myapp,
another_app
]},
and change this part:
{app, project, [{mod_cond, app}, {incl_cond, include}]}
to this:
{app, myapp, [{mod_cond, app}, {incl_cond, include}]},
{app, another_app, [{mod_cond, app}, {incl_cond, include}]}
You might also need to add the line:
{app, hipe, [{incl_cond, exclude}]},
to exclude the hipe application since sometimes it causes errors during release generation or when trying to run the release. Try without it first, but add it if you see errors related to hipe when generating a release, or if attempts to run the generated release result in this sort of error:
{"init terminating in do_boot",{'cannot load',elf_format,get_files}}
you'll need to add it.
With all this in place you can now execute:
rebar get-deps compile generate
and you should be able to successfully generate the release. Note that running rebar generate at the top level rather than in the rel dir will result in a harmless warning like this, which you can ignore:
WARN: 'generate' command does not apply to directory /path/to/project
Finally, you can run the release. Here's how to run it with an interactive console:
$ ./rel/project/bin/project console
Exec: /path/to/project/rel/project/erts-6.2/bin/erlexec -boot /path/to/project/rel/project/releases/1/project -mode embedded -config /path/to/project/rel/project/releases/1/sys.config -args_file /path/to/project/rel/project/releases/1/vm.args -- console
Root: /path/to/project/rel/project
Erlang/OTP 17 [erts-6.2] [source] [64-bit] [smp:8:8] [async-threads:10] [kernel-poll:false]
Eshell V6.2 (abort with ^G)
(project#127.0.0.1)1>
or you could run ./rel/project/bin/project start to start it in the background. Run ./rel/project/bin/project with no arguments to see all available options.