search

saas-js / saas-ui

The React component library for startups, built with Chakra UI.
https://saas-ui.dev
MIT License
1.3k stars 124 forks source link

[Bug]Named export 'theme' not found. The requested module '@chakra-ui/react' #47

Closed octalpixel closed 2 years ago

octalpixel commented 2 years ago

Came across the issue using the "@saas-ui/react": "^1.0.0-rc.3" on next.js.

The ideal step to reproduce would be to install @chakra/react v2 and the RC release of @saas-ui Edit: This is a nx monorepo

image

Pagebakers commented 2 years ago

Thanks for reporting!

Can you share your next.config.js please?

octalpixel commented 2 years ago

@Pagebakers my bad, I should have mentioned that setup as well. this project is a nx monorepo

image

Link to withNx - https://github.com/nrwl/nx/blob/master/packages/next/plugins/with-nx.ts

Pagebakers commented 2 years ago

I created a new project yesterday with Next 12.6, Chakra 2.1 and Saas UI 1.0.0-rc.3 and it's working perfectly, tried again just now without issues.

Might be NX related, I'll try to add it to the project and see what happens :)

Pagebakers commented 2 years ago

I created a new nx project, but nx cli isn't working, only getting empty output. I'll need to dive into it tomorrow.

By the way, this is the project I mentioned, it should run without issues: https://github.com/saas-js/saas-ui-next-blog

Pagebakers commented 2 years ago

Ok did get it running just now with nx.

Not having any issues, not sure how to reproduce your issue.

import { AppProps } from 'next/app';
import Head from 'next/head';
import './styles.css';

import { SaasProvider, theme } from '@saas-ui/react';
import { Container } from '@chakra-ui/react';

function CustomApp({ Component, pageProps }: AppProps) {
  return (
    <SaasProvider theme={theme}>
      <Head>
        <title>Welcome to blog-nx!</title>
      </Head>
      <Container>
        <Component {...pageProps} />
      </Container>
    </SaasProvider>
  );
}

export default CustomApp;

{
  "name": "blog-nx",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@emotion/react": "11.9.0",
    "@emotion/server": "11.4.0",
    "@emotion/styled": "11.8.1",
    "@chakra-ui/react": "^2.1.2",
    "@saas-ui/react": "1.0.0-rc.3",
    "framer-motion": "^6",
    "@nrwl/next": "14.1.9",
    "core-js": "^3.6.5",
    "next": "12.1.5",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "regenerator-runtime": "0.13.7",
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@emotion/babel-plugin": "11.9.2",
    "@nrwl/cli": "14.1.9",
    "@nrwl/cypress": "14.1.9",
    "@nrwl/eslint-plugin-nx": "14.1.9",
    "@nrwl/jest": "14.1.9",
    "@nrwl/linter": "14.1.9",
    "@nrwl/react": "14.1.9",
    "@nrwl/web": "14.1.9",
    "@nrwl/workspace": "14.1.9",
    "@testing-library/react": "13.1.1",
    "@types/jest": "27.4.1",
    "@types/node": "16.11.7",
    "@types/react": "18.0.8",
    "@types/react-dom": "18.0.3",
    "@typescript-eslint/eslint-plugin": "~5.18.0",
    "@typescript-eslint/parser": "~5.18.0",
    "babel-jest": "27.5.1",
    "cypress": "^9.1.0",
    "eslint": "~8.12.0",
    "eslint-config-next": "12.1.5",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-react": "7.29.4",
    "eslint-plugin-react-hooks": "4.5.0",
    "jest": "27.5.1",
    "nx": "14.1.9",
    "prettier": "^2.5.1",
    "react-test-renderer": "18.1.0",
    "ts-jest": "27.1.4",
    "ts-node": "9.1.1",
    "typescript": "~4.6.2"
  }
}

``
Pagebakers commented 2 years ago

I had similar issues as you with Storybook and had to add this to the webpack config.

    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    })
octalpixel commented 2 years ago

Thanks @Pagebakers for looking into it and for the examples. Let me try your suggestions and see if I can fix it.

Pagebakers commented 2 years ago

Let me know how it goes.

Pagebakers commented 2 years ago

@octalpixel Did you get it running?

octalpixel commented 2 years ago

Hey! Not yet, I went with only chakra for now. But will be revisiting this.

Pagebakers commented 2 years ago

Closing this for now, happy to help you out when you get back to it!

msnegurski commented 2 years ago

Had same error, tried to recreate it and it happens on fresh NextJS install. Here is a repo: https://github.com/msnegurski/test-saas-ui

Pagebakers commented 2 years ago

Thanks @msnegurski I will look into it!

Pagebakers commented 2 years ago

I'm able to reproduce it finally :)

Next.js fails to resolve to the Chakra UI module correctly, from the Saas UI esm module.

This only happens in JS mode, in TypeScript this doesn't happen it seems.

Pagebakers commented 2 years ago

The problem is the exports definition in the Saas UI packages.

  "exports": {
    ".": {
      "require": "./dist/index.js",
      "default": "./dist/index.modern.mjs"
    }
  },

Next.js is tripping over this and fails to resolve sub packages incorrectly. Changing default to import fixes the issue. I'm not sure if this is supposed to work like this, or if this is a bug in Next, but I suspect the latter.

I'll release an update asap.

The work around for now is to use Typescript.

msnegurski commented 2 years ago

I guess time to migrate to typescript. Thanks for the update!

Pagebakers commented 2 years ago

I opened an issue at next.

https://github.com/vercel/next.js/issues/39375

Pagebakers commented 2 years ago

Released @saas-ui/react@1.3.1 and @saas-ui/pro@0.7.0 with updated exports definitions.

This fixed it for me.

msnegurski commented 2 years ago

Yes, that fixed it, thank you! Though I am now getting similar error when use pro components like AppShell, Page, Section:

SyntaxError: Named export 'getStateColors' not found. The requested module '@saas-ui/theme' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from '@saas-ui/theme'; const { getStateColors } = pkg;

Pagebakers commented 2 years ago

Interesting, I implemented the same fix in @saas-ui/pro@0.7.0

Let me test this again.

msnegurski commented 2 years ago

Here is a repo https://github.com/msnegurski/test-next-typescript

Pagebakers commented 2 years ago

.mjs files are causing the issues, I renamed everything to .js to resolve the issue for now.

tecoad commented 2 years ago

@Pagebakers arrived here from Google. I don't use Saas-ui but I do use:

    "@chakra-ui/icons": "^2.0.1",
    "@chakra-ui/pro-theme": "^0.0.53",
    "@chakra-ui/react": "^2.0.2",
    "@chakra-ui/theme": "^2.0.1",
    "@chakra-ui/theme-tools": "^2.0.0",
    "next": "12.1.6",

This issue started suddently yesterday in my project and happens only when I use the pro-theme into extendTheme().

Quite don't understand why is the bug, since I didn't update anything. Should be an issue with chakra, actually?

Btw, Love saas-ui, will try!

Pagebakers commented 2 years ago

@tecoad Can you share your error? then we can have a better idea if this is really the same issue.

And please do, love to hear your feedback 👌

Pagebakers commented 2 years ago

Interesting, this issue is the same, I just checked the pro-theme source code and it is using .mjs extension too.

Please upvote and share your issues on the Next issue that I've opened

I opened an issue at next.

vercel/next.js#39375

tecoad commented 2 years ago

@Pagebakers Here is my log:

info  - Collecting page data .node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

file:///Users/matheus/Desktop/project/app/node_modules/@chakra-ui/pro-theme/dist/index.mjs:20
import { extendTheme, theme as theme$1 } from "@chakra-ui/react";
                      ^^^^^
SyntaxError: Named export 'theme' not found. The requested module '@chakra-ui/react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@chakra-ui/react';
const { extendTheme, theme: theme$1 } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15) {
  type: 'SyntaxError'
}

I haven't upgraded nextjs recently... which is odd.

Pagebakers commented 2 years ago

Thats odd indeed! This might have been around for awhile though.

Are you using typescript?

tecoad commented 2 years ago

@Pagebakers Yes, im using TS. Is is a nextjs or a chakra issue? Im trying to reproduce my case on codesandbox.

Pagebakers commented 2 years ago

Odd, i didnt have the problem in ts projects.

What package manager do you use

tecoad commented 2 years ago

@Pagebakers , using yarn

Here is a minimal case I was able to reproduce the same error, if it helps: https://github.com/tecoad/my-app

I will submit this to chakra aswell.

tecoad commented 2 years ago

https://github.com/chakra-ui/chakra-ui/issues/6436

Can you reproduce the error in my repo?

Pagebakers commented 2 years ago

Can you try setting this to true or false in next.config.js and see if that resolves anything?

experimental.esmExternals: false

Pagebakers commented 2 years ago

Ok I can confirm setting it to false is working here. But obviously not a solution, because it'll use CJS instead of ESM.. ;/

tecoad commented 2 years ago

Same here. Not a solution indeed.

tecoad commented 2 years ago

@Pagebakers been seeing the Saas-ui docs, seems very promising. Is there any demo boilerplate where we can see any fully working example? The components are great, but would be nicer to see how the can come together.

Regards,

Pagebakers commented 2 years ago

Here is a live demo, but the complete boilerplate is only available in Pro at the moment.

https://demo.saas-ui.dev