linaria: The expression evaluated to 'undefined' ...

Environment

  • Linaria version: 4.5.2
  • Bundler (+ version): webpack 5.88.2
  • Node.js version: v18.12.1
  • OS: macOS 13.4.1 (22F82)

Description

After upgrading to the latest version of Linaria, I’am getting the following errors across all components:

SyntaxError: index.tsx: The expression evaluated to 'undefined', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(styles)'.
  38 |
  39 | export const Component = styled(CustomComponent)`
> 40 | 	${styles}
     |    ^^^^^^
  41 | `;
  42 |
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at Generator.next (<anonymous>)
Import trace for requested module:

styles is just an object containing CSS rules.

Same code works with Linaria v4.3.8 without any issues.

Reproducible Demo

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 2
  • Comments: 42 (6 by maintainers)

Commits related to this issue

Most upvoted comments

Well, at least we know what went wrong. Now I need to understand why and how to fix it 😃

Thanks @Anber! Unfortunately the new release doesn’t build in my project yet 😕

v5 is out, please check if your problems still occur 🐱

Hi @PierreGUI! The master is broken right now. We have found a problem with parallel processing that can be related to this issue as well. I’m trying to solve it in #1321.

The fix for my issue is not in any release yet. It was merged 2 days after 4.5.4 was released. Staying on earlier version of linaria works fine for me until 4.5.5 is released.

@Anber Sorry I was out for a few days. I was unable to replicate the issue when trying to recreate the same setup so that you can have a look. However on my existing repo (proprietary code), the fix is not working. I’ll try to recreate and ping you.

Hi @therealgilles! Yep, I know. It is fixed in 5.0 that will be released soon.

The only errors i get using that branch is react-modal claiming the element doesn’t exist when this line execute during eval Modal.setAppElement('#someid'); and another error in the same module saying Cannot find module 'somefile'. However both errors goes away if i comment out that line or disable happyDOM.

I expect linaria have no guarantees about code like that working so I’m happy to call that “works as intended” other than the slightly weird additional error about missing module being a bit confusing.

Great work! Looking forward to the build time improvements when we can land this in our project.

I get errors from all commits newer than a4263c4558ca092293e43689ab5501c3098fab84 Test procedure:

git clone https://github.com/callstack/linaria.git
cd linaria
git checkout commithash
pnpm bootstrap
cd ../ourproject
npm link ../linaria/packages/babel/ ../linaria/packages/core/ ../linaria/packages/logger/ ../linaria/packages/react/ ../linaria/packages/shaker/ ../linaria/packages/tags/ ../linaria/packages/utils/ ../linaria/packages/webpack5-loader/
npx webpack

Results: 9bb782d0b875a75c9a9b5051b1fbca03db8b554a => EvalError: Cannot read properties of undefined ae162f464fa431708e512f29c0044c6650b219dd => Error: Cannot find module '@babel/plugin-transform-typescript' 715dc93cd92bae56e8b36c7df90f1f267c3f4787 => Error: Cannot find module '@babel/plugin-transform-typescript' 9cb4143d65214a5312d1377b19b0fd3d29ce7244 => EvalError: somefile.tsx: Cannot find module EvalError: Cannot use import statement outside a module in da191b50cf9c10c22e0b66f00edbbf35d1b9a524 => EvalError: somefile.tsx: Cannot find module SyntaxError: somefile.tsx: An error occurred when evaluating the expression: > (0 , _importedFunction.importedFunction) is not a function. b3ef8c1f8bffd6090b39430280d21a0024d6a418 => EvalError: somefile.tsx: Cannot find module 'someotherfile' SyntaxError: somefile.tsx: An error occurred when evaluating the expression: > Cannot read properties of undefined (reading 'someproperty'). ea1444f6b10d43b07b7b6accfdd195743027a3b5 => EvalError: somefile.tsx: Cannot find module 'someotherfile' EvalError: Cannot use import statement outside a module in SyntaxError: somefile.tsx: The expression evaluated to 'NaN' 88e076133df82a3df1a008be3751caea4ec99d0f => MaxListenersExceededWarning: Possible EventTarget memory leak detected. 11 abort listeners added to [AbortSignal]. Use events.setMaxListeners() to increase limit EvalError: Cannot use import statement outside a module in SyntaxError: somefile.tsx: The expression evaluated to 'NaN' EvalError: react-modal: No elements were found for selector #react-root. in cb853e143b0bdfdab33a7edcc10fe9b251409b81 (master) => TypeError: Cannot read properties of undefined (reading 'cssText') at linaria/packages/webpack5-loader/lib/index.js:82:16 224d3a2253dca94425a2215250c401884ed4fd07 (dynamic-require) => TypeError: Cannot read properties of undefined (reading 'cssText') at linaria/packages/webpack5-loader/lib/index.js:82:16

Most of these gave a ton of errors in different files so i might have missed some. master and dynamic-require both gave only that single error and exited immediately without any further output from webpack.

Hi guys!

I would greatly appreciate it If you could check your build with this branch https://github.com/callstack/linaria/pull/1330. All recent PRs will be released as 5.0 because the processing was almost completely rewritten. There is still some work to be done to polish and improve the debug experience, so if you can provide some feedback, I can release the new version faster and, hopefully, with better stability and performance 😃

@Anber Alas, the build from latest master branch (da191b50cf9c10c22e0b66f00edbbf35d1b9a524) doesn’t seem to fix my build 😢

The expression evaluated to 'undefined', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(TOASTS_MAX_WIDTH)'.
> 18 | 	max-width: ${TOASTS_MAX_WIDTH}px;

Sorry, would love to do that but I’m away atm Will try when I’m back. Cheers

On Thu, 27 Jul 2023, 21:18 Anton Evzhakov, @.***> wrote:

Well… let’s try again 😃 It would be cool if someone could build Linaria locally and check if the issue was fixed.

— Reply to this email directly, view it on GitHub https://github.com/callstack/linaria/issues/1287#issuecomment-1654369065, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHXREHB5CZYZH7O4TLP45LXSK5I5ANCNFSM6AAAAAA2OLAJPY . You are receiving this because you were mentioned.Message ID: @.***>

I opened another issue that might or might not be related. The error message is the same and it also started happening in the latest couple of versions. It has a reproducible demo. https://github.com/callstack/linaria/issues/1304

Thanks @Anber . I will check and let you know.

@Anber I’ll setup a repo and provide you with the details.

@asvinb right after https://github.com/callstack/linaria/pull/1289. Hopefully, by the end of this week.

👋 @Anber , indeed I have multiple entry points. 👍