The expression evaluated to 'undefined' ...

[asvinb]

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

[Anber]

Hi @asvinb! We are trying to investigate the reason here https://github.com/callstack/linaria/pull/1286#discussion_r1265414453. Do you have multiple entrypoints in webpack?

[asvinb]

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

[Anber]

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

[asvinb]

👋 @Anber any ETA on a fix for this? Thanks!

[Anber]

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

[Anber]

I doubt it, but maybe the new version has fixed that error since I couldn't reproduce the problem.

[asvinb]

@Anber Sadly upgrading to the latest version, 4.5.3 does not fix the issue.

[Anber]

@asvinb Is there any chance that you can provide a repo that reproduces this error?

[asvinb]

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

[Anber]

Hi @asvinb! Looks like @tsukuisan found something related https://github.com/callstack/linaria/issues/1300

[asvinb]

Nice thanks for the update @Anber !

[Anber]

@asvinb @PierreGUI the fix is going to be released in a few minutes. Could you please check it?

[asvinb]

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

[PierreGUI]

Thanks @Anber! Unfortunately the new release doesn't build in my project yet :/

[GabbeV]

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

[Anber]

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

[PierreGUI]

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: @.***>

[asvinb]

@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.

[asvinb]

@Anber The issue that @GabbeV created describes exactly what I was experiencing. So maybe you can release 4.5.5 and we can test.

[morriq]

@Anber The issue that @GabbeV created describes exactly what I was experiencing. So maybe you can release 4.5.5 and we can test.

@asvinb I think it's already released. @GabbeV issue is closed in https://github.com/callstack/linaria/commit/9bb782d0b875a75c9a9b5051b1fbca03db8b554a and its released in 4.5.4

[GabbeV]

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.

[PierreGUI]

@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;

[Anber]

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.

[Anber]

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 :)

[GabbeV]

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.

[Anber]

Hi @GabbeV!

Could you please check this branch? https://github.com/callstack/linaria/pull/1331

[GabbeV]

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.

[Anber]

Hi @GabbeV, That's amazing news! If you can create a repo that reproduces these errors, I can try to fix them as well.

[therealgilles]

@Anber This is still a problem with v4.5.4.

[Anber]

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

[therealgilles]

Thanks for confirming, I think it's good to let people know. Will there be a 4.5.5 with an equivalent fix or is 4.5.* dead?

[Anber]

@therealgilles I'm afraid it's impossible to fix it for 4.… However, the 5.0 is just a more stable version of 4. without planned breaking changes for end-users. I got access to the massive codebase that helped catch and fix many bugs in processing. We still have a couple of problems, but everything looks bright to release the new version by the end of the month.

[therealgilles]

@Anber That's great news, can't wait to try v5 out!

[layershifter]

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

[asvinb]

@Anber Am getting the following error now:

/node_modules/@linaria/babel-preset/lib/module.js:224
      throw new EvalError(`${e.message} in${this.callstack.join('\n| ')}\n`);
      ^

EvalError: _interopRequireDefault is not a function in /wp-content/node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
| /wp-content/node_modules/@babel/runtime/helpers/esm/defineProperty.js

Adding the babel/runtime package does not fix the issue.

[therealgilles]

@Anber I'm getting the same error as @asvinb. Looks like a commonjs vs esm issue. Any ideas/advice?

[Anber]

@asvinb @therealgilles it may be fixed by @layershifter in https://github.com/callstack/linaria/pull/1356

[Anber]

Hi @asvinb @therealgilles We have just released the new version. Could you please check it?

[therealgilles]

Hi @Anber, I got some new errors with 5.0.3:

Module 00113 is disposed in .../node_modules/polished/dist/polished.cjs.js

and

       5 | export type Palette = {
       6 |   colorA: string;
    >  7 |   colorB: string;
         |                 ^

      at Module.evaluate (node_modules/@linaria/babel-preset/src/module.ts:321:13)
      at require.Object.assign.ensure (node_modules/@linaria/babel-preset/src/module.ts:181:9)

and

Module build failed (from ./node_modules/@linaria/webpack-loader/lib/index.js):
.../node_modules/@linaria/babel-preset/lib/module.js:224
      throw new EvalError(`${e.message} in${this.callstack.join('\n| ')}\n`);
      ^

EvalError: Module 00170 is disposed in .../node_modules/polished/dist/polished.cjs.js

    at Module.evaluate (.../node_modules/@linaria/babel-preset/src/module.ts:321:13)
    at require.Object.assign.ensure (.../node_modules/@linaria/babel-preset/src/module.ts:181:9)

I've also noticed that the runtime is longer as some of the CI timed out. But probably best to focus on the errors first.

[layershifter]

@therealgilles

       5 | export type Palette = {
       6 |   colorA: string;
    >  7 |   colorB: string;
         |                 ^

      at Module.evaluate (node_modules/@linaria/babel-preset/src/module.ts:321:13)
      at require.Object.assign.ensure (node_modules/@linaria/babel-preset/src/module.ts:181:9)

Do you have .baberlc/babel.config.* or babelOptions: { presets: ['@babel/typescript'] } in options of @linaria/webpack-loader?

[therealgilles]

Do you mean @babel/preset-typescript? If so, yes for Jest when running tests. As well as @babel/preset-react. I'll have to check if that particular error is from the Jest CI run.

UPDATE: I confirm this is from the Jest CI run.

[Anber]

Module 00113 is disposed is probably related to https://github.com/callstack/linaria/issues/1352