Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@mui/icons-material issue wit Remix #44244

Closed
defmsy opened this issue Oct 28, 2024 · 4 comments
Closed

@mui/icons-material issue wit Remix #44244

defmsy opened this issue Oct 28, 2024 · 4 comments
Labels
status: waiting for author Issue with insufficient information

Comments

@defmsy
Copy link

defmsy commented Oct 28, 2024 •
edited
Loading

Steps to reproduce

Link to live example: (required)

Steps:

  1. Create a new Remix project
  2. Integrate mui using the example https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts
  3. import any icon from @mui/icons-material
    package.json
{
  "name": "webapp",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix vite:build && node build.cjs",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^6.1.5",
    "@mui/material": "^6.1.5",
    "@remix-run/architect": "^2.13.1",
    "@remix-run/node": "^2.13.1",
    "@remix-run/react": "^2.13.1",
    "@remix-run/serve": "^2.13.1",
    "esbuild": "^0.24.0",
    "ioredis": "^5.4.1",
    "isbot": "^4.1.0",
    "jose": "^5.9.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remix-auth": "^3.7.0",
    "remix-auth-oauth2": "^2.4.0",
    "winston": "^3.15.0"
  },
  "devDependencies": {
    "@aws-sdk/client-apigatewaymanagementapi": "^3.679.0",
    "@aws-sdk/client-dynamodb": "^3.679.0",
    "@aws-sdk/client-sns": "^3.679.0",
    "@aws-sdk/client-sqs": "^3.679.0",
    "@aws-sdk/client-ssm": "^3.679.0",
    "@aws-sdk/lib-dynamodb": "^3.679.0",
    "@remix-run/dev": "^2.13.1",
    "@types/node": "^22.8.1",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "aws-lambda": "^1.0.7",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=20.0.0"
  }
}

I tried different versions of node, vite and I tried to downgrade mui but still the same issue.

Current behavior

Logs

(node:74966) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
6:41:13 PM [vite] Error when evaluating SSR module /app/layouts/marketing/components/AppBar.tsx: failed to import "@mui/icons-material"
|- <MY_PROJECT_PATH>/node_modules/@mui/icons-material/esm/index.js:1
export { default as Abc } from './Abc';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async nodeImport (file://<MY_PROJECT_PATH>/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)

6:41:13 PM [vite] Error when evaluating SSR module /app/layouts/marketing/Layout.tsx: failed to import "@mui/icons-material"
|- <MY_PROJECT_PATH>/node_modules/@mui/icons-material/esm/index.js:1
export { default as Abc } from './Abc';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async nodeImport (file://<MY_PROJECT_PATH>/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)

6:41:13 PM [vite] Error when evaluating SSR module /app/routes/_index.tsx: failed to import "@mui/icons-material"
|- <MY_PROJECT_PATH>/node_modules/@mui/icons-material/esm/index.js:1
export { default as Abc } from './Abc';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async nodeImport (file://<MY_PROJECT_PATH>/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)

6:41:13 PM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "@mui/icons-material"
|- <MY_PROJECT_PATH>/node_modules/@mui/icons-material/esm/index.js:1
export { default as Abc } from './Abc';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async nodeImport (file://<MY_PROJECT_PATH>/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)

6:41:13 PM [vite] Internal server error: Unexpected token 'export'
      at wrapSafe (node:internal/modules/cjs/loader:1378:20)
      at Module._compile (node:internal/modules/cjs/loader:1428:41)
      at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
      at Module.load (node:internal/modules/cjs/loader:1288:32)
      at Module._load (node:internal/modules/cjs/loader:1104:12)
      at cjsLoader (node:internal/modules/esm/translators:346:17)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
      at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
      at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
      at async nodeImport (file://<MY_PROJECT_PATH>/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)
6:41:14 PM [vite] Internal server error: Unexpected token 'export'
      at wrapSafe (node:internal/modules/cjs/loader:1378:20)
      at Module._compile (node:internal/modules/cjs/loader:1428:41)
      at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
      at Module.load (node:internal/modules/cjs/loader:1288:32)
      at Module._load (node:internal/modules/cjs/loader:1104:12)
      at cjsLoader (node:internal/modules/esm/translators:346:17)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
      at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
      at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
      at async nodeImport (file://<MY_PROJECT_PATH>/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15) (x2)

Expected behavior

No response

Context

No response

Your environment

System:
OS: macOS 15.0.1
Binaries:
Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
pnpm: 9.12.3 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 130.0.6723.70
Edge: Not Found
Safari: 18.0.1
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/core-downloads-tracker: 6.1.5
@mui/icons-material: ^6.1.5 => 6.1.5
@mui/material: ^6.1.5 => 6.1.5
@mui/private-theming: 6.1.5
@mui/styled-engine: 6.1.5
@mui/system: 6.1.5
@mui/types: 7.2.18
@mui/utils: 6.1.5
@types/react: ^18.2.20 => 18.3.12
react: ^18.2.0 => 18.3.1
react-dom: ^18.2.0 => 18.3.1
typescript: ^5.1.6 => 5.6.3

Search keywords: icons
@defmsy defmsy added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 28, 2024
@mj12albert
Copy link
Member

mj12albert commented Oct 29, 2024 •
edited
Loading

@defmsy Would you mind providing a minimal repro e.g. in CodeSandbox?

@mj12albert mj12albert added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 29, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 5, 2024

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

@github-actions github-actions bot closed this as completed Nov 5, 2024
@Leejjon
Copy link

Leejjon commented Dec 1, 2024 •
edited
Loading

Repo to reproduce: https://github.com/Leejjon/material-icons-bug
Code sandbox: https://codesandbox.io/p/github/Leejjon/material-icons-bug/main?import=true

Full error I am getting:

leejjon@leejjon-XPS-13-7390:~/projects/material-icons-bug$ npm run dev

> dev
> remix vite:dev

Port 5173 is in use, trying another one...
  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
(node:125311) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
10:59:04 PM [vite] Error when evaluating SSR module /app/routes/_index.tsx: failed to import "@mui/icons-material/AccessAlarm"
|- /home/leejjon/projects/material-icons-bug/node_modules/@mui/icons-material/esm/AccessAlarm.js:3
import createSvgIcon from "./utils/createSvgIcon.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Function.Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:316:24)

10:59:04 PM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "@mui/icons-material/AccessAlarm"
|- /home/leejjon/projects/material-icons-bug/node_modules/@mui/icons-material/esm/AccessAlarm.js:3
import createSvgIcon from "./utils/createSvgIcon.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Function.Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:316:24)

10:59:04 PM [vite] Internal server error: Cannot use import statement outside a module
      at internalCompileFunction (node:internal/vm:73:18)
      at wrapSafe (node:internal/modules/cjs/loader:1153:20)
      at Module._compile (node:internal/modules/cjs/loader:1205:27)
      at Object.Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
      at Module.load (node:internal/modules/cjs/loader:1091:32)
      at Function.Module._load (node:internal/modules/cjs/loader:938:12)
      at cjsLoader (node:internal/modules/esm/translators:284:17)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
      at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
      at ModuleLoader.import (node:internal/modules/esm/loader:316:24)
10:59:04 PM [vite] Internal server error: Cannot use import statement outside a module
      at internalCompileFunction (node:internal/vm:73:18)
      at wrapSafe (node:internal/modules/cjs/loader:1153:20)
      at Module._compile (node:internal/modules/cjs/loader:1205:27)
      at Object.Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
      at Module.load (node:internal/modules/cjs/loader:1091:32)
      at Function.Module._load (node:internal/modules/cjs/loader:938:12)
      at cjsLoader (node:internal/modules/esm/translators:284:17)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
      at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
      at ModuleLoader.import (node:internal/modules/esm/loader:316:24) (x2)

The only potential difference with OP's example is that he mentions "Remix" and I used Remix SPA. But I think it's broken on both.

By the way it is working in one of my projects with Remix 2.11.2. I ran into this problem after updating to the latest.

@Leejjon
Copy link

Leejjon commented Dec 1, 2024

Fix (found by using the search function in the discord):
https://github.com/Leejjon/material-icons-bug/pull/1/files

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status: waiting for author Issue with insufficient information
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@defmsy @Leejjon @mj12albert