Zenn
💣

Remix + shadcn-ui で Error: No route matches URL エラーにハマった件

2024/04/29に公開
React
Tailwind CSS
Remix
shadcn/ui
tech

公式の通り、Remix + shadcn-ui　をセットアップした際、発生したエラーについての対応方法を共有します。誰かの時短になれば幸いです。

試した手順

https://ui.shadcn.com/docs/installation/remix

発生したエラー

  • run dev
npm run dev

> dev
> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
Error: No route matches URL "/*!%20tailwindcss%20v3.4.3%20%7C%20MIT%20License%20%7C%20https://tailwindcss.com*//*1.%20Prevent%20padding%20and%20border%20from%20affecting%20element%20width.%20(https://github.com/mozdevs/cssremedy/issues/4)2.%20Allow%20adding%20a%20border%20to%20an%20element%20by%20just%20adding%20a%20border-width.%20(https://github.com/tailwindcss/tailwindcss/pull/116)*/*,::before,::after%20%7B%20%20box-sizing:%20border-box;%20/*%201%20*/%20%20border-width:%200;%20/*%202%20*/%20%20border-style:%20solid;%20/*%202%20*/%20%20border-color:%20"
num run dev エラー全量
npm run dev

> dev
> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
Error: No route matches URL "/*!%20tailwindcss%20v3.4.3%20%7C%20MIT%20License%20%7C%20https://tailwindcss.com*//*1.%20Prevent%20padding%20and%20border%20from%20affecting%20element%20width.%20(https://github.com/mozdevs/cssremedy/issues/4)2.%20Allow%20adding%20a%20border%20to%20an%20element%20by%20just%20adding%20a%20border-width.%20(https://github.com/tailwindcss/tailwindcss/pull/116)*/*,::before,::after%20%7B%20%20box-sizing:%20border-box;%20/*%201%20*/%20%20border-width:%200;%20/*%202%20*/%20%20border-style:%20solid;%20/*%202%20*/%20%20border-color:%20"
    at getInternalRouterError (/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/router/dist/router.cjs.js:4675:59)
    at Object.query (/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/router/dist/router.cjs.js:3394:19)
    at handleDocumentRequest (/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/server.js:222:35)
    at requestHandler (/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/server.js:141:24)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async nodeHandler (/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/dev/dist/vite/plugin.js:844:27)
    at async /Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/dev/dist/vite/plugin.js:847:15
No routes matched location "/*!%20tailwindcss%20v3.4.3%20%7C%20MIT%20License%20%7C%20https://tailwindcss.com*//*1.%20Prevent%20padding%20and%20border%20from%20affecting%20element%20width.%20(https://github.com/mozdevs/cssremedy/issues/4)2.%20Allow%20adding%20a%20border%20to%20an%20element%20by%20just%20adding%20a%20border-width.%20(https://github.com/tailwindcss/tailwindcss/pull/116)*/*,::before,::after%20%7B%20%20box-sizing:%20border-box;%20/*%201%20*/%20%20border-width:%200;%20/*%202%20*/%20%20border-style:%20solid;%20/*%202%20*/%20%20border-color:%20"
ErrorResponseImpl {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/*!%20tailwindcss%20v3.4.3%20%7C%20MIT%20License%20%7C%20https://tailwindcss.com*//*1.%20Prevent%20padding%20and%20border%20from%20affecting%20element%20width.%20(https://github.com/mozdevs/cssremedy/issues/4)2.%20Allow%20adding%20a%20border%20to%20an%20element%20by%20just%20adding%20a%20border-width.%20(https://github.com/tailwindcss/tailwindcss/pull/116)*/*,::before,::after%20%7B%20%20box-sizing:%20border-box;%20/*%201%20*/%20%20border-width:%200;%20/*%202%20*/%20%20border-style:%20solid;%20/*%202%20*/%20%20border-color:%20"',
  error: Error: No route matches URL "/*!%20tailwindcss%20v3.4.3%20%7C%20MIT%20License%20%7C%20https://tailwindcss.com*//*1.%20Prevent%20padding%20and%20border%20from%20affecting%20element%20width.%20(https://github.com/mozdevs/cssremedy/issues/4)2.%20Allow%20adding%20a%20border%20to%20an%20element%20by%20just%20adding%20a%20border-width.%20(https://github.com/tailwindcss/tailwindcss/pull/116)*/*,::before,::after%20%7B%20%20box-sizing:%20border-box;%20/*%201%20*/%20%20border-width:%200;%20/*%202%20*/%20%20border-style:%20solid;%20/*%202%20*/%20%20border-color:%20"
      at getInternalRouterError (/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/router/dist/router.cjs.js:4675:59)
      at Object.query (/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/router/dist/router.cjs.js:3394:19)
      at handleDocumentRequest (/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/server.js:222:35)
      at requestHandler (/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/server.js:141:24)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async nodeHandler (/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/dev/dist/vite/plugin.js:844:27)
      at async /Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/dev/dist/vite/plugin.js:847:15
}
  • run build
npm run build

> build
> remix vite:build

vite v5.2.10 building for production...
✓ 94 modules transformed.
x Build failed in 352ms
Error [RollupError]: app/root.tsx (11:7): "default" is not exported by "app/tailwind.css", imported by "app/root.tsx".
file: /Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/root.tsx:11:7
 9: import type { LinksFunction } from "@remix-run/node";
10:
11: import stylesheet from "./tailwind.css";
           ^
num run build エラー全量
npm run build

> build
> remix vite:build

vite v5.2.10 building for production...
✓ 94 modules transformed.
x Build failed in 352ms
Error [RollupError]: app/root.tsx (11:7): "default" is not exported by "app/tailwind.css", imported by "app/root.tsx".
file: /Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/root.tsx:11:7
 9: import type { LinksFunction } from "@remix-run/node";
10:
11: import stylesheet from "./tailwind.css";
           ^
12:
13: export const links: LinksFunction = () => [
    at getRollupError (file:///Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/rollup/dist/es/shared/parseAst.js:394:41)
    at error (file:///Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/rollup/dist/es/shared/parseAst.js:390:42)
    at Module.error (file:///Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/rollup/dist/es/shared/node-entry.js:13852:16)
    at Module.traceVariable (file:///Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/rollup/dist/es/shared/node-entry.js:14300:29)
    at ModuleScope.findVariable (file:///Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/rollup/dist/es/shared/node-entry.js:11981:39)
    at ReturnValueScope.findVariable (file:///Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/rollup/dist/es/shared/node-entry.js:7432:38)
    at FunctionBodyScope.findVariable (file:///Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/rollup/dist/es/shared/node-entry.js:7432:38)
    at Identifier.bind (file:///Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/rollup/dist/es/shared/node-entry.js:6908:40)
    at Property.bind (file:///Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/rollup/dist/es/shared/node-entry.js:4775:23)
    at ObjectExpression.bind (file:///Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/rollup/dist/es/shared/node-entry.js:4771:28) {
  binding: 'default',
  code: 'MISSING_EXPORT',
  exporter: '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/tailwind.css',
  id: '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/root.tsx',
  url: 'https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module',
  pos: 138,
  loc: {
    column: 7,
    file: '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/root.tsx',
    line: 11
  },
  frame: ' 9: import type { LinksFunction } from "@remix-run/node";\n' +
    '10: \n' +
    '11: import stylesheet from "./tailwind.css";\n' +
    '           ^\n' +
    '12: \n' +
    '13: export const links: LinksFunction = () => [',
  watchFiles: [
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/entry.client.tsx',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/routes/_index.tsx',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/root.tsx',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/package.json',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/react/index.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/react/jsx-runtime.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/tailwind.css',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/index.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/components/ui/button.tsx',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/react-dom/client.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/scroll-restoration.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/browser.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/components.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/server.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/index.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/react-router-dom/dist/index.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/react/cjs/react.production.min.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/react/cjs/react-jsx-runtime.production.min.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/react-dom/index.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/lib/utils.ts',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/tailwind.config.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/single-fetch.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/_virtual/_rollupPluginBabelHelpers.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/routes.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/formData.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/cookies.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/errorBoundaries.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/react-router-dom/server.mjs',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/single-fetch.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/server.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/responses.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/sessions/memoryStorage.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/sessions.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/upload/memoryUploadHandler.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/sessions/cookieStorage.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/dev.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/upload/errors.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/errors.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/invariant.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/react-router/dist/index.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/markup.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/data.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/router/dist/router.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/turbo-stream/dist/turbo-stream.mjs',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/routeModules.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@web3-storage/multipart-parser/esm/src/index.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/cookie/index.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/fallback.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/react/dist/esm/links.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/warnings.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/errors.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/mode.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/routeModules.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/entry.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/headers.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/invariant.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/routeMatching.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/routes.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/serverHandoff.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/set-cookie-parser/lib/set-cookie.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@web3-storage/multipart-parser/esm/src/utils.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@web3-storage/multipart-parser/esm/src/search.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@radix-ui/react-slot/dist/index.mjs',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/class-variance-authority/dist/index.mjs',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/data.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/react-dom/cjs/react-dom.production.min.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@remix-run/server-runtime/dist/esm/markup.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@babel/runtime/helpers/esm/extends.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/@radix-ui/react-compose-refs/dist/index.mjs',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/class-variance-authority/node_modules/clsx/dist/clsx.mjs',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/scheduler/index.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/scheduler/cjs/scheduler.production.min.js',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/clsx/dist/clsx.mjs',
    '/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/node_modules/tailwind-merge/dist/bundle-mjs.mjs'
  ],
  [Symbol(augmented)]: true
}

解決法(URLインポートする)

tailwindcss公式の通り対応する(URLインポートする)
?urlを付与する

https://tailwindcss.com/docs/guides/remix

app/root.tsx
- import stylesheet from "./tailwind.css";
+ import stylesheet from "./tailwind.css?url";

Discussion