callstack
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
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?
Well, at least we know what went wrong. Now I need to understand why and how to fix it :)
@asvinb right after https://github.com/callstack/linaria/pull/1289. Hopefully, by the end of this week.
I doubt it, but maybe the new version has fixed that error since I couldn't reproduce the problem.
@asvinb Is there any chance that you can provide a repo that reproduces this error?
Hi @asvinb! Looks like @tsukuisan found something related https://github.com/callstack/linaria/issues/1300
@asvinb @PierreGUI the fix is going to be released in a few minutes. Could you please check it?
Thanks @Anber! Unfortunately the new release doesn't build in my project yet :/
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
Well… let's try again :) It would be cool if someone could build Linaria locally and check if the issue was fixed.
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: @.***>
@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.
@Anber The issue that @GabbeV created describes exactly what I was experiencing. So maybe you can release 4.5.5 and we can test.
@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
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 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;
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.
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 :)
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 @GabbeV!
Could you please check this branch? https://github.com/callstack/linaria/pull/1331
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.
Hi @GabbeV, That's amazing news! If you can create a repo that reproduces these errors, I can try to fix them as well.
Hi @therealgilles! Yep, I know. It is fixed in 5.0 that will be released soon.