I've set up a new NX Integrated project with the #NRWL Next plugin.
I'm using the new NextJS App folder
When I run build I get the following error:
The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:
- include was updated to add '../../dist/apps/my-project/.next/types/**/*.ts'
info - Checking validity of types ...Failed to compile.
Type error: Cannot find module '../../../../../app/configurator/page' or its corresponding type declarations.
Related
If you run
npx degit vercel/turbo/examples/with-react-native-web with-react-native-web
cd with-react-native-web
yarn install
To create a basic Turborepo that has a Nextjs application, a react-native mobile app with Expo and a ui package to share components between apps (there is a Button as an example already shared between the two apps), it works. But my ui package needs other dependencies, for example:
#fortawesome/fontawesome-svg-core,
#fortawesome/free-solid-svg-icons,
#fortawesome/react-native-fontawesome,
This is because the buttons that I want to render icons on my buttons. Once I install this dependency and try to use the button that has an icon, the Next.js app throws:
Unexpected token 'export'.
I understand this is because #fortawesome/react-native-fontawesome is using import/export syntax and needs to be transpiled to be used on the Next.js app, and I cannot make it work. I am trying to do this by adding this to my next.config.js:
transpilePackages: ['ui'],
I also tried using next-transpile-modules which i don't think is the right solution since next now supports what that package used to be for through transpilePackages
I also tried to specify that the ui package was "type": "module" but still, I am getting the same error.
How can you specify that those dependencies that belong to the ui package must be transpiled to be run by the browser?
I have checked the package #fortawesome/react-native-fontawesome
package.json of #fortawesome/react-native-fontawesome does not contain field "type": "module" but index.js contains:
export { default as FontAwesomeIcon } from './dist/components/FontAwesomeIcon'
therefore Next handles #fortawesome/react-native-fontawesome as non-ES module but this module contains export statement.
You mentioned transpilePackages field in next.config.js, so I think it may help with this issue (but pls check version of Next where transpilePackages appeared).
When I build my static blog using next.js, the build generates warning messages when it processes a particular markdown file (a blog post).
The message below tells me I have an unrecognized unicode character in file 504 of 741, but I do not know how to identify the name of this file. How can I discover which particular file is causing this message?
❯ yarn build
yarn run v1.22.19
$ next build && node ./scripts/generate-sitemap && node ./scripts/searchCache
info - Loaded env from /Users/john/projects/websites/blog/.env
info - Checking validity of types
warn - You have enabled experimental features: optimizeUniversalDefaults
warn - Experimental features in Tailwind CSS are not covered by semver, may introduce breaking changes, and can change at any time.
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
[=== ] info - Generating static pages (504/741)LaTeX-incompatible input and strict mode is set to 'warn': Unrecognized Unicode character " " (160) [unknownSymbol]
I have successfully compiled my nuxt3 project locally. But the deployment is not working with cloud flare page
00:14:35.140 Executing user command: npm run generate
00:14:35.613
00:14:35.613 > generate
00:14:35.613 > nuxt generate
00:14:35.614
00:14:35.725 Nuxt CLI v3.0.0-rc.3-27567768.c1f728e
00:14:38.919 ✔ Using ~/components/content for components in Markdown
00:14:43.437 ℹ Vite client warmed up in 3072ms
00:14:44.646 ℹ Client built in 4280ms
00:14:44.681 ℹ Building server...
00:14:47.053 ✔ Server built in 2373ms
00:14:47.249 ✔ Generated public dist
00:14:47.249 ℹ Initializing prerenderer
00:14:50.871 ℹ Prerendering 4 initial routes with crawler
00:14:50.891 ├─ / (20ms)
00:14:50.894 ├─ /200 (3ms)
00:14:50.897 ├─ /404 (3ms)
00:14:50.958 ├─ /api/_content/cache (61ms)
00:14:50.971 ✔ You can now deploy .output/public to any static hosting!
00:14:51.017 Finished
00:14:51.018 Note: No functions dir at /functions found. Skipping.
00:14:51.018 Validating asset output directory
00:14:51.018 Error: Output directory ".output/public" not found.
00:14:52.095 Failed: build output directory not found
This is failed with "Error: Output directory ".output/public" not found." but actually the directory is generated few lines before. Any clue to resolve this problem?
I worked around the problem with:
Adding Nitro output config [1] [2] to nuxt.config.ts:
export default defineNuxtConfig({
"nitro": {
"output": {
dir: 'output',
serverDir: 'output/server',
publicDir: 'output/public'
}
}
})
In Cloudflare Pages, setting build output directory to: server/output/public.
I think the issue is caused by the default deployment script at CloudFlare side, checking the existence of .output, but not being able to see "hidden" (starting with dot) folders.
17:27:08.682 Validating asset output directory
17:27:08.682 Error: Output directory ".output/public" not found.
Edit (2022-07-10) found a cleaner way:
add "target" : "static" to nuxt.config.ts
Use as CloudFlare Pages build command: ./node_modules/.bin/nuxt generate
Set CloudFlare Pages build output directory to dist
I also had this issue, after testings, this is what i found.
The documentation says Use the nuxi generate command to build your application. (https://v3.nuxtjs.org/getting-started/deployment#static-hosting).
Configure Node Version
First, i'll add an .nvmrc file at the root of the project, so that Cloudflare doesn't use its default 12.18.0 version on deploy.
The content of the file is :
16
sources:
nuxt 3 prerequisites : https://v3.nuxtjs.org/getting-started/installation/#prerequisites
Node version on Cloudflare Pages : https://developers.cloudflare.com/pages/platform/build-configuration/#language-support-and-tools
Configure the Cloudflare Page
Then i'm adding the configuration in the cloudflare interface with following :
Build command: npx nuxi generate
Build output directory: /.output/public
Root directory: /
🚀
Going further
Actually, it shouldn't be a problem to deploy easily on CF Pages: the team has added a cloudflare_pages preset right into nitro, the server library behind nuxt 3. https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages
I wasn't able to make this preset work for now, i'll update my answer when this has changed :)
I am trying to get web-components work inside vue3 project.
I did following steps. (Try to make super simple way)
I made a new project on vue-cli.
I chose vue3 preview.
After that I tried to execute script, which should generate web-components from existing project components.
vue-cli-service build --target wc-async 'src/components/*.vue'
I get following error:
error in ./src/components/HelloWorld.vue?vue&type=template&id=0dfd15f1&bindings={"label":"props"}?shadow
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Unexpected token ? in JSON at position 17
at JSON.parse (<anonymous>)
at Object.TemplateLoader (C:\git\vue-tests\footest\node_modules\vue-loader-v16\dist\templateLoader.js:37:154)
# ./src/components/HelloWorld.vue?vue&type=template&id=0dfd15f1&bindings={"label":"props"}?shadow 1:0-424 1:0-424
# ./src/components/HelloWorld.vue?shadow
# ./node_modules/#vue/cli-service/lib/commands/build/entry-wc.js
I tested this scenario with vue2 starting template and everything works. Is there something what I dont understand correctly or is it so that this is not working with vue3.
I am attempting to make a migration from D7 to D8 using Migrate Manifest. I have all the migrate modules installed (i.e. the 3 core migrate modules, Migrate Upgrade, Migrate Plus, Migrate Tools and Migrate Manifest). I followed the directions at this link: https://www.drupal.org/node/2350651 to prepare my manifest file. This is the relevant part of my resulting yaml file (truncated for brevity):
- block_content_body_field
- block_content_entity_display
- block_content_entity_form_display
- block_content_type
- d7_block
- d7_custom_block
When I ran the migrate-manifest via Drush, as specified by the directions in the link above, I received an error declaring a parse error pointing to the first line in the yaml list. This is the exact error: Unable to parse at line 1 (near " - block_content_body_field").
I tried several debugging steps:
I checked a yaml linter to see whether my file was properly formatted. My file passed the test.
I moved the block migrations below the ones that are prefixed with a 'd7' to match the example in the link.
I attempted a piecemeal migration of a file from my list of migrations, it worked.
I tried to alter the spacing on the list items.
All these steps failed to resolve the issue I am seeing.
I am unsure what other debugging steps I should take. All the above failed to resolve my issue.
Any ideas would be appreciated.