roblox-ts•6mo ago

You cannot use modules directly under node_modules.

import React from "@rbxts/react";
import { PrismContext, PrismContextValue } from "./prism-context";
import { ChromaProvider, DefaultPalettes } from "@rbxts/chroma";
import { createConfig, DEFAULT_PRISM_CONFIG, PrismConfig } from "./config";

interface PrismProviderProps {
    theme: keyof typeof DefaultPalettes;
    config?: Partial<PrismConfig>;
    children: React.ReactNode;
}

export const PrismProvider = ({ children, theme, config }: PrismProviderProps) => {
    // React.useEffect(() => {
    //     setCurrentTheme(initialTheme);
    // }, [initialTheme, theme]);

    return (
        <ChromaProvider theme={DefaultPalettes} currentTheme={theme}>
            <PrismContext.Provider
                value={{ config: config ? createConfig(DEFAULT_PRISM_CONFIG, config) : DEFAULT_PRISM_CONFIG }}
            >
                {children}
            </PrismContext.Provider>
        </ChromaProvider>
    );
};

export function usePrism() {
    const context = React.useContext(PrismContext) as PrismContextValue | undefined;
    if (context === undefined) error("useChroma must be used within a PrismaProvider!");
    return context;
}

import React from "@rbxts/react";
import { PrismContext, PrismContextValue } from "./prism-context";
import { ChromaProvider, DefaultPalettes } from "@rbxts/chroma";
import { createConfig, DEFAULT_PRISM_CONFIG, PrismConfig } from "./config";

interface PrismProviderProps {
    theme: keyof typeof DefaultPalettes;
    config?: Partial<PrismConfig>;
    children: React.ReactNode;
}

export const PrismProvider = ({ children, theme, config }: PrismProviderProps) => {
    // React.useEffect(() => {
    //     setCurrentTheme(initialTheme);
    // }, [initialTheme, theme]);

    return (
        <ChromaProvider theme={DefaultPalettes} currentTheme={theme}>
            <PrismContext.Provider
                value={{ config: config ? createConfig(DEFAULT_PRISM_CONFIG, config) : DEFAULT_PRISM_CONFIG }}
            >
                {children}
            </PrismContext.Provider>
        </ChromaProvider>
    );
};

export function usePrism() {
    const context = React.useContext(PrismContext) as PrismContextValue | undefined;
    if (context === undefined) error("useChroma must be used within a PrismaProvider!");
    return context;
}

../src/prism-provider.tsx:1:19 - error TS roblox-ts: You cannot use modules directly under node_modules. 1 import React from "@rbxts/react"; ~~~~~~ ../src/prism-provider.tsx:3:49 - error TS roblox-ts: You cannot use modules directly under node_modules. 3 import { ChromaProvider, DefaultPalettes } from "@rbxts/chroma";

Solution:

Setting "preserveSymlinks": true, in my tsconfig fixed the import error

Jump to solution

8 Replies

longuintOP•6mo ago

I am using a package setup with src, and a test directory which is a game setup

{
    "compilerOptions": {
        // required
        "allowSyntheticDefaultImports": true,
        "downlevelIteration": true,
        "jsx": "react",
        "jsxFactory": "React.createElement",
        "jsxFragmentFactory": "React.Fragment",
        "module": "commonjs",
        "moduleResolution": "Node",
        "noLib": true,
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "moduleDetection": "force",
        "strict": true,
        "target": "ESNext",
        "typeRoots": ["node_modules/@rbxts"],

        // configurable
        "rootDir": "src",
        "outDir": "out",
        "incremental": true,
        "tsBuildInfoFile": "out/tsconfig.tsbuildinfo",
        "declaration": true
    },
    "include": ["./src/**/*"]
}

{
    "compilerOptions": {
        // required
        "allowSyntheticDefaultImports": true,
        "downlevelIteration": true,
        "jsx": "react",
        "jsxFactory": "React.createElement",
        "jsxFragmentFactory": "React.Fragment",
        "module": "commonjs",
        "moduleResolution": "Node",
        "noLib": true,
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "moduleDetection": "force",
        "strict": true,
        "target": "ESNext",
        "typeRoots": ["node_modules/@rbxts"],

        // configurable
        "rootDir": "src",
        "outDir": "out",
        "incremental": true,
        "tsBuildInfoFile": "out/tsconfig.tsbuildinfo",
        "declaration": true
    },
    "include": ["./src/**/*"]
}

root tsconfig

{
    "compilerOptions": {
        // required
        "allowSyntheticDefaultImports": true,
        "downlevelIteration": true,
        "jsx": "react",
        "jsxFactory": "React.createElement",
        "jsxFragmentFactory": "React.Fragment",
        "module": "commonjs",
        "moduleResolution": "Node",
        "noLib": true,
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "moduleDetection": "force",
        "strict": true,
        "target": "ESNext",
        "typeRoots": ["./node_modules/@rbxts", "../node_modules/@rbxts"],
        "paths": {
            "@rbxts/prism": ["../../src"]
        },
        "rootDirs": ["./src", "../src"],
        "baseUrl": "./src",
        "outDir": "./out",
        "incremental": true,
        "tsBuildInfoFile": "out/tsconfig.tsbuildinfo"
    },
    "include": ["./src/**/*", "../src/**/*"]
}

{
    "compilerOptions": {
        // required
        "allowSyntheticDefaultImports": true,
        "downlevelIteration": true,
        "jsx": "react",
        "jsxFactory": "React.createElement",
        "jsxFragmentFactory": "React.Fragment",
        "module": "commonjs",
        "moduleResolution": "Node",
        "noLib": true,
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "moduleDetection": "force",
        "strict": true,
        "target": "ESNext",
        "typeRoots": ["./node_modules/@rbxts", "../node_modules/@rbxts"],
        "paths": {
            "@rbxts/prism": ["../../src"]
        },
        "rootDirs": ["./src", "../src"],
        "baseUrl": "./src",
        "outDir": "./out",
        "incremental": true,
        "tsBuildInfoFile": "out/tsconfig.tsbuildinfo"
    },
    "include": ["./src/**/*", "../src/**/*"]
}

test tsconfig

Tester•6mo ago

How updated are your packages Idk what's the problem but first what I would do it to check if everything is updated, try reinstalling the packages Like deleting node_modules and again npm i

longuintOP•6mo ago

Yeah, deleting node_modules and out/ had no effect

Solution

longuint•6mo ago

Setting "preserveSymlinks": true, in my tsconfig fixed the import error

Tester•6mo ago

Yaay

longuintOP•6mo ago

Yeah, it fixed that issue and created a new one lol

Tester•6mo ago

Wut? :0 What issue?

longuintOP•6mo ago

https://discord.com/channels/476080952636997633/1380313509434228817

Gaming

Programming

You cannot use modules directly under node_modules.

Did you find this page helpful?